Merge pull request #38 from zacharyLYH/zac-implement-localStorage

Zac implement local storage
zacharyLYH · Dec 3, 2023 · 23e8661 · 23e8661
2 parents 131872e + a12d8ca
commit 23e8661
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 16 deletions.
diff --git a/client-side-queries/rq-queries/code-submit.ts b/client-side-queries/rq-queries/code-submit.ts
@@ -13,19 +13,22 @@ export function getCodeSubmitCount() {
     return resp;
 }
 
-interface UsePostSubmitCountProps {
+interface UseCodeSubmissionProps {
     code: string;
     dateTime: string;
     email: string;
     challenge: string;
 }
 
-export async function postSubmitCount({
+export async function codeSubmission({
     code,
     dateTime,
     email,
     challenge,
-}: UsePostSubmitCountProps) {
+}: UseCodeSubmissionProps) {
+    if (!code || !dateTime || !email || !challenge) {
+        throw new Error("Something wasn't passed into codeSubmission.");
+    }
     const resp = await axios.post("/api/code/submit", {
         code: code,
         dateTime: dateTime,

diff --git a/components/core/code-area-actions/submit-button.tsx b/components/core/code-area-actions/submit-button.tsx
@@ -14,9 +14,10 @@ import {
     AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { useResetFeState } from "@/lib/reset-fe-state";
-import { postSubmitCount } from "@/client-side-queries/rq-queries/code-submit";
+import { codeSubmission } from "@/client-side-queries/rq-queries/code-submit";
 import useSessionStore from "@/data-store/session-store";
 import { useStepperStore } from "@/data-store/stepper-store";
+import { loadFromLocalStorage } from "@/lib/localStorage";
 
 const smallProps: ConfettiProps = {
     force: 0.6,
@@ -63,11 +64,16 @@ const SubmitButton = () => {
     const handleSubmitButtonClick = async () => {
         try {
             const dateTime = getCurrentDateTime();
-            await postSubmitCount({
+
+            const submitEmail = email ? email : loadFromLocalStorage("email");
+            const submitChallenge = challenge
+                ? challenge
+                : loadFromLocalStorage("challenge");
+            await codeSubmission({
                 code,
                 dateTime,
-                email,
-                challenge,
+                email: submitEmail,
+                challenge: submitChallenge,
             });
             setSubmitClicked(true);
         } catch (error: any) {

diff --git a/components/core/editor.tsx b/components/core/editor.tsx
@@ -10,6 +10,7 @@ import { Button } from "../ui/button";
 import StaticPrompt from "./target-image";
 import LandingPageChallengeCode from "../landing/test-challenges/challenge-code";
 import { useStepperStore } from "@/data-store/stepper-store";
+import { loadFromLocalStorage, saveToLocalStorage } from "@/lib/localStorage";
 
 const Editor = () => {
     const { code, setCode } = useSessionStore();
@@ -39,10 +40,19 @@ const Editor = () => {
         };
 
         loadAce();
+        const localStorageCode = loadFromLocalStorage("code");
+        if (code.length === 0 && localStorageCode.length > 0) {
+            setCode(localStorageCode);
+        }
     }, []);
 
     if (!AceEditor) return <GlobalLoadingUI />;
 
+    const onType = (newCode: string) => {
+        setCode(newCode);
+        saveToLocalStorage("code", code);
+    };
+
     return (
         <div className='flex h-screen flex-col'>
             <div className='flex flex-row'>
@@ -71,7 +81,7 @@ const Editor = () => {
                         theme={aceEditorTheme}
                         name='editor'
                         height='100%'
-                        onChange={(newCode: string) => setCode(newCode)}
+                        onChange={(newCode: string) => onType(newCode)}
                         fontSize={fontSize}
                         showPrintMargin={true}
                         showGutter={true}

diff --git a/components/ui/useCode/StepTwo.tsx b/components/ui/useCode/StepTwo.tsx
@@ -13,6 +13,7 @@ import { useRouter } from "next/navigation";
 import { ChallengeFormField } from "./Challenge-FormField";
 import { Loader2 } from "lucide-react";
 import { challengeEnum } from "@/data-store/challenge-store";
+import { saveToLocalStorage } from "@/lib/localStorage";
 
 const formStepTwoSchema = z.object({
     challenge: z.nativeEnum(challengeEnum, {
@@ -31,7 +32,7 @@ const formStepTwoSchema = z.object({
 });
 
 export function StepTwo() {
-    const { progress, setProgress, step, setStep, setChallenge } =
+    const { progress, setProgress, step, setStep, setChallenge, email } =
         useStepperStore();
     const { setCode } = useSessionStore();
 
@@ -47,7 +48,8 @@ export function StepTwo() {
             setCode(LandingPageCode());
             setChallenge(selection);
             setProgress(progress + progressIncrements);
-
+            saveToLocalStorage("email", email);
+            saveToLocalStorage("challenge", selection);
             router.push("/code-area");
         }
     }

diff --git a/lib/localStorage.ts b/lib/localStorage.ts
@@ -0,0 +1,26 @@
+export const saveToLocalStorage = (key: string, value: string) => {
+    try {
+        localStorage.setItem(key, value);
+    } catch (error) {
+        console.error("Error saving to localStorage", error);
+    }
+};
+
+export const loadFromLocalStorage = (key: string) => {
+    try {
+        const value = localStorage.getItem(key);
+        if (value === null) {
+            return "";
+        }
+        return value;
+    } catch (error) {
+        console.error("Error reading from localStorage", error);
+        return "";
+    }
+};
+
+export const removeItemFromLocalStorage = (key: string) => {
+    if (typeof window !== "undefined") {
+        localStorage.removeItem(key);
+    }
+};
diff --git a/lib/reset-fe-state.tsx b/lib/reset-fe-state.tsx
@@ -1,5 +1,6 @@
 import useCodeAreaStore from "@/data-store/code-area-store";
 import useSessionStore from "@/data-store/session-store";
+import { removeItemFromLocalStorage } from "./localStorage";
 
 /*
 A custom hook that resets the coding area state. Clears the code from coding area and resets certain settings.
@@ -11,5 +12,8 @@ export function useResetFeState() {
     return function performReset() {
         reset();
         codeAreaReset();
+        removeItemFromLocalStorage("email");
+        removeItemFromLocalStorage("code");
+        removeItemFromLocalStorage("challenge");
     };
 }
diff --git a/lib/validate-user.ts b/lib/validate-user.ts
@@ -2,6 +2,7 @@
     Currently, it doesn't do anything, however it allows for more scalability if there are multiple different validations neccecary to authorize a user. */
 
 import { maxProgress } from "@/data-store/stepper-store";
+import { loadFromLocalStorage } from "./localStorage";
 
 export default function validateUser(
     validationType: string,
@@ -12,13 +13,21 @@ export default function validateUser(
 ) {
     validationType = validationType.toLowerCase();
 
+    /*
+    Email is only in local storage if you went through the proper initialization steps. If a user refreshes the /code-area, their STATE gets lost, but local storage doesn't. So, if the user refreshes their page, we'll just allow the STATE to get lost, but since this user has email in local storage, we know for a fact this user got to the /code-area via the proper path. 
+    */
     if (validationType === "code") {
-        return (
-            email === "" ||
-            check === false ||
-            progress !== maxProgress ||
-            challenge === ""
-        );
+        const localStorageEmail = loadFromLocalStorage("email");
+        if (
+            (email === "" ||
+                check === false ||
+                progress !== maxProgress ||
+                challenge === "") &&
+            localStorageEmail?.length === 0
+        ) {
+            return true;
+        }
+        return false;
     } else {
         throw new Error("Invalid Validation Type");
     }