FIX: Move localStorage.setItem to when user selects button on modal

mshumayl · Apr 19, 2023 · 8d389f1 · 8d389f1
1 parent 41e3354
commit 8d389f1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/components/MobileNavBar.tsx b/src/components/MobileNavBar.tsx
@@ -6,19 +6,19 @@ import { useRouter } from 'next/router';
 import QuotaCount from './QuotaCount';
 import Modal from './Modal';
 
-const NavBar: FC = () => {
+const MobileNavBar: FC = () => {
   const { data: sessionData } = useSession();
   const { asPath } = useRouter();
 
-  const [ modalVisible, setModalVisible ] = useState(false);
-
+  const [ mobileModalVisible, setMobileModalVisible ] = useState(false);
+  
   return (
     <div className="flex w-full">
     {/* Top Nav */}
       <div className="fixed z-40 w-full top-0 bg-slate-200
        border-slate-500 border-b border-x justify-between rounded-b-3xl shadow-lg border-dashed h-12 items-center flex-row px-5 flex sm:hidden">
             <div className="">
-              <QuotaCount setModalVisibleCallback={setModalVisible}/>
+              <QuotaCount setModalVisibleCallback={setMobileModalVisible}/>
             </div>
             <div className="mr-0 text-xs flex flex-row gap-1 items-center justify-end w-2/3 font-zilla-slab">
                 {(sessionData) ? (<div className="text-xs mr-1 text-emerald-600">{sessionData.user.email}</div>) : (<></>)}
@@ -30,9 +30,9 @@ const NavBar: FC = () => {
                 </button>
             </div>
       </div>
-      {(modalVisible) ? 
+      {(mobileModalVisible) ? 
       (<div className="fixed sm:hidden w-full justify-center flex">
-        <Modal setModalVisibleCallback={setModalVisible}/>
+        <Modal setModalVisibleCallback={setMobileModalVisible}/>
       </div>) : 
       (<></>)}
     {/* Bottom Nav */}
@@ -52,4 +52,4 @@ const NavBar: FC = () => {
   )
 }
 
-export default NavBar;
+export default MobileNavBar;
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -15,12 +15,14 @@ const Modal: FC<ModalProps> = ({ setModalVisibleCallback }) => {
 
     const handleYesNotification = () => {
         const res = setNotificationApi.mutateAsync({ isNotify: true });
+        localStorage.setItem("modal_displayed", "true")
 
         setModalVisibleCallback(false);
     }
 
     const handleNoNotification = () => {
         const res = setNotificationApi.mutateAsync({ isNotify: false });
+        localStorage.setItem("modal_displayed", "true")
 
         setModalVisibleCallback(false);
     }

diff --git a/src/components/QuotaCount.tsx b/src/components/QuotaCount.tsx
@@ -1,6 +1,6 @@
 import { signIn, signOut, useSession } from 'next-auth/react';
 import Link from 'next/link';
-import React, { useState, type FC } from 'react'
+import React, { useState, type FC, useEffect } from 'react'
 import { api } from '~/utils/api';
 
 interface QuotaCountProps {
@@ -9,6 +9,8 @@ interface QuotaCountProps {
 
 const QuotaCount: FC<QuotaCountProps> = ({ setModalVisibleCallback }) => {
 
+    const [ localModalValue, setLocalModalValue ] = useState(false)
+
     let searchQuota = 0;
     let generateQuota = 0;
     let bookmarkQuota = 0;
@@ -25,12 +27,12 @@ const QuotaCount: FC<QuotaCountProps> = ({ setModalVisibleCallback }) => {
 
             if (modalDisplayed === null || modalDisplayed === "false") { //If modal_displayed is false or undefined
                 setModalVisibleCallback(true)
-                localStorage.setItem("modal_displayed", "true")
-                //One more tRPC procedure to tell that the user has seen the Modal
+
             }
         }
     }
 
+
     return (
         <>
             <div className="grid grid-cols-3 transition-all text-xs mr-2 font-sans">