Merge pull request #1943 from tijlleenders/vin/1925/confirmation-bug

fix: ensure confirmation state persists across sessions

src/components/BottomNavbar/BottomNavbar.tsx

@@ -13,6 +13,7 @@ import GlobalAddBtn from "@components/GlobalAddBtn";
 
 import "./BottomNavbar.scss";
 import Icon from "@src/common/Icon";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 
 const BottomNavbar = ({ title }: { title: string }) => {
   const { t } = useTranslation();
@@ -34,7 +35,7 @@ const BottomNavbar = ({ title }: { title: string }) => {
       choice = 8;
     }
     const newTheme = { ...theme, [darkModeStatus ? "dark" : "light"]: choice };
-    localStorage.setItem("theme", JSON.stringify(newTheme));
+    localStorage.setItem(LocalStorageKeys.THEME, JSON.stringify(newTheme));
     setTheme({ ...newTheme });
   };
 

src/components/GoalsComponents/ShareGoalModal/AddContactModal.tsx

@@ -7,6 +7,7 @@ import { darkModeState, displayToast } from "@src/store";
 import React, { useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import ZModal from "@src/common/ZModal";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 
 interface AddContactModalProps {
   showAddContactModal: boolean;
@@ -30,9 +31,9 @@ const AddContactModal: React.FC<AddContactModalProps> = ({ showAddContactModal }
           const { relId } = res.response;
           await addContact(newContact?.contactName, relId, "sender");
           setNewContact({ ...newContact, relId });
-          const defaultPartner = localStorage.getItem("defaultPartner");
+          const defaultPartner = localStorage.getItem(LocalStorageKeys.DEFAULT_PARTNER);
           if (!defaultPartner) {
-            localStorage.setItem("defaultPartner", relId);
+            localStorage.setItem(LocalStorageKeys.DEFAULT_PARTNER, relId);
           }
           link = `${window.location.origin}/invite/${res.response.relId}`;
         } else {

src/components/Header/HeaderBtn.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { displayToast, darkModeState } from "@src/store";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useSetRecoilState, useRecoilState } from "recoil";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 import Settings from "./Settings";
 
 const HeaderBtn = ({ path, alt }: { path: string; alt: string }) => {
@@ -16,10 +17,10 @@ const HeaderBtn = ({ path, alt }: { path: string; alt: string }) => {
     } else if (alt === "zinzen search") {
       navigate("/MyGoals", { state: { ...state, displaySearch: true } });
     } else if (alt === "light mode") {
-      localStorage.setItem("darkMode", darkModeStatus ? "off" : "on");
+      localStorage.setItem(LocalStorageKeys.DARK_MODE, darkModeStatus ? "off" : "on");
       setDarkModeStatus(!darkModeStatus);
     } else if (alt === "dark mode") {
-      localStorage.setItem("darkMode", darkModeStatus ? "off" : "on");
+      localStorage.setItem(LocalStorageKeys.DARK_MODE, darkModeStatus ? "off" : "on");
       setDarkModeStatus(!darkModeStatus);
     }
   };

src/components/Header/Settings.tsx

@@ -8,6 +8,7 @@ import verticalDots from "@assets/images/verticalDots.svg";
 import { darkModeState } from "@src/store";
 import { themeState } from "@src/store/ThemeState";
 import useGlobalStore from "@src/hooks/useGlobalStore";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 
 const Settings = () => {
   const { t } = useTranslation();
@@ -21,7 +22,7 @@ const Settings = () => {
   const dropdownOptions = [t("donate"), t("feedback"), t("blog"), t("backup"), t("changeLanguage"), t("changeTheme")];
 
   const toggleDarkModeStatus = () => {
-    localStorage.setItem("darkMode", darkModeStatus ? "off" : "on");
+    localStorage.setItem(LocalStorageKeys.DARK_MODE, darkModeStatus ? "off" : "on");
     setDarkModeStatus(!darkModeStatus);
   };
 

src/components/HeaderDashboard/LandingHeader.tsx

@@ -13,6 +13,7 @@ import { displaySidebar } from "@src/store/SidebarState";
 
 import "@translations/i18n";
 import "./HeaderDashboard.scss";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 
 export const LandingHeader = ({ avatar }: { avatar: string | null }) => {
   const navigate = useNavigate();
@@ -28,10 +29,10 @@ export const LandingHeader = ({ avatar }: { avatar: string | null }) => {
           alt="Back arrow"
           id="main-header-homeLogo"
           onClick={() => {
-            if (localStorage.getItem("checkedIn") !== "yes") {
-              localStorage.setItem("checkedIn", "yes");
-              const invite = localStorage.getItem("pendingInvite");
-              localStorage.removeItem("pendingInvite");
+            if (localStorage.getItem(LocalStorageKeys.CHECKED_IN) !== "yes") {
+              localStorage.setItem(LocalStorageKeys.CHECKED_IN, "yes");
+              const invite = localStorage.getItem(LocalStorageKeys.PENDING_INVITE);
+              localStorage.removeItem(LocalStorageKeys.PENDING_INVITE);
               if (invite && invite !== "none") {
                 navigate(`/invite/${invite}`);
               } else {

src/components/LanguageChoice/LanguagesList.tsx

@@ -4,6 +4,7 @@ import { useSetRecoilState } from "recoil";
 import { ILanguageListProps, ILanguage } from "@src/Interfaces/ILanguage";
 import { vibrateWorks } from "@src/constants/vibrateCheck";
 import { languageSelectionState } from "@src/store";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 import { useLanguageSelection } from "../../hooks/useLanguageSelection";
 
 export const LanguagesList = ({ languages, navigationCallback, type, hideSelected }: ILanguageListProps) => {
@@ -16,7 +17,7 @@ export const LanguagesList = ({ languages, navigationCallback, type, hideSelecte
     }
     setIsLanguageChosen(langId);
     i18n.changeLanguage(langId);
-    localStorage.setItem("language", JSON.stringify(langId));
+    localStorage.setItem(LocalStorageKeys.LANGUAGE, langId);
     if (type === "fragment" && navigationCallback) navigationCallback("/ZinZenFAQ");
     else window.history.back();
   };

src/constants/localStorageKeys.ts

@@ -0,0 +1,15 @@
+/* eslint-disable no-shadow */
+
+export enum LocalStorageKeys {
+  THEME = "theme",
+  DEFAULT_PARTNER = "defaultPartner",
+  DARK_MODE = "darkMode",
+  CHECKED_IN = "checkedIn",
+  LANGUAGE = "language",
+  INSTALL_ID = "installId",
+  CONFIRMATION_STATE = "confirmationState",
+  LAST_REFRESH = "lastRefresh",
+  DEXIE_VERSION = "dexieVersion",
+  PENDING_INVITE = "pendingInvite",
+  LAST_PROCESSED_TIMESTAMP = "lastProcessedTimestamp",
+}

src/hooks/useApp.tsx

@@ -13,9 +13,10 @@ import { getContactSharedGoals, shareGoalWithContact } from "@src/services/conta
 import { updateAllUnacceptedContacts, getContactByRelId, clearTheQueue } from "@src/api/ContactsAPI";
 import { useSetRecoilState, useRecoilValue, useRecoilState } from "recoil";
 import { scheduledHintCalls } from "@src/api/HintsAPI/ScheduledHintCall";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 import { checkAndCleanupTrash } from "@src/api/TrashAPI";
 
-const langFromStorage = localStorage.getItem("language")?.slice(1, -1);
+const langFromStorage = localStorage.getItem(LocalStorageKeys.LANGUAGE)?.slice(1, -1);
 const exceptionRoutes = ["/", "/invest", "/feedback", "/donate"];
 
 function useApp() {
@@ -115,11 +116,11 @@ function useApp() {
         });
       }
     };
-    const installId = localStorage.getItem("installId");
+    const installId = localStorage.getItem(LocalStorageKeys.INSTALL_ID);
     if (!installId) {
-      localStorage.setItem("installId", uuidv4());
-      localStorage.setItem("darkMode", "on");
-      localStorage.setItem("theme", JSON.stringify(getTheme()));
+      localStorage.setItem(LocalStorageKeys.INSTALL_ID, uuidv4());
+      localStorage.setItem(LocalStorageKeys.CHECKED_IN, "on");
+      localStorage.setItem(LocalStorageKeys.THEME, JSON.stringify(getTheme()));
     } else {
       init();
     }
@@ -130,7 +131,7 @@ function useApp() {
   }, [langFromStorage]);
 
   useEffect(() => {
-    localStorage.setItem("confirmationState", JSON.stringify(confirmationState));
+    localStorage.setItem(LocalStorageKeys.CONFIRMATION_STATE, JSON.stringify(confirmationState));
   }, [confirmationState]);
 
   // Check for missed hint calls
@@ -172,11 +173,11 @@ function useApp() {
   }, []);
 
   useEffect(() => {
-    const lastRefresh = localStorage.getItem("lastRefresh");
+    const lastRefresh = localStorage.getItem(LocalStorageKeys.LAST_REFRESH);
     const today = new Date().toLocaleDateString();
     if (lastRefresh !== today) {
       refreshTaskCollection().then(() => {
-        localStorage.setItem("lastRefresh", today);
+        localStorage.setItem(LocalStorageKeys.LAST_REFRESH, today);
         setLastAction("TaskCollectionRefreshed");
       });
     }

src/models/db.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-param-reassign */
 import Dexie, { Table } from "dexie";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 import { IFeelingItem } from "./FeelingItem";
 import { GoalItem } from "./GoalItem";
 import ContactItem from "./ContactItem";
@@ -14,8 +15,8 @@ import { dbStoreSchema, syncVersion } from "./dexie";
 
 export const dexieVersion = 21;
 
-const currentVersion = Number(localStorage.getItem("dexieVersion") || dexieVersion);
-localStorage.setItem("dexieVersion", `${dexieVersion}`);
+const currentVersion = Number(localStorage.getItem(LocalStorageKeys.DEXIE_VERSION) || dexieVersion);
+localStorage.setItem(LocalStorageKeys.DEXIE_VERSION, `${dexieVersion}`);
 
 export class ZinZenDB extends Dexie {
   feelingsCollection!: Table<IFeelingItem, number>;

src/pages/FAQPage/FAQPage.tsx

@@ -12,6 +12,7 @@ import { useKeyPress } from "@src/hooks/useKeyPress";
 
 import "./FAQPage.scss";
 import "@translations/i18n";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 
 export const FAQPage = () => {
   const darkModeStatus = useRecoilValue(darkModeState);
@@ -27,9 +28,9 @@ export const FAQPage = () => {
   const enterPressed = useKeyPress("Enter");
 
   const handleClick = () => {
-    localStorage.setItem("checkedIn", "yes");
-    const invite = localStorage.getItem("pendingInvite");
-    localStorage.removeItem("pendingInvite");
+    localStorage.setItem(LocalStorageKeys.CHECKED_IN, "yes");
+    const invite = localStorage.getItem(LocalStorageKeys.PENDING_INVITE);
+    localStorage.removeItem(LocalStorageKeys.PENDING_INVITE);
     vibrateWorks ? navigator.vibrate(100) : null;
     if (invite && invite !== "none") {
       navigate(`/invite/${invite}`);
@@ -71,8 +72,7 @@ export const FAQPage = () => {
             ),
           }))}
         />
-        <button className="action-btn" type="button" onClick={handleClick}>
-          {" "}
+        <button className="action-btn" type="button" tabIndex={0} onKeyDown={handleClick} onClick={handleClick}>
           {t("continue")} <img className="chevronRight theme-icon" src={chevronLeftIcon} alt="zinzen faq" />
         </button>
       </div>

src/pages/InvitePage/InvitePage.tsx

@@ -7,6 +7,7 @@ import { addContact, getAllContacts } from "@src/api/ContactsAPI";
 import { acceptRelationship } from "@src/services/contact.service";
 import OnboardingLayout from "@src/layouts/OnboardingLayout";
 import { displayPartnerModeTour } from "@src/store/TourState";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 
 const InvitePage = () => {
   const navigate = useNavigate();
@@ -41,12 +42,12 @@ const InvitePage = () => {
   };
 
   useEffect(() => {
-    const checkin = localStorage.getItem("checkedIn");
+    const checkin = localStorage.getItem(LocalStorageKeys.CHECKED_IN);
     if (!checkin) {
-      localStorage.setItem("checkedIn", "no");
+      localStorage.setItem(LocalStorageKeys.CHECKED_IN, "no");
     }
     if (checkin !== "yes") {
-      localStorage.setItem("pendingInvite", window.location.href.split("invite/")[1]);
+      localStorage.setItem(LocalStorageKeys.PENDING_INVITE, window.location.href.split("invite/")[1]);
       navigate("/");
     }
   }, []);

src/react-app-env.t.ts

@@ -1,2 +1,6 @@
 // <reference types="react-scripts" />
 declare module "*.mp3";
+declare module "*.svg";
+declare module "*.png";
+declare module "*.jpeg";
+declare module "*.jpg";

src/services/contact.service.ts

@@ -1,3 +1,4 @@
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 import { GoalItem, IParticipant } from "@src/models/GoalItem";
 import { typeOfChange } from "@src/models/InboxItem";
 import { createContactRequest, getInstallId } from "@src/utils";
@@ -43,14 +44,16 @@ export const collaborateWithContact = async (relId: string, goal: GoalItem) => {
 };
 
 export const getContactSharedGoals = async () => {
-  const lastProcessedTimestamp = new Date(Number(localStorage.getItem("lastProcessedTimestamp"))).toISOString();
+  const lastProcessedTimestamp = new Date(
+    Number(localStorage.getItem(LocalStorageKeys.LAST_PROCESSED_TIMESTAMP)),
+  ).toISOString();
   const url = "https://x7phxjeuwd4aqpgbde6f74s4ey0yobfi.lambda-url.eu-west-1.on.aws/";
   const res = await createContactRequest(url, {
     method: "getMessages",
     installId: getInstallId(),
     ...(lastProcessedTimestamp ? { lastProcessedTimestamp } : {}),
   });
-  localStorage.setItem("lastProcessedTimestamp", `${Date.now()}`);
+  localStorage.setItem(LocalStorageKeys.LAST_PROCESSED_TIMESTAMP, `${Date.now()}`);
   return res;
 };
 

src/store/DarkModeState.ts

@@ -1,7 +1,8 @@
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 import { atom } from "recoil";
 
 export const getDarkModeValue = () => {
-  const mode = localStorage.getItem("darkMode");
+  const mode = localStorage.getItem(LocalStorageKeys.DARK_MODE);
   if (mode && (mode === "on" || mode === "off")) {
     return mode;
   }

src/store/LanguageSelectionState.ts

@@ -1,6 +1,9 @@
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 import { atom } from "recoil";
 
 export const languageSelectionState = atom({
   key: "keyModalState",
-  default: localStorage.getItem("language") ? localStorage.getItem("language") : "No language chosen.",
+  default: localStorage.getItem(LocalStorageKeys.LANGUAGE)
+    ? localStorage.getItem(LocalStorageKeys.LANGUAGE)
+    : "No language chosen.",
 });

src/store/ThemeState.ts

@@ -1,7 +1,8 @@
 import { atom } from "recoil";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 
 export const getTheme = () => {
-  const x = localStorage.getItem("theme");
+  const x = localStorage.getItem(LocalStorageKeys.THEME);
   if (x && x.search(/^\{"light":\d,"dark":\d\}$/i) === 0) {
     return JSON.parse(x);
   }

src/store/index.ts

@@ -2,6 +2,7 @@ import { atom } from "recoil";
 import { confirmActionState } from "@src/Interfaces/IPopupModals";
 import ContactItem from "@src/models/ContactItem";
 import { isJSONParsable } from "@src/utils/patterns";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 import { darkModeState } from "./DarkModeState";
 import { languageSelectionState } from "./LanguageSelectionState";
 
@@ -25,9 +26,9 @@ const defaultConfirmationObj: confirmActionState = {
   },
 };
 
-if (isJSONParsable(localStorage.getItem("confirmationState"))) {
+if (isJSONParsable(localStorage.getItem(LocalStorageKeys.CONFIRMATION_STATE))) {
   // @ts-ignore
-  const savedConfirmationState = JSON.parse(localStorage.getItem("confirmationService"));
+  const savedConfirmationState = JSON.parse(localStorage.getItem(LocalStorageKeys.CONFIRMATION_STATE));
   defaultConfirmationObj.goal = { ...defaultConfirmationObj.goal, ...(savedConfirmationState?.goal || {}) };
   defaultConfirmationObj.collaboration = {
     ...defaultConfirmationObj.collaboration,

src/utils/index.ts

@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import { GoalItem } from "@src/models/GoalItem";
 import { languagesFullForms } from "@src/translations/i18n";
 import i18next from "i18next";
+import { LocalStorageKeys } from "@src/constants/localStorageKeys";
 
 export async function createContactRequest(url: string, body: object | null = null, method = "POST") {
   try {
@@ -129,11 +130,11 @@ export function inheritParentProps(newGoal: GoalItem, parentGoal: GoalItem) {
 export const convertNumberToHr = (hr: number) => `${hr > 9 ? "" : "0"}${hr} : 00`;
 
 export function getInstallId() {
-  return localStorage.getItem("installId");
+  return localStorage.getItem(LocalStorageKeys.INSTALL_ID);
 }
 
 export function getSelectedLanguage() {
-  const langFromStorage = localStorage.getItem("language")?.slice(1, -1);
+  const langFromStorage = localStorage.getItem(LocalStorageKeys.LANGUAGE)?.slice(1, -1);
   const lang = langFromStorage ? languagesFullForms[langFromStorage] : languagesFullForms.en;
   return lang;
 }