refactor: State management

Author: lc-2025

README.md

@@ -33,7 +33,7 @@ A JAMstack website based on _NextJS_ and _Sanity_ consisting of a professional p
 
 - **Languages**: HTML, CSS, SASS, JavaScript, Typescript, GraphQL, YAML, Bash
 - **Environments**: DOM
-- **Libraries**: Headless UI, GSAP, TypedJS, Testing Library
+- **Libraries**: Headless UI, GSAP, TypedJS, Testing Library, C64JS
 - **Frameworks**: React, Next.js, TailwindCSS, Sanity, Jest, Cypress
 - **Pre/Post-Processors**: PostCSS, Sass
 - **Linters/Plugins**: stylelint, ESLint, Prettier

frontend/src/components/Animation/AnimationIntro.tsx

@@ -7,7 +7,7 @@ import AnimationIntroLogo from './AnimationIntroLogo';
 import AnimationIntroImage from './AnimationIntroLogoImage';
 import AnimationIntroTagline from './AnimationIntroTagline';
 import handleState from '@/state/actions';
-import { useDispatchContext, useTitleContext } from '@/hooks/State';
+import { useDispatchContextTitle, useTitleContext } from '@/hooks/State';
 import useStorage from '@/hooks/Storage';
 import { AnimationIntroType } from '@/types/components/AnimationIntroImage';
 import { CookiesProvider } from '../StateProvider';
@@ -25,7 +25,7 @@ const AnimationIntro = (): React.ReactNode => {
   const router = useRouter();
   const { getStorage } = useStorage();
   const title = useTitleContext();
-  const dispatch = useDispatchContext();
+  const dispatch = useDispatchContextTitle();
   const titleStorage = getStorage(TITLE) ?? false;
 
   useEffect(() => {
@@ -42,7 +42,10 @@ const AnimationIntro = (): React.ReactNode => {
   const handleTitle = (): void => {
     // Storage + state check
     if (titleStorage || title) {
-      handleState({ type: TITLE, element: titleStorage }, dispatch);
+      handleState(
+        { type: TITLE, element: titleStorage },
+        dispatch as keyof typeof dispatch,
+      );
 
       router.push(ROUTE.HOME.PATH);
     }

frontend/src/components/Animation/AnimationIntroLogoImage.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation';
 import gsap from 'gsap';
 import { useGSAP } from '@gsap/react';
 import handleState from '@/state/actions';
-import { useCookiesContext, useDispatchContext } from '@/hooks/State';
+import { useCookiesContext, useDispatchContextCookies } from '@/hooks/State';
 import useStorage from '@/hooks/Storage';
 import { checkCookies } from '@/utilities/utils';
 import { ROUTE, ACTION, ANIMATION_TIMELINE, TEST } from '@/utilities/constants';
@@ -37,7 +37,7 @@ const AnimationIntroImage = ({
   const { getStorage, setStorage } = useStorage();
   const cookiesStorage = getStorage(COOKIES);
   const cookies = useCookiesContext();
-  const dispatch = useDispatchContext();
+  const dispatch = useDispatchContextCookies();
 
   gsap.registerPlugin(useGSAP);
 
@@ -63,7 +63,7 @@ const AnimationIntroImage = ({
         type: TITLE,
         element: true,
       },
-      dispatch,
+      dispatch as keyof typeof dispatch,
     );
   };
 

frontend/src/components/Animation/AnimationPage.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, Ref } from 'react';
 import {
-  useDispatchContext,
+  useDispatchContextLoading,
   useLoadingContext,
   useThemeContext,
 } from '@/hooks/State';
@@ -21,7 +21,7 @@ const AnimationPage = (): React.ReactNode => {
   const bars = useRef<Array<HTMLDivElement>>([]);
   const theme = useThemeContext();
   const loading = useLoadingContext();
-  const dispatch = useDispatchContext();
+  const dispatchLoading = useDispatchContextLoading();
 
   useEffect(() => {
     // Theme check
@@ -36,7 +36,7 @@ const AnimationPage = (): React.ReactNode => {
             type: ACTION.LOADING,
             element: false,
           },
-          dispatch,
+          dispatchLoading as keyof typeof dispatchLoading,
         );
         clearTimeout(timer);
       }, 500);

frontend/src/components/Cookies/CookiesBanner.tsx

@@ -4,15 +4,15 @@ import { useEffect } from 'react';
 import Action from '../Layout/Action';
 import {
   useCookiesContext,
-  useDispatchContext,
+  useDispatchContextCookies,
   useThemeContext,
 } from '@/hooks/State';
 import useStorage from '@/hooks/Storage';
 import handleState from '@/state/actions';
 import { isLightTheme } from '@/utilities/utils';
 import { ACTIONS, ACTION, COOKIES_STATE, TEST } from '@/utilities/constants';
 import { METADATA } from '@/data/content';
-import { Cookie, Status } from '@/types/state/State';
+import { Cookie, Status, TStateCookies } from '@/types/state/State';
 
 /**
  * @description Cookies banner component
@@ -28,7 +28,7 @@ const CookiesBanner = (): React.ReactNode => {
   const theme = useThemeContext();
   const cookies = useCookiesContext();
   const { open } = cookies;
-  const dispatch = useDispatchContext();
+  const dispatch = useDispatchContextCookies();
 
   useEffect(() => {
     initCookies();
@@ -59,7 +59,7 @@ const CookiesBanner = (): React.ReactNode => {
           active: cookiesSaved.active ?? cookies.active,
         },
       },
-      dispatch,
+      dispatch as keyof typeof dispatch,
     );
   };
 
@@ -111,9 +111,9 @@ const CookiesBanner = (): React.ReactNode => {
     handleState(
       {
         type: ACTION.COOKIES,
-        element: selection,
+        element: selection as TStateCookies,
       },
-      dispatch,
+      dispatch as keyof typeof dispatch,
     );
   };
 

frontend/src/components/Cookies/CookiesConsentForm.tsx

@@ -2,8 +2,8 @@
 
 import Form from 'next/form';
 import handleState from '@/state/actions';
-import { Cookie, Status } from '@/types/state/State';
-import { useCookiesContext, useDispatchContext } from '@/hooks/State';
+import { Cookie, Status, TStateCookies } from '@/types/state/State';
+import { useCookiesContext, useDispatchContextCookies } from '@/hooks/State';
 import useStorage from '@/hooks/Storage';
 import { isCookieActive } from '@/utilities/utils';
 import { ACTION, COOKIE_LEVEL, COOKIES, TEST } from '@/utilities/constants';
@@ -27,7 +27,7 @@ const CookiesConsentForm = ({
   const { setStorage, deleteStorages } = useStorage();
   const cookies = useCookiesContext();
   const { active } = cookies;
-  const dispatch = useDispatchContext();
+  const dispatch = useDispatchContextCookies();
 
   // Helpers
   /**
@@ -142,9 +142,9 @@ const CookiesConsentForm = ({
     handleState(
       {
         type: ACTION.COOKIES,
-        element: selection,
+        element: selection as TStateCookies,
       },
-      dispatch,
+      dispatch as keyof typeof dispatch,
     );
   };
 

frontend/src/components/Layout/Footer.tsx

@@ -4,7 +4,7 @@ import Modal from './Modal';
 import CookiesConsentForm from '../Cookies/CookiesConsentForm';
 import {
   useCookiesContext,
-  useDispatchContext,
+  useDispatchContextModal,
   useModalContext,
   useThemeContext,
 } from '@/hooks/State';
@@ -40,7 +40,7 @@ const Footer = (): React.ReactNode => {
   const theme = useThemeContext();
   const cookies = useCookiesContext();
   const modal = useModalContext();
-  const dispatch = useDispatchContext();
+  const dispatch = useDispatchContextModal();
   const { navigate } = useAnimation();
 
   useShortcut();
@@ -70,7 +70,7 @@ const Footer = (): React.ReactNode => {
           [type]: !modal[type as keyof typeof modal],
         },
       },
-      dispatch,
+      dispatch as keyof typeof dispatch,
     );
   };
 

frontend/src/components/Layout/ThemeSwitch.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 import { Switch } from '@headlessui/react';
-import { useDispatchContext, useThemeContext } from '@/hooks/State';
+import { useDispatchContextTheme, useThemeContext } from '@/hooks/State';
 import useStorage from '@/hooks/Storage';
 import handleState from '@/state/actions';
 import { isLightTheme, checkCookies } from '@/utilities/utils';
@@ -19,7 +19,7 @@ const ThemeSwitch = (): React.ReactNode => {
   const themeSaved = getStorage(LABEL) ?? '';
   const cookiesStorage = getStorage(ACTION.COOKIES);
   const theme = useThemeContext();
-  const dispatch = useDispatchContext();
+  const dispatch = useDispatchContextTheme();
 
   useEffect(() => {
     // User preference + system-aware detection
@@ -28,7 +28,7 @@ const ThemeSwitch = (): React.ReactNode => {
 
     handleState(
       { type: ACTION.THEME, element: isDark ? DARK : LIGHT },
-      dispatch,
+      dispatch as keyof typeof dispatch,
     );
     enableTheme(isDark);
   }, []);
@@ -61,18 +61,12 @@ const ThemeSwitch = (): React.ReactNode => {
   const handleTheme = (value: boolean): void => {
     enableTheme(value);
 
-    // Storage + state check
-    if (
-      themeSaved !== '' ||
-      (cookiesStorage &&
-        checkCookies(JSON.parse(cookiesStorage), Cookie.Essentials))
-    ) {
-      setStorage(LABEL, value ? LIGHT : DARK);
-    }
+    const selected = value ? DARK : LIGHT;
 
+    setStorage(LABEL, selected);
     handleState(
-      { type: ACTION.THEME, element: value ? DARK : LIGHT },
-      dispatch,
+      { type: ACTION.THEME, element: selected },
+      dispatch as keyof typeof dispatch,
     );
   };
 

frontend/src/components/StateProvider.tsx

@@ -2,12 +2,16 @@
 
 import { useMemo, useCallback, useReducer } from 'react';
 import {
-  DispatchContext,
   CookiesContext,
   LoadingContext,
   ModalContext,
   ThemeContext,
   TitleContext,
+  CookiesDispatchContext,
+  LoadingDispatchContext,
+  ModalDispatchContext,
+  ThemeDispatchContext,
+  TitleDispatchContext,
 } from '@/state/contexts';
 import {
   reducerCookies,
@@ -48,7 +52,9 @@ const CookiesProvider = ({
 
   return (
     <CookiesContext value={cookies}>
-      <DispatchContext value={setCookies}>{children}</DispatchContext>
+      <CookiesDispatchContext value={setCookies}>
+        {children}
+      </CookiesDispatchContext>
     </CookiesContext>
   );
 };
@@ -78,7 +84,9 @@ const LoadingProvider = ({
 
   return (
     <LoadingContext value={loading}>
-      <DispatchContext value={setLoading}>{children}</DispatchContext>
+      <LoadingDispatchContext value={setLoading}>
+        {children}
+      </LoadingDispatchContext>
     </LoadingContext>
   );
 };
@@ -108,7 +116,7 @@ const ModalProvider = ({
 
   return (
     <ModalContext value={modal}>
-      <DispatchContext value={setModal}>{children}</DispatchContext>
+      <ModalDispatchContext value={setModal}>{children}</ModalDispatchContext>
     </ModalContext>
   );
 };
@@ -138,7 +146,7 @@ const ThemeProvider = ({
 
   return (
     <ThemeContext value={theme}>
-      <DispatchContext value={setTheme}>{children}</DispatchContext>
+      <ThemeDispatchContext value={setTheme}>{children}</ThemeDispatchContext>
     </ThemeContext>
   );
 };
@@ -156,7 +164,7 @@ const TitleProvider = ({
 
   return (
     <TitleContext value={title}>
-      <DispatchContext value={setTitle}>{children}</DispatchContext>
+      <TitleDispatchContext value={setTitle}>{children}</TitleDispatchContext>
     </TitleContext>
   );
 };

frontend/src/hooks/Animation.ts

@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
 import { useTransitionRouter } from 'next-view-transitions';
-import { useDispatchContext } from './State';
+import { useDispatchContextLoading } from './State';
 import handleState from '@/state/actions';
 import { ACTION } from '@/utilities/constants';
 import { TUseAnimation } from '@/types/hooks/Animation';
@@ -13,7 +13,7 @@ import { TUseAnimation } from '@/types/hooks/Animation';
  */
 const useAnimation = (): TUseAnimation => {
   // Hooks
-  const dispatch = useDispatchContext();
+  const dispatch = useDispatchContextLoading();
   const router = useTransitionRouter();
 
   // Helpers
@@ -29,7 +29,7 @@ const useAnimation = (): TUseAnimation => {
         type: ACTION.LOADING,
         element: true,
       },
-      dispatch,
+      dispatch as keyof typeof dispatch,
     );
   };