asdasdsa

frontend/src/store/columnVisibilityStore.ts

@@ -3,14 +3,23 @@
  * Manages column visibility settings per page with localStorage persistence
  * Uses the same pattern as siteStore and sectorStore
  * Stores preferences per user for multi-user support
+ * Column preferences expire after 30 days
  */
 import { create } from 'zustand';
 import { persist, createJSONStorage, StateStorage } from 'zustand/middleware';
-import { useAuthStore } from './authStore';
+
+interface ColumnPreference {
+  columns: string[];
+  timestamp: number;
+}
 
 interface ColumnVisibilityState {
-  // Map of page pathname to Set of visible column keys
-  pageColumns: Record<string, string[]>;
+  // Map of page pathname to column preference with timestamp
+  pageColumns: Record<string, ColumnPreference>;
+  
+  // Hydration flag to know when persist has loaded
+  _hasHydrated: boolean;
+  setHasHydrated: (state: boolean) => void;
   
   // Actions
   setPageColumns: (pathname: string, columnKeys: string[]) => void;
@@ -19,50 +28,107 @@ interface ColumnVisibilityState {
   resetPageColumns: (pathname: string) => void;
 }
 
+// Helper function to get user ID directly from localStorage (synchronous, no race conditions)
+// CRITICAL: We must read directly from localStorage, not from useAuthStore.getState().user
+// because the auth store might not be hydrated yet when this storage is accessed
+const getUserIdFromStorage = (): string => {
+  try {
+    const authData = localStorage.getItem('auth-storage');
+    if (authData) {
+      const parsed = JSON.parse(authData);
+      const userId = parsed?.state?.user?.id;
+      if (userId) {
+        return String(userId);
+      }
+    }
+  } catch (error) {
+    // Silent fail - will use anonymous
+  }
+  return 'anonymous';
+};
+
 // Custom storage that uses user-specific keys
+// IMPORTANT: The persist middleware passes the 'name' param, but we need to append user ID
+// CRITICAL FIX: Get user ID directly from localStorage synchronously to avoid race conditions
 const userSpecificStorage: StateStorage = {
   getItem: (name: string) => {
-    const user = useAuthStore.getState().user;
-    const userId = user?.id || 'anonymous';
-    const key = `igny8-column-visibility-user-${userId}`;
+    const userId = getUserIdFromStorage();
+    const key = `${name}-user-${userId}`;
     const value = localStorage.getItem(key);
+    if (typeof window !== 'undefined' && window.location.pathname.includes('/writer/')) {
+      console.log('🔍 STORAGE GET:', { key, hasValue: !!value, valuePreview: value?.substring(0, 50) });
+    }
     return value;
   },
   setItem: (name: string, value: string) => {
-    const user = useAuthStore.getState().user;
-    const userId = user?.id || 'anonymous';
-    const key = `igny8-column-visibility-user-${userId}`;
+    const userId = getUserIdFromStorage();
+    const key = `${name}-user-${userId}`;
+    if (typeof window !== 'undefined' && window.location.pathname.includes('/writer/')) {
+      console.log('💾 STORAGE SET:', { key, valuePreview: value?.substring(0, 50) });
+    }
     localStorage.setItem(key, value);
   },
   removeItem: (name: string) => {
-    const user = useAuthStore.getState().user;
-    const userId = user?.id || 'anonymous';
-    const key = `igny8-column-visibility-user-${userId}`;
+    const userId = getUserIdFromStorage();
+    const key = `${name}-user-${userId}`;
     localStorage.removeItem(key);
   },
 };
 
+// 30 days in milliseconds
+const THIRTY_DAYS_MS = 30 * 24 * 60 * 60 * 1000;
+
 export const useColumnVisibilityStore = create<ColumnVisibilityState>()(
   persist<ColumnVisibilityState>(
     (set, get) => ({
       pageColumns: {},
+      _hasHydrated: false,
+      
+      setHasHydrated: (state: boolean) => {
+        set({ _hasHydrated: state });
+      },
       
       setPageColumns: (pathname: string, columnKeys: string[]) => {
+        if (pathname.includes('/writer/')) {
+          console.log('📝 setPageColumns:', { pathname, columns: columnKeys, timestamp: new Date().toISOString() });
+        }
         set((state) => ({
           pageColumns: {
             ...state.pageColumns,
-            [pathname]: columnKeys,
+            [pathname]: {
+              columns: columnKeys,
+              timestamp: Date.now(),
+            },
           },
         }));
       },
       
       getPageColumns: (pathname: string) => {
-        return get().pageColumns[pathname] || [];
+        const preference = get().pageColumns[pathname];
+        if (pathname.includes('/writer/')) {
+          console.log('📖 getPageColumns:', { pathname, hasPreference: !!preference, columns: preference?.columns });
+        }
+        if (!preference) return [];
+        
+        // Check if preference has expired (older than 30 days)
+        const now = Date.now();
+        if (now - preference.timestamp > THIRTY_DAYS_MS) {
+          // Remove expired preference
+          set((state) => {
+            const newPageColumns = { ...state.pageColumns };
+            delete newPageColumns[pathname];
+            return { pageColumns: newPageColumns };
+          });
+          return [];
+        }
+        
+        return preference.columns;
       },
       
       toggleColumn: (pathname: string, columnKey: string) => {
         set((state) => {
-          const currentColumns = state.pageColumns[pathname] || [];
+          const preference = state.pageColumns[pathname];
+          const currentColumns = preference?.columns || [];
           const newColumns = currentColumns.includes(columnKey)
             ? currentColumns.filter((key) => key !== columnKey)
             : [...currentColumns, columnKey];
@@ -70,7 +136,10 @@ export const useColumnVisibilityStore = create<ColumnVisibilityState>()(
           return {
             pageColumns: {
               ...state.pageColumns,
-              [pathname]: newColumns,
+              [pathname]: {
+                columns: newColumns,
+                timestamp: Date.now(),
+              },
             },
           };
         });
@@ -90,6 +159,12 @@ export const useColumnVisibilityStore = create<ColumnVisibilityState>()(
       partialize: (state) => ({
         pageColumns: state.pageColumns,
       }),
+      onRehydrateStorage: () => (state) => {
+        if (state && typeof window !== 'undefined' && window.location.pathname.includes('/writer/')) {
+          console.log('💧 REHYDRATED:', { pageColumns: state.pageColumns });
+        }
+        state?.setHasHydrated(true);
+      },
     }
   )
 );