From eb0d838557d6fcdbd6b9be7941e97dc5f7fc95de Mon Sep 17 00:00:00 2001 From: 4lysson-a <4ly.alcantara@gmail.com> Date: Tue, 27 Aug 2024 19:16:12 -0300 Subject: [PATCH 1/2] chore: Update image and frame styling in Blog page --- frontend/.env.dist | 2 ++ frontend/src/pages/Blog/common/index.jsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/.env.dist b/frontend/.env.dist index 00a4db6..f718934 100644 --- 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/pages/Blog/common/index.jsx b/frontend/src/pages/Blog/common/index.jsx index afaf485..293625b 100644 --- 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 }) => ( -
{rest.children}
+
{rest.children}
); export const Separator = () =>
; From e0aaacd35b31a50aabba092165acaa00fef26e4b Mon Sep 17 00:00:00 2001 From: 4lysson-a <4ly.alcantara@gmail.com> Date: Tue, 27 Aug 2024 19:56:01 -0300 Subject: [PATCH 2/2] chore: Refactor code to use LocalStorage helper class for clearing and setting values --- .../components/shared/Loading/Logo/index.jsx | 49 ++++++++--------- .../src/components/shared/Loading/index.jsx | 23 ++++---- frontend/src/helpers/LocalStorage.js | 22 ++++++++ frontend/src/hooks/useChangeTheme.js | 26 ++++----- frontend/src/hooks/useValidateNewVersion.js | 14 +++-- frontend/src/pages/Auth/Signup/index.jsx | 53 +++++++++---------- frontend/src/pages/Dash/User/index.jsx | 3 +- 7 files changed, 106 insertions(+), 84 deletions(-) create mode 100644 frontend/src/helpers/LocalStorage.js diff --git a/frontend/src/components/shared/Loading/Logo/index.jsx b/frontend/src/components/shared/Loading/Logo/index.jsx index f3df006..b73394e 100644 --- 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( -
- -
, - document.getElementById("loading") - ); -} \ No newline at end of file + return ReactDOM.createPortal( +
+ +
, + document.getElementById("loading") + ); +} diff --git a/frontend/src/components/shared/Loading/index.jsx b/frontend/src/components/shared/Loading/index.jsx index 76590a5..468c586 100644 --- 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 ( -
- -
- ); + return ( +
+ +
+ ); } diff --git a/frontend/src/helpers/LocalStorage.js b/frontend/src/helpers/LocalStorage.js new file mode 100644 index 0000000..2accb05 --- /dev/null +++ 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 index 6ceb9be..5d8982f 100644 --- 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; -} \ No newline at end of file + return prefersDarkScheme; +} diff --git a/frontend/src/hooks/useValidateNewVersion.js b/frontend/src/hooks/useValidateNewVersion.js index bd055f4..8d0574b 100644 --- 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://github.com/gitapi/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 index 5422062..8a87f8f 100644 --- 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 ; - case 2: - return ; - case 3: - return ; - default: - return <>; - } + switch (steps.current) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + 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 ( - <> - - - - ); + return ( + <> + + + + ); } diff --git a/frontend/src/pages/Dash/User/index.jsx b/frontend/src/pages/Dash/User/index.jsx index 7f794a9..ce16dfd 100644 --- 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(); }