Account validation before score save

app/page.tsx

@@ -2,16 +2,22 @@
 
 import NotificationPopup from "@/components/general/notificationPopup";
 import ScoringChart from "@/components/scoring/scoringChart";
-import { useState } from "react";
+import { useState, useEffect} from "react";
 import SessionOptions from "@/components/scoring/sessionOptions";
 import ScoreSetupMenu from "@/components/scoring/scoreSetupMenu";
 import FinalScoringStats from "@/components/scoring/finalScoringStats";
 import SaveScorePopup from "@/components/scoring/saveScorePopup";
+import { useAuthContext } from "@context/authContext";
+import SignUpPopup from "@/components/misc/signUpPopup";
 
 export default function Home() {
   const [setup, setSetup] = useState(true);
   const [finished, setFinished] = useState(false);
   const [savingPopup, setSavingPopup] = useState(false);
+  const [signedIn, setSignedIn] = useState(false);
+  const [signUpPopup, setSignUpPopup] = useState(false);
+
+  const { user } = useAuthContext() as { user: any };
 
   const [location, setLocation] = useState("");
   const [distanceUnit, setDistanceUnit] = useState("");
@@ -31,6 +37,7 @@ export default function Home() {
   const updateSetup = (value: boolean) => setSetup(value);
   const updateFinished = (value: boolean) => setFinished(value);
   const updateSavingPopup = (value: boolean) => setSavingPopup(value);
+  const updateSignUpPopup = (value: boolean) => setSignUpPopup(value);
 
   const updateLocation = (value: string) => setLocation(value);
   const updateDistanceUnit = (value: string) => setDistanceUnit(value);
@@ -52,6 +59,11 @@ export default function Home() {
     setBow("");
   };
 
+  useEffect(() => {
+    if (user) setSignedIn(true);
+    else setSignedIn(false);
+  }, [user]);
+
   const startScoring = () => {
     if (!checkIfReady()) return;
 
@@ -84,6 +96,11 @@ export default function Home() {
   };
 
   const beginSaving = () => {
+    if (!signedIn) {
+      setSignUpPopup(true);
+      return;
+    }
+
     updateSavingPopup(true);
   };
 
@@ -144,6 +161,11 @@ export default function Home() {
           </div>
         </section>
       )}
+      {signUpPopup ? (
+        <SignUpPopup
+          updateSignUpPopup={setSignUpPopup}
+        />
+      ) : null}
       {savingPopup ? (
         <SaveScorePopup
           updateSavingPopup={updateSavingPopup}

components/misc/signUpPopup.tsx

@@ -0,0 +1,27 @@
+import Button from "@components/general/button";
+import googleSignIn from "@/utils/firebase/account/googleSignIn";
+
+export default function SignUpPopup({
+  updateSignUpPopup
+}: {
+  updateSignUpPopup: (value: boolean) => void;
+}) {
+  const signUpProcess = () => {
+    updateSignUpPopup(false);
+    googleSignIn();
+  };
+
+  return (
+    <div className='absolute top-0 left-0 h-screen w-screen flex items-center justify-center bg-dark bg-opacity-30'>
+      <section className='shadow-card rounded-md p-10 border border-gray-300 bg-lightest flex flex-col w-1/2 gap-2'>
+        <h1 className='text-center text-5xl'>Sign In</h1>
+        <hr />
+        <p>You must have an account for this action</p>
+        <div className='flex gap-2'>
+          <Button title='Sign In / Sign Up' onClick={signUpProcess} />
+          <Button title='Cancel' onClick={() => updateSignUpPopup(false)} />
+        </div>
+      </section>
+    </div>
+  );
+}

components/scoring/saveScorePopup.tsx

@@ -17,7 +17,7 @@ type SaveScorePopupProps = {
     note: string;
   }) => void;
   updateNotification: (value: boolean) => void;
-  updateNotificationType: (value: string) => void;
+  updateNotificationType: (value: "error" | "success") => void;
   updateNotificationTitle: (value: string) => void;
   updateNotificationMessage: (value: string) => void;
 };

tsconfig.json

@@ -23,6 +23,7 @@
       "@components/*": ["./components/*"],
       "@utils/*": ["./utils/*"],
       "@lib/*": ["./lib/*"],
+      "@context/*": ["./lib/context/*"],
       "@hooks/*": ["./lib/hooks/*"],
       "@types/*": ["./types/*"],
     }