feat: Add Cookies Modal

Author: raminr77

src/app/layout.tsx

@@ -20,11 +20,11 @@ const CustomCursor = React.lazy(() =>
 const Header = React.lazy(() =>
   import('@/layout/components/header').then((module) => ({ default: module.Header }))
 );
-// const CookiesModal = React.lazy(() =>
-//   import('@/layout/components/cookies-modal').then((module) => ({
-//     default: module.CookiesModal
-//   }))
-// );
+const CookiesModal = React.lazy(() =>
+  import('@/layout/components/cookies-modal').then((module) => ({
+    default: module.CookiesModal
+  }))
+);
 const PerformanceMonitor = React.lazy(() =>
   import('@/shared/components/performance-monitor').then((module) => ({
     default: module.PerformanceMonitor
@@ -120,7 +120,7 @@ export default function RootLayout({
 
         {children}
 
-        {/* <CookiesModal /> */}
+        <CookiesModal />
 
         <ToastContainer
           limit={4}

src/layout/components/cookies-modal/index.tsx

@@ -1,6 +1,5 @@
 'use client';
-
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import clsx from 'clsx';
 
 import {
@@ -13,20 +12,32 @@ import { COOKIES_MODAL_STATUS } from '@/shared/constants';
 import { Button } from '@/shared/components/button';
 
 export function CookiesModal() {
-  const [cookiesModalStatus, setCookiesModalStatus] = useState<CookiesModalStatus>(() =>
-    getCookiesModalStatus()
+  const [cookiesModalStatus, setCookiesModalStatus] = useState<CookiesModalStatus>(
+    COOKIES_MODAL_STATUS.NONE
   );
 
+  useEffect(() => {
+    try {
+      const initial = getCookiesModalStatus();
+      setCookiesModalStatus(initial);
+    } catch {
+      setCookiesModalStatus(COOKIES_MODAL_STATUS.NONE);
+    }
+  }, []);
+
   const handleAccept = () => {
-    setCookiesModalStatus(COOKIES_MODAL_STATUS.ACCESPT);
-    updateCookiesModalStatus(COOKIES_MODAL_STATUS.ACCESPT);
+    setCookiesModalStatus(COOKIES_MODAL_STATUS.ACCEPT);
+    updateCookiesModalStatus(COOKIES_MODAL_STATUS.ACCEPT);
   };
+
   const handleReject = () => {
     setCookiesModalStatus(COOKIES_MODAL_STATUS.REJECT);
     updateCookiesModalStatus(COOKIES_MODAL_STATUS.REJECT);
   };
 
-  return cookiesModalStatus === COOKIES_MODAL_STATUS.NONE ? (
+  if (cookiesModalStatus !== COOKIES_MODAL_STATUS.NONE) return null;
+
+  return (
     <div
       className={clsx(
         'fixed flex flex-col gap-2 bottom-5 left-5 max-md:left-1/2 max-md:-translate-x-1/2 transform border p-4 w-11/12 max-w-sm select-none shadow backdrop-blur-sm duration-500 hover:bg-slate-300/10 border-slate-300/40 bg-transparent',
@@ -44,5 +55,5 @@ export function CookiesModal() {
         <Button label="Reject" type="button" onClick={handleReject} />
       </div>
     </div>
-  ) : null;
+  );
 }

src/shared/constants/cookies-modal.ts

@@ -1,5 +1,5 @@
 export const COOKIES_MODAL_STATUS = {
-  ACCESPT: 'ACCESPT',
+  ACCEPT: 'ACCEPT',
   REJECT: 'REJECT',
   NONE: 'NONE'
 } as const;

src/shared/helpers/cookies-modal.ts

@@ -3,7 +3,6 @@ import { COOKIES_MODAL_STATUS, LOCAL_STORAGE_KEYS } from '../constants';
 export type CookiesModalStatus = keyof typeof COOKIES_MODAL_STATUS;
 
 export function getCookiesModalStatus(): CookiesModalStatus {
-  if (typeof window === 'undefined') return COOKIES_MODAL_STATUS.NONE;
   return (
     (localStorage.getItem(LOCAL_STORAGE_KEYS.COOKIES_MODAL) as
       | CookiesModalStatus
@@ -12,7 +11,5 @@ export function getCookiesModalStatus(): CookiesModalStatus {
 }
 
 export function updateCookiesModalStatus(status: CookiesModalStatus): void {
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(LOCAL_STORAGE_KEYS.COOKIES_MODAL, status);
-  }
+  localStorage.setItem(LOCAL_STORAGE_KEYS.COOKIES_MODAL, status);
 }