github/sim
1
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-01-08 22:48:14 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fixed hydration error

Browse Source
This commit is contained in:
Emir Karabeg
2025-01-29 23:36:43 -08:00
parent 04fb16ce40
commit dd2caee5ca
4 changed files with 21 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/layout.tsx
View File

@@ -14,22 +14,6 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<head>
<script
dangerouslySetInnerHTML={{
__html: `window.INITIAL_TIMESTAMP = 0;`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
document.addEventListener('DOMContentLoaded', function() {
window.INITIAL_TIMESTAMP = Date.now();
});
`,
}}
/>
</head>
<body>{children}</body>
</html>
)

18
app/w/components/control-bar/control-bar.tsx
View File

@@ -31,6 +31,12 @@ export function ControlBar() {
const { workflows, removeWorkflow, activeWorkflowId } = useWorkflowRegistry()
const router = useRouter()
// Use client-side only rendering for the timestamp
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
}, [])
// Get notifications for current workflow
const workflowNotifications = activeWorkflowId
? getWorkflowNotifications(activeWorkflowId)
@@ -64,10 +70,14 @@ export function ControlBar() {
<h2 className="font-semibold text-sm">
{activeWorkflowId ? workflows[activeWorkflowId].name : 'Workflow'}
</h2>
<p className="text-xs text-muted-foreground">
Saved{' '}
{formatDistanceToNow(history.present.timestamp, { addSuffix: true })}
</p>
{mounted && ( // Only render the timestamp after client-side hydration
<p className="text-xs text-muted-foreground">
Saved{' '}
{formatDistanceToNow(history.present.timestamp, {
addSuffix: true,
})}
</p>
)}
</div>
{/* Middle Section - Reserved for future use */}

9
lib/utils.ts
View File

@@ -3,11 +3,4 @@ import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
export const getTimestamp = () => {
if (typeof window === 'undefined') {
return Date.now()
}
return window.INITIAL_TIMESTAMP || Date.now()
}
}

9
stores/notifications/notifications-store.ts
View File

@@ -1,7 +1,6 @@
import { create } from 'zustand'
import { devtools } from 'zustand/middleware'
import { NotificationType, Notification, NotificationStore } from './types'
import { getTimestamp } from '@/lib/utils'
const STORAGE_KEY = 'workflow-notifications'
@@ -24,14 +23,18 @@ export const useNotificationStore = create<NotificationStore>()(
notifications: loadPersistedNotifications(),
addNotification: (type, message, workflowId) => {
// Only create notifications on the client side
if (typeof window === 'undefined') return
const notification: Notification = {
id: typeof window === 'undefined' ? '1' : crypto.randomUUID(),
id: crypto.randomUUID(),
type,
message,
timestamp: getTimestamp(),
timestamp: Date.now(), // Simplified timestamp handling
isVisible: true,
workflowId
}
set((state) => {
const newNotifications = [...state.notifications, notification]
persistNotifications(newNotifications)