flyer-crawler.projectium.com/src/hooks/useAppInitialization.ts

// src/hooks/useAppInitialization.ts
import { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useAuth } from './useAuth';
import { useModal } from './useModal';
import { logger } from '../services/logger.client';
import config from '../config';

export const useAppInitialization = () => {
  const { userProfile, login } = useAuth();
  const { openModal } = useModal();
  const location = useLocation();
  const navigate = useNavigate();

  const [isDarkMode, setIsDarkMode] = useState(false);
  const [unitSystem, setUnitSystem] = useState<'metric' | 'imperial'>('imperial');

  // Effect to handle the token from Google/GitHub OAuth redirect
  useEffect(() => {
    const urlParams = new URLSearchParams(location.search);
    const googleToken = urlParams.get('googleAuthToken');

    if (googleToken) {
      logger.info('Received Google Auth token from URL. Authenticating...');
      login(googleToken).catch((err) =>
        logger.error('Failed to log in with Google token', { error: err }),
      );
      navigate(location.pathname, { replace: true });
    }

    const githubToken = urlParams.get('githubAuthToken');
    if (githubToken) {
      logger.info('Received GitHub Auth token from URL. Authenticating...');
      login(githubToken).catch((err) => {
        logger.error('Failed to log in with GitHub token', { error: err });
      });
      navigate(location.pathname, { replace: true });
    }
  }, [login, location.search, navigate, location.pathname]);

  // Effect to handle "What's New" modal
  useEffect(() => {
    const appVersion = config.app.version;
    if (appVersion) {
      logger.info(`Application version: ${appVersion}`);
      const lastSeenVersion = localStorage.getItem('lastSeenVersion');
      if (appVersion !== lastSeenVersion) {
        openModal('whatsNew');
        localStorage.setItem('lastSeenVersion', appVersion);
      }
    }
  }, [openModal]);

  // Effect to set initial theme based on user profile, local storage, or system preference
  useEffect(() => {
    let darkModeValue: boolean;
    if (userProfile && userProfile.preferences?.darkMode !== undefined) {
      // Preference from DB
      darkModeValue = userProfile.preferences.darkMode;
    } else {
      // Fallback to local storage or system preference
      const savedMode = localStorage.getItem('darkMode');
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      darkModeValue = savedMode !== null ? savedMode === 'true' : prefersDark;
    }
    setIsDarkMode(darkModeValue);
    document.documentElement.classList.toggle('dark', darkModeValue);
    // Also save to local storage if coming from profile, to persist on logout
    if (userProfile && userProfile.preferences?.darkMode !== undefined) {
      localStorage.setItem('darkMode', String(userProfile.preferences.darkMode));
    }
  }, [userProfile]);

  // Effect to set initial unit system based on user profile or local storage
  useEffect(() => {
    if (userProfile && userProfile.preferences?.unitSystem) {
      setUnitSystem(userProfile.preferences.unitSystem);
      localStorage.setItem('unitSystem', userProfile.preferences.unitSystem);
    } else {
      const savedSystem = localStorage.getItem('unitSystem') as 'metric' | 'imperial' | null;
      if (savedSystem) {
        setUnitSystem(savedSystem);
      }
    }
  }, [userProfile?.preferences?.unitSystem, userProfile?.user.user_id]);

  return { isDarkMode, unitSystem };
};