StoreContext.tsx

Go to the documentation of this file.

"use client";
import { createContext, useContext, useState, useEffect, ReactNode } from "react";
import { apiClient } from "@/lib/client/apiClient";
import { defaultConfig } from "@/lib/config";
 
export interface User {
  id: string;
  name: string;
  role: 'staff' | 'employee' | 'admin';
}
 
export interface Store {
  id: string;
  name: string;
  url?: string;
  type?: 'management' | 'store';
}
 
export interface Session {
  user: User;
  store: Store;
  authenticated: boolean;
}
 
interface StoreContextType {
  // Legacy store name support
  storeName: string;
  setStoreName: (name: string) => void;
  refreshStoreName: () => Promise<void>;
  
  // New session support
  session: Session | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  error: string | null;
  checkSession: () => Promise<void>;
  logout: () => Promise<void>;
}
 
const StoreContext = createContext<StoreContextType | undefined>(undefined);
 
export function StoreProvider({ children }: { children: ReactNode }) {
  // Always start with server-safe default to prevent hydration mismatch
  const [storeName, setStoreName] = useState(() => {
    // Fallback order: Config UI name, then app name, then default
    return defaultConfig.values?.UserInterfaceFriendlyName || 
           process.env.NEXT_PUBLIC_APP_NAME || 
           "CWA Standard";
  });
 
  const [session, setSession] = useState<Session | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
 
  // Load from sessionStorage after hydration to avoid mismatch
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const cached = sessionStorage.getItem('store_name');
      if (cached) {
        setStoreName(cached);
      }
    }
  }, []);
 
  // Check for existing session on mount
  useEffect(() => {
    checkSession();
  }, []);
 
  async function checkSession() {
    setIsLoading(true);
    try {
      const response = await fetch('/api/auth/session');
      if (response.ok) {
        const data = await response.json();
        if (data.isAuthenticated && data.session) {
          setSession(data.session);
          
          // Update store name if available
          if (data.session.store?.name) {
            setStoreName(data.session.store.name);
            if (typeof window !== 'undefined') {
              sessionStorage.setItem('store_name', data.session.store.name);
            }
          }
        } else {
          setSession(null);
        }
      } else {
        setSession(null);
      }
    } catch (err) {
      console.error('Session check failed:', err);
      setSession(null);
    } finally {
      setIsLoading(false);
    }
  }
 
  async function logout() {
    try {
      await fetch('/api/auth/logout', { method: 'POST' });
      setSession(null);
      if (typeof window !== 'undefined') {
        window.location.href = '/login';
      }
    } catch (err) {
      console.error('Logout failed:', err);
    }
  }
 
  useEffect(() => {
    // Legacy: Fetch store name from locations API if not authenticated
    if (session || typeof window === 'undefined') return;
    
    const cached = sessionStorage.getItem('store_name');
    if (cached) return;
 
    const fetchStoreName = async () => {
      try {
        const result = await apiClient.getLocations();
        if (result.success) {
          const apiData: any = result.data || result;
          const locationData = (!Array.isArray(apiData) && apiData?.DATS) || (!Array.isArray(apiData) && apiData?.data?.Location) || (Array.isArray(apiData) ? apiData : null);
          const locations = Array.isArray(locationData) ? locationData : [];
          
          if (locations.length > 0) {
            const firstLocation = locations[0];
            const locationName = firstLocation.f500 || firstLocation.Name;
            if (locationName) {
              setStoreName(locationName);
              sessionStorage.setItem('store_name', locationName);
            }
          }
        }
      } catch (error) {
        console.warn('Failed to fetch store name from API:', error);
      }
    };
 
    fetchStoreName();
  }, [session]);
 
  const updateStoreName = (name: string) => {
    setStoreName(name);
    if (typeof window !== 'undefined') {
      sessionStorage.setItem('store_name', name);
    }
  };
 
  const refreshStoreName = async () => {
    try {
      const result = await apiClient.getLocations();
      if (result.success) {
        const apiData: any = result.data || result;
        const locationData = (!Array.isArray(apiData) && apiData?.DATS) || (!Array.isArray(apiData) && apiData?.data?.Location) || (Array.isArray(apiData) ? apiData : null);
        const locations = Array.isArray(locationData) ? locationData : [];
        
        if (locations.length > 0) {
          const firstLocation = locations[0];
          const locationName = firstLocation.f500 || firstLocation.Name;
          if (locationName) {
            updateStoreName(locationName);
          }
        }
      }
    } catch (error) {
      console.warn('Failed to refresh store name from API:', error);
    }
  };
 
  return (
    <StoreContext.Provider value={{ 
      storeName, 
      setStoreName: updateStoreName, 
      refreshStoreName,
      session,
      isAuthenticated: session !== null && session.authenticated,
      isLoading,
      error,
      checkSession,
      logout
    }}>
      {children}
    </StoreContext.Provider>
  );
}
 
export function useStore() {
  const context = useContext(StoreContext);
  if (context === undefined) {
    throw new Error("useStore must be used within a StoreProvider");
  }
  return context;
}