Merge pull request #77 from green-ecolution/feature/change-cookie-to-…

…local-storage feat: change cookie to localStorage
green-ecolution · Jul 30, 2024 · d1b889b · d1b889b
2 parents c0f8589 + ffa8852
commit d1b889b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 39 deletions.
diff --git a/src/tsx/components/cards/WelcomeCard.tsx b/src/tsx/components/cards/WelcomeCard.tsx
@@ -3,7 +3,7 @@ import Arrow from '../../icons/Arrow';
 import Lottie from 'lottie-react';
 import logoAnimation from '../../../json/logoAnimation.json';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
-import { hasCookie } from '../../helper/cookies';
+import { isInitialLoad } from '../../helper/storage';
 
 interface WelcomeCardProps {
     onClose: () => void;
@@ -29,7 +29,7 @@ const WelcomeCard: React.FC<WelcomeCardProps> = ({ onClose, handleStartAnmiation
     };
 
     useEffect(() => {
-        if (! hasCookie('green_ecolution_initial_load') && isOverlayVisible) {
+        if (isInitialLoad() && isOverlayVisible) {
             const timer = setTimeout(() => { setIsVisible(true) }, delay + 200);
             return () => clearTimeout(timer);
         }

diff --git a/src/tsx/components/homepage/HomepageHero.tsx b/src/tsx/components/homepage/HomepageHero.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import Arrow from "../../icons/Arrow";
 import HomepageOverlay from "./HomepageOverlay";
 import HomepageHeroTrees from "./HomepageHeroTrees";
-import { setCookie, hasCookie } from "../../helper/cookies";
+import { setInitialLoad as setInitialLoadHelper, isInitialLoad as isInitialLoadHelper } from "../../helper/storage";
 
 function HomepageHero() {
     const [isOverlayVisible, setIsOverlayVisible] = useState(false);
@@ -14,7 +14,7 @@ function HomepageHero() {
 
         if (isInitialLoad) {
             setIsInitialLoad(false);
-            setCookie('green_ecolution_initial_load');
+            setInitialLoadHelper();
         }
     };
 
@@ -41,8 +41,8 @@ function HomepageHero() {
     }, [isOverlayVisible]);
 
     useEffect(() => {
-        if (! hasCookie('green_ecolution_initial_load')
-                && ! isOverlayVisible
+        if (isInitialLoadHelper()
+                && !isOverlayVisible
                 && window.matchMedia('(min-width: 1280px)').matches
             ) {
             setIsInitialLoad(true);
@@ -76,7 +76,7 @@ function HomepageHero() {
                         </p>
                         <button
                             className={`hidden items-center justify-center gap-x-4 rounded-2xl w-max font-semibold px-5 py-2 group bg-green-light-900 transition-color ease-in-out duration-300 text-white hover:bg-green-middle-900 hover:border-green-middle-900
-                                ${hasCookie('green_ecolution_initial_load') ? 'xl:flex' : '' }`}
+                                ${!isInitialLoadHelper() ? 'xl:flex' : '' }`}
                             onClick={handleOpenOverlay}
                         >
                             Animation abspielen

diff --git a/src/tsx/helper/cookies.ts b/src/tsx/helper/cookies.ts
diff --git a/src/tsx/helper/storage.ts b/src/tsx/helper/storage.ts
@@ -0,0 +1,7 @@
+export function setInitialLoad() {
+    localStorage.setItem("green_ecolution_initial_load", "false");
+}
+
+export function isInitialLoad(): boolean {
+    return localStorage.getItem("green_ecolution_initial_load") !== "false";
+}