Merge pull request #46 from 4lysson-a/dev

Merge develop into main
4lysson-a · Aug 27, 2024 · 89a678c · 89a678c
2 parents a0632dd + e0aaacd
commit 89a678c
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 85 deletions.
diff --git a/frontend/.env.dist b/frontend/.env.dist
@@ -4,6 +4,8 @@ VITE_PARSE_JAVASCRIPT_KEY=
 
 VITE_PARSE_HOST_URL=https://parseapi.back4app.com/
 
+VITE_CLIENT_URL=
+
 VITE_PHONE_NUMBER=
 
 VITE_CLARITY_ID=
diff --git a/frontend/src/components/shared/Loading/Logo/index.jsx b/frontend/src/components/shared/Loading/Logo/index.jsx
@@ -1,35 +1,32 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Rive from "@rive-app/react-canvas";
+import { LocalStorage } from "@/helpers/LocalStorage";
 
 export default function LogoLoading() {
-  const localStorageExit = JSON.parse(localStorage.getItem("exit"));
-  const isExitValid =
-    localStorageExit && localStorageExit.expire > new Date().getTime();
+    const localExit = LocalStorage.get("initial_loading");
+    const isExitValid = localExit && localExit.expire > new Date().getTime();
 
-  const [exit, setExit] = React.useState(isExitValid);
+    const [exit, setExit] = React.useState(isExitValid);
 
-  React.useEffect(() => {
-    setTimeout(() => {
-      setExit(true);
-      localStorage.setItem(
-        "exit",
-        JSON.stringify({
-          exit: true,
-          expire: new Date().getTime() + 1000 * 60 * 60 * 24,
-        })
-      );
-    }, 5000);
-  }, []);
+    React.useEffect(() => {
+        setTimeout(() => {
+            setExit(true);
+            LocalStorage.set("initial_loading", {
+                exit: true,
+                expire: new Date().getTime() + 1000 * 60 * 60 * 24
+            });
+        }, 5000);
+    }, []);
 
-  if (exit) {
-    return null;
-  }
+    if (exit) {
+        return null;
+    }
 
-  return ReactDOM.createPortal(
-    <div className="h-screen w-full z-50 fixed top-0 left-0 flex items-center justify-center bg-background">
-      <Rive src="/rive/visualizaai.riv" />
-    </div>,
-    document.getElementById("loading")
-  );
-}
+    return ReactDOM.createPortal(
+        <div className="h-screen w-full !z-[999999999999] fixed top-0 left-0 flex items-center justify-center bg-background">
+            <Rive src="/rive/visualizaai.riv" />
+        </div>,
+        document.getElementById("loading")
+    );
+}
diff --git a/frontend/src/components/shared/Loading/index.jsx b/frontend/src/components/shared/Loading/index.jsx
@@ -1,16 +1,17 @@
-import React from 'react';
-import Lottie from 'lottie-react';
+import React from "react";
+import Lottie from "lottie-react";
 
-import loadingDark from '@/assets/animations/loading-dark.json';
-import loadingLight from '@/assets/animations/loading-light.json';
+import loadingDark from "@/assets/animations/loading-dark.json";
+import loadingLight from "@/assets/animations/loading-light.json";
+import { LocalStorage } from "@/helpers/LocalStorage";
 
 export default function Loading() {
-	const theme = localStorage.getItem('theme');
-	const animate = theme === 'dark' ? loadingDark : loadingLight;
+    const theme = LocalStorage.get("theme");
+    const animate = theme === "dark" ? loadingDark : loadingLight;
 
-	return (
-		<div className='flex flex-col h-full justify-center items-center'>
-			<Lottie animationData={animate} />
-		</div>
-	);
+    return (
+        <div className="flex flex-col h-full justify-center items-center">
+            <Lottie animationData={animate} />
+        </div>
+    );
 }
diff --git a/frontend/src/helpers/LocalStorage.js b/frontend/src/helpers/LocalStorage.js
@@ -0,0 +1,22 @@
+export class LocalStorage {
+    static set(key, value) {
+        localStorage.setItem(key, JSON.stringify(value));
+    }
+
+    static get(key) {
+        return JSON.parse(localStorage.getItem(key));
+    }
+
+    static remove(key) {
+        localStorage.removeItem(key);
+    }
+
+    static logout() {
+        const keys = Object.keys(localStorage);
+        keys.forEach(key => {
+            if (key !== "version" && key !== "initial_loading") {
+                localStorage.removeItem(key);
+            }
+        });
+    }
+}
diff --git a/frontend/src/hooks/useChangeTheme.js b/frontend/src/hooks/useChangeTheme.js
@@ -1,19 +1,19 @@
 import React from "react";
 
+import { LocalStorage } from "@/helpers/LocalStorage";
+
 const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
 
 export default function useChangeTheme() {
-  React.useEffect(() => {
-    prefersDarkScheme.addEventListener('change', () => {
-      if (prefersDarkScheme.matches) {
-        localStorage.setItem('theme', 'dark');
-      }
-
-      else {
-        localStorage.setItem('theme', 'light');
-      }
-    });
-  }, [])
+    React.useEffect(() => {
+        prefersDarkScheme.addEventListener("change", () => {
+            if (prefersDarkScheme.matches) {
+                LocalStorage.set("theme", "dark");
+            } else {
+                LocalStorage.set("theme", "light");
+            }
+        });
+    }, []);
 
-  return prefersDarkScheme;
-}
+    return prefersDarkScheme;
+}
diff --git a/frontend/src/hooks/useValidateNewVersion.js b/frontend/src/hooks/useValidateNewVersion.js
@@ -1,13 +1,15 @@
+import { LocalStorage } from "@/helpers/LocalStorage";
+
 const owner = "4lysson-a";
 const repo = "visualizaai";
 
 const url = `https://api.github.com/repos/${owner}/${repo}/releases/latest`;
 
 export default function useValidateNewVersion() {
-    const lastCheckDate = localStorage.getItem("lastCheckDate");
+    const version = LocalStorage.get("version");
     const today = new Date().toISOString().split("T")[0];
 
-    if (lastCheckDate === today) {
+    if (version?.exp === today) {
         return;
     }
 
@@ -19,12 +21,14 @@ export default function useValidateNewVersion() {
             return response.json();
         })
         .then(data => {
-            const currentVersion = localStorage.getItem("latestVersion");
+            const currentVersion = LocalStorage.get("version");
             if (currentVersion === data.tag_name) return;
 
             const tag = data.tag_name;
-            localStorage.setItem("latestVersion", tag);
-            localStorage.setItem("lastCheckDate", today); // Update the last check date
+            LocalStorage.set("version", {
+                tag,
+                exp: today
+            });
             window.location.href = "/blog";
         })
         .catch(error => {

diff --git a/frontend/src/pages/Auth/Signup/index.jsx b/frontend/src/pages/Auth/Signup/index.jsx
@@ -2,39 +2,36 @@ import React from "react";
 
 import StepViewer from "./StepViewer";
 
-import {
-  Finish,
-  CreateAccount,
-  CreateCompany,
-} from "./Steps";
+import { Finish, CreateAccount, CreateCompany } from "./Steps";
+import { LocalStorage } from "@/helpers/LocalStorage";
 
 function StepChoise({ steps, setSteps }) {
-  switch (steps.current) {
-    case 1:
-      return <CreateAccount setSteps={setSteps} />;
-    case 2:
-      return <CreateCompany steps={steps} setSteps={setSteps} />;
-    case 3:
-      return <Finish />;
-    default:
-      return <></>;
-  }
+    switch (steps.current) {
+        case 1:
+            return <CreateAccount setSteps={setSteps} />;
+        case 2:
+            return <CreateCompany steps={steps} setSteps={setSteps} />;
+        case 3:
+            return <Finish />;
+        default:
+            return <></>;
+    }
 }
 
 export default function Signup() {
-  React.useEffect(() => {
-    localStorage.clear();
-  }, []);
+    React.useEffect(() => {
+        LocalStorage.logout();
+    }, []);
 
-  const [steps, setSteps] = React.useState({
-    current: 1,
-    total: 3,
-  });
+    const [steps, setSteps] = React.useState({
+        current: 1,
+        total: 3
+    });
 
-  return (
-    <>
-      <StepChoise setSteps={setSteps} steps={steps} />
-      <StepViewer steps={steps} />
-    </>
-  );
+    return (
+        <>
+            <StepChoise setSteps={setSteps} steps={steps} />
+            <StepViewer steps={steps} />
+        </>
+    );
 }
diff --git a/frontend/src/pages/Blog/common/index.jsx b/frontend/src/pages/Blog/common/index.jsx
@@ -17,7 +17,7 @@ export const Link = ({ href, children }) => (
 );
 
 export const Frame = ({ ...rest }) => (
-    <div className="border-4 border-card rounded-xl shadow-lg overflow-hidden">{rest.children}</div>
+    <div className="border-4 border-card rounded-xl shadow-lg overflow-hidden w-fit">{rest.children}</div>
 );
 
 export const Separator = () => <hr className="border-gray-300 py-10" />;
diff --git a/frontend/src/pages/Dash/User/index.jsx b/frontend/src/pages/Dash/User/index.jsx
@@ -7,9 +7,10 @@ import ManageMySubscription from "./Options/ManageSubscription";
 import { subscriptionsEnum } from "@/utils/subscriptions";
 import ManageTestPeriod from "./Options/ManageTestPeriod";
 import CallWhatsapp from "./Options/CallWhatsapp";
+import { LocalStorage } from "@/helpers/LocalStorage";
 
 function handleExit() {
-  localStorage.clear();
+  LocalStorage.logout();
   window.location.reload();
 }