Use caching to load inbox and feed faster - Make feed loading faster #2288

src/pages/commonFeed/hooks/useCommonData/index.ts

@@ -47,12 +47,13 @@ export const useCommonData = (userId?: string): Return => {
       (async () => {
         try {
           const [common, governance, sharedFeedItem] = await Promise.all([
-            CommonService.getCommonById(commonId),
-            GovernanceService.getGovernanceByCommonId(commonId),
+            CommonService.getCommonById(commonId, true),
+            GovernanceService.getGovernanceByCommonId(commonId, true),
             sharedFeedItemId
               ? CommonFeedService.getCommonFeedItemById(
                   commonId,
                   sharedFeedItemId,
+                  true,
                 )
               : null,
           ]);
@@ -69,10 +70,10 @@ export const useCommonData = (userId?: string): Return => {
           const { rootCommonId } = common;
           const [parentCommons, subCommons, rootCommonGovernance] =
             await Promise.all([
-              CommonService.getAllParentCommonsForCommon(common),
-              CommonService.getCommonsByDirectParentIds([common.id]),
+              CommonService.getAllParentCommonsForCommon(common, true),
+              CommonService.getCommonsByDirectParentId(common.id, true),
               rootCommonId
-                ? GovernanceService.getGovernanceByCommonId(rootCommonId)
+                ? GovernanceService.getGovernanceByCommonId(rootCommonId, true)
                 : null,
             ]);
           const rootCommon = await getRootCommon(

src/services/Common.ts

@@ -17,7 +17,6 @@ import {
   SubCollections,
 } from "@/shared/models";
 import {
-  convertObjectDatesToFirestoreTimestamps,
   emptyFunction,
   firestoreDataConverter,
   transformFirebaseDataList,
@@ -30,16 +29,25 @@ const converter = firestoreDataConverter<Common>();
 const commonMemberConverter = firestoreDataConverter<CommonMember>();
 
 class CommonService {
-  public getCommonById = async (commonId: string): Promise<Common | null> => {
-    const common = await firebase
+  public getCommonById = async (
+    commonId: string,
+    cached = false,
+  ): Promise<Common | null> => {
+    const snapshot = await firebase
       .firestore()
       .collection(Collection.Daos)
       .where("id", "==", commonId)
       .where("state", "==", CommonState.ACTIVE)
-      .get();
-    const data = transformFirebaseDataList<Common>(common);
+      .withConverter(converter)
+      .get({ source: cached ? "cache" : "default" });
+    const commons = snapshot.docs.map((doc) => doc.data());
+    const common = commons[0] || null;
+
+    if (cached && !common) {
+      return this.getCommonById(commonId);
+    }
 
-    return data[0] ? convertObjectDatesToFirestoreTimestamps(data[0]) : null;
+    return common;
   };
 
   public getCachedCommonById = async (
@@ -93,6 +101,26 @@ class CommonService {
       .reduce((acc, items) => [...acc, ...items], []);
   };
 
+  public getCommonsByDirectParentId = async (
+    parentCommonId: string,
+    cached = false,
+  ): Promise<Common[]> => {
+    const snapshot = await firebase
+      .firestore()
+      .collection(Collection.Daos)
+      .where("state", "==", CommonState.ACTIVE)
+      .where("directParent.commonId", "==", parentCommonId)
+      .withConverter(converter)
+      .get({ source: cached ? "cache" : "default" });
+    const commons = snapshot.docs.map((doc) => doc.data());
+
+    if (cached && commons.length === 0) {
+      return this.getCommonsByDirectParentId(parentCommonId);
+    }
+
+    return commons;
+  };
+
   public getCommonsByDirectParentIds = async (
     ids: string[],
   ): Promise<Common[]> => {
@@ -249,10 +277,11 @@ class CommonService {
   // Fetch all parent commons. Order: from root parent common to lowest ones
   public getAllParentCommonsForCommon = async (
     commonToCheck: Pick<Common, "directParent"> | string,
+    cached = false,
   ): Promise<Common[]> => {
     const common =
       typeof commonToCheck === "string"
-        ? await this.getCommonById(commonToCheck)
+        ? await this.getCommonById(commonToCheck, cached)
         : commonToCheck;
 
     if (!common || common.directParent === null) {
@@ -263,7 +292,7 @@ class CommonService {
     let nextCommonId = common.directParent.commonId;
 
     while (nextCommonId) {
-      const common = await this.getCommonById(nextCommonId);
+      const common = await this.getCommonById(nextCommonId, cached);
 
       if (common) {
         finalCommons = [common, ...finalCommons];

src/services/CommonFeed.ts

@@ -25,7 +25,7 @@ import {
   convertToTimestamp,
   firestoreDataConverter,
 } from "@/shared/utils";
-import firebase from "@/shared/utils/firebase";
+import firebase, { isFirestoreCacheError } from "@/shared/utils/firebase";
 import Api, { CancelToken } from "./Api";
 
 const converter = firestoreDataConverter<CommonFeed>();
@@ -42,12 +42,21 @@ class CommonFeedService {
   public getCommonFeedItemById = async (
     commonId: string,
     commonFeedId: string,
+    cached = false,
   ): Promise<CommonFeed | null> => {
-    const snapshot = await this.getCommonFeedSubCollection(commonId)
-      .doc(commonFeedId)
-      .get();
+    try {
+      const snapshot = await this.getCommonFeedSubCollection(commonId)
+        .doc(commonFeedId)
+        .get({ source: cached ? "cache" : "default" });
 
-    return snapshot?.data() || null;
+      return snapshot?.data() || null;
+    } catch (error) {
+      if (cached && isFirestoreCacheError(error)) {
+        return this.getCommonFeedItemById(commonId, commonFeedId);
+      } else {
+        throw error;
+      }
+    }
   };
 
   public getCommonFeedItemWithSnapshot = async (

src/services/Governance.ts

@@ -13,12 +13,20 @@ const converter = firestoreDataConverter<Governance>();
 class GovernanceService {
   public getGovernanceByCommonId = async (
     commonId: string,
+    cached = false,
   ): Promise<Governance | null> => {
-    const governanceList = await governanceCollection
+    const snapshot = await governanceCollection
       .where("commonId", "==", commonId)
-      .get();
+      .withConverter(converter)
+      .get({ source: cached ? "cache" : "default" });
+    const governanceList = snapshot.docs.map((doc) => doc.data());
+    const governance = governanceList[0] || null;
 
-    return transformFirebaseDataList<Governance>(governanceList)[0] || null;
+    if (cached && !governance) {
+      return this.getGovernanceByCommonId(commonId);
+    }
+
+    return governance;
   };
 
   public getGovernanceListByCommonIds = async (

src/shared/hooks/useCases/useFullCommonData/index.ts

@@ -26,7 +26,7 @@ export const getRootCommon = async (
     return initialRootCommon;
   }
 
-  return CommonService.getCommonById(rootCommonId);
+  return CommonService.getCommonById(rootCommonId, true);
 };
 
 export const useFullCommonData = (): Return => {

src/shared/utils/firebase.tsx

@@ -32,8 +32,11 @@ if (REACT_APP_ENV === Environment.Local) {
     });
 }
 
-export const isFirebaseError = (error: any): error is FirebaseError => {
-  return error && error.code && error.code.startsWith("auth/");
-};
+export const isFirebaseError = (error: any): error is FirebaseError =>
+  (error && error.code && error.code.startsWith("auth/")) ||
+  error.name === "FirebaseError";
+
+export const isFirestoreCacheError = (error: any): boolean =>
+  isFirebaseError(error) && error.code === "unavailable";
 
 export default firebase;