Merge pull request #2732 from daostack/CW-hotfix-firebase-firestore-settings

[Hotfix] Firebase settings

Author: MeyerPV

src/shared/constants/featureFlags.ts

@@ -3,6 +3,7 @@ export enum FeatureFlags {
   AiBot = "AiBot",
   AiBotPro = "AiBotPro",
   UpdateRoles = "UpdateRoles",
+  HavingAnIssue = "HavingAnIssue"
 }
 
 export enum FeatureFlagVisibility {

src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.tsx

@@ -1,18 +1,22 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { useDispatch } from "react-redux";
 import { useLocation } from "react-router";
 import classNames from "classnames";
 import { Menu } from "@headlessui/react";
 import { logOut } from "@/pages/Auth/store/actions";
+import { FeatureFlags } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
+import { useFeatureFlag } from "@/shared/hooks/useFeatureFlag";
 import {
   Avatar3Icon,
   BillingIcon,
   LogoutIcon,
   NotificationsIcon,
 } from "@/shared/icons";
+import ReportIcon from "@/shared/icons/report.icon";
 import ThemeIcon from "@/shared/icons/theme.icon";
 import { toggleTheme } from "@/shared/store/actions";
+import { clearFirestoreCache } from "@/shared/utils/firebase";
 import { MenuItem } from "./components";
 import { Item, ItemType } from "./types";
 import styles from "./MenuItems.module.scss";
@@ -43,6 +47,9 @@ const MenuItems: FC<MenuItemsProps> = (props) => {
   const { pathname } = useLocation();
   const isV04 = pathname.includes("-v04");
 
+  const featureFlags = useFeatureFlag();
+  const isHavingAnIssueEnabled = featureFlags?.get(FeatureFlags.HavingAnIssue);
+
   const toggleThemeMenuItem = {
     key: "theme",
     type: ItemType.Button,
@@ -53,36 +60,53 @@ const MenuItems: FC<MenuItemsProps> = (props) => {
     },
   };
 
-  const items: Item[] = [
-    {
-      key: "my-profile",
-      text: "My profile",
-      icon: <Avatar3Icon />,
-      to: getProfilePagePath(),
-    },
-    {
-      key: "settings",
-      text: "Notifications",
-      icon: <NotificationsIcon />,
-      to: getSettingsPagePath(),
-    },
-    {
-      key: "billing",
-      text: "Billing",
-      icon: <BillingIcon />,
-      to: getBillingPagePath(),
-    },
-    ...insertIf(!isV04, toggleThemeMenuItem),
-    {
-      key: "log-out",
-      type: ItemType.Button,
-      text: "Log out",
-      icon: <LogoutIcon />,
-      onClick: () => {
-        dispatch(logOut());
+  const items: Item[] = useMemo(() => {
+    const menuItems = [
+      {
+        key: "my-profile",
+        text: "My profile",
+        icon: <Avatar3Icon />,
+        type: ItemType.Button,
+        to: getProfilePagePath(),
       },
-    },
-  ];
+      {
+        key: "settings",
+        text: "Notifications",
+        icon: <NotificationsIcon />,
+        to: getSettingsPagePath(),
+      },
+      {
+        key: "billing",
+        text: "Billing",
+        icon: <BillingIcon />,
+        to: getBillingPagePath(),
+      },
+      ...insertIf(!isV04, toggleThemeMenuItem),
+      {
+        key: "log-out",
+        type: ItemType.Button,
+        text: "Log out",
+        icon: <LogoutIcon />,
+        onClick: () => {
+          dispatch(logOut());
+        },
+      },
+    ];
+
+    if (isHavingAnIssueEnabled) {
+      menuItems.push({
+        key: "issue",
+        text: "Having an issue?",
+        icon: <ReportIcon />,
+        type: ItemType.Button,
+        onClick: () => {
+          clearFirestoreCache();
+        },
+      });
+    }
+
+    return menuItems;
+  }, [isHavingAnIssueEnabled, isV04, toggleThemeMenuItem]);
 
   return (
     <Menu.Items as={React.Fragment}>

src/shared/utils/firebase.tsx

@@ -9,12 +9,80 @@ import { local } from "@/config";
 import { Environment, REACT_APP_ENV } from "@/shared/constants";
 import config from "../../config";
 
+const CACHE_SIZE_LIMIT = 104857600; // 100 MB
+
 interface FirebaseError extends Error {
   code: string;
 }
 
 const app = firebase.initializeApp(config.firebase);
+let db = firebase.firestore();
+
+enableUnlimitedCachePersistence();
+// Function to handle Firestore persistence errors
+function handlePersistenceError(err: any) {
+  if (err.code === "failed-precondition") {
+    console.log("Multiple tabs open or other conflict.");
+  } else if (err.code === "unimplemented") {
+    console.log("Persistence is not supported in this browser.");
+  } else if (err.name === "QuotaExceededError") {
+    console.log("Storage quota exceeded. Consider clearing cache.");
+    clearFirestoreCache();
+  } else {
+    console.error("Error enabling persistence:", err);
+  }
+}
+
+function reinitializeFirestoreWithPersistence() {
+  db = firebase.firestore(); // Reinitialize Firestore instance
+  const settings = { cacheSizeBytes: CACHE_SIZE_LIMIT };
+  db.settings(settings);
+
+  db.enablePersistence({ synchronizeTabs: true })
+    .then(() => {
+      console.log("Persistence re-enabled.");
+      return;
+    })
+    .catch(handlePersistenceError);
+}
+
+// Function to clear Firestore cache and re-enable persistence
+export function clearFirestoreCache() {
+  db.terminate()
+    .then(() => {
+      console.log("Firestore instance terminated.");
+      return db.clearPersistence(); // Safe to clear persistence now
+    })
+    .then(() => {
+      console.log("Persistence cleared. Waiting before reinitializing...");
+      return new Promise((resolve) => setTimeout(resolve, 2000)); // Wait 2 second
+    })
+    .then(() => {
+      console.log("Cache cleared successfully.");
+      reinitializeFirestoreWithPersistence(); // Reinitialize Firestore
+      window.location.reload();
+      return;
+    })
+    .catch((err) => {
+      if (err.code === "failed-precondition") {
+        console.log("Cannot clear persistence: Firestore is still running.");
+      } else {
+        console.error("Error clearing persistence cache:", err);
+      }
+    });
+}
+
+// Enable Firestore persistence with unlimited cache size and error handling
+function enableUnlimitedCachePersistence() {
+  const settings = {
+    cacheSizeBytes: CACHE_SIZE_LIMIT,
+  };
+  db.settings(settings);
+
+  db.enablePersistence({ synchronizeTabs: true }).catch(handlePersistenceError);
+}
 
+// Enable persistence in the local environment (with Firestore and Auth emulators)
 if (REACT_APP_ENV === Environment.Local) {
   firebase.auth().useEmulator(local.firebase.authDomain);
   firebase
@@ -23,16 +91,6 @@ if (REACT_APP_ENV === Environment.Local) {
       "localhost",
       Number(local.firebase.databaseURL.split(/:/g)[2]),
     );
-} else {
-  firebase
-    .firestore()
-    .enablePersistence({
-      synchronizeTabs: true,
-      experimentalForceOwningTab: false,
-    })
-    .catch((error) => {
-      console.error("Error enabling persistence", error);
-    });
 }
 
 let perf;