move fetchEmailList logic to gallery

apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipant.tsx

@@ -6,13 +6,9 @@ import { DialogProps } from '@mui/material';
 import Titlebar from 'components/Titlebar';
 
 import { GalleryContext } from 'pages/gallery';
-import { useContext, useState, useEffect, useMemo } from 'react';
-import {
-    getLocalCollections,
-    shareCollection,
-} from 'services/collectionService';
+import { useContext, useMemo } from 'react';
+import { shareCollection } from 'services/collectionService';
 import { handleSharingErrors } from 'utils/error/ui';
-import { getLocalFamilyData } from 'utils/user/family';
 import AddParticipantForm, {
     AddParticipantFormProps,
 } from './AddParticipantForm';
@@ -32,50 +28,15 @@ export default function AddParticipant({
     onRootClose,
     type,
 }: Iprops) {
-    const { user, syncWithRemote } = useContext(GalleryContext);
-
-    const [emails, setEmails] = useState<string[]>([]);
-
-    useEffect(() => {
-        const main = async () => {
-            const familyList = getLocalFamilyData();
-            const collectionList = await getLocalCollections();
-
-            const emails = collectionList
-                .map((item) => {
-                    if (item.owner.email && item.owner.id !== user.id) {
-                        return [item.owner.email];
-                    } else {
-                        const shareeEmails = item.sharees.map(
-                            (sharee) => sharee.email
-                        );
-                        return shareeEmails;
-                    }
-                })
-                .flat();
-
-            // adding family members
-            if (familyList) {
-                const family = familyList.members.map((member) => member.email);
-                emails.push(...family);
-            }
-
-            setEmails(Array.from(new Set(emails)));
-        };
-        main();
-    }, []);
+    const { user, syncWithRemote, emailList } = useContext(GalleryContext);
 
     const nonSharedEmails = useMemo(
         () =>
-            emails.filter(
+            emailList.filter(
                 (email) =>
-                    !(
-                        collection.sharees?.find(
-                            (value) => value.email === email
-                        ) || email === user.email
-                    )
+                    !collection.sharees?.find((value) => value.email === email)
             ),
-        [emails, collection.sharees]
+        [emailList, collection.sharees]
     );
 
     const collectionShare: AddParticipantFormProps['callback'] = async (

apps/photos/src/pages/gallery/index.tsx

@@ -24,6 +24,7 @@ import {
     createAlbum,
     getCollectionSummaries,
     moveToHiddenCollection,
+    constructEmailList,
 } from 'services/collectionService';
 import { t } from 'i18next';
 
@@ -107,7 +108,7 @@ import SearchResultInfo from 'components/Search/SearchResultInfo';
 import { ITEM_TYPE, TimeStampListItem } from 'components/PhotoList';
 import UploadInputs from 'components/UploadSelectorInputs';
 import useFileInput from 'hooks/useFileInput';
-import { User } from 'types/user';
+import { FamilyData, User } from 'types/user';
 import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import { CenteredFlex } from 'components/Container';
 import { checkConnectivity } from 'utils/common';
@@ -124,6 +125,7 @@ import { isSameDayAnyYear, isInsideLocationTag } from 'utils/search';
 import { getSessionExpiredMessage } from 'utils/ui';
 import { syncEntities } from 'services/entityService';
 import { constructUserIDToEmailMap } from 'services/collectionService';
+import { getLocalFamilyData } from 'utils/user/family';
 
 export const DeadCenter = styled('div')`
     flex: 1;
@@ -147,6 +149,7 @@ const defaultGalleryContext: GalleryContextType = {
     authenticateUser: () => null,
     user: null,
     userIDToEmailMap: null,
+    emailList: null,
 };
 
 export const GalleryContext = createContext<GalleryContextType>(
@@ -156,6 +159,7 @@ export const GalleryContext = createContext<GalleryContextType>(
 export default function Gallery() {
     const router = useRouter();
     const [user, setUser] = useState(null);
+    const [familyData, setFamilyData] = useState<FamilyData>(null);
     const [collections, setCollections] = useState<Collection[]>(null);
     const [files, setFiles] = useState<EnteFile[]>(null);
     const [hiddenFiles, setHiddenFiles] = useState<EnteFile[]>(null);
@@ -224,6 +228,7 @@ export default function Gallery() {
         useState<CollectionSummaries>();
     const [userIDToEmailMap, setUserIDToEmailMap] =
         useState<Map<number, string>>(null);
+    const [emailList, setEmailList] = useState<string[]>(null);
     const [activeCollection, setActiveCollection] = useState<number>(undefined);
     const [fixCreationTimeView, setFixCreationTimeView] = useState(false);
     const [fixCreationTimeAttributes, setFixCreationTimeAttributes] =
@@ -283,6 +288,7 @@ export default function Gallery() {
             }
             setIsFirstLogin(false);
             const user = getData(LS_KEYS.USER);
+            const familyData = getLocalFamilyData();
             const files = sortFiles(mergeMetadata(await getLocalFiles()));
             const hiddenFiles = sortFiles(
                 mergeMetadata(await getLocalHiddenFiles())
@@ -291,6 +297,7 @@ export default function Gallery() {
             const trashedFiles = await getLocalTrashedFiles();
 
             setUser(user);
+            setFamilyData(familyData);
             setFiles(files);
             setTrashedFiles(trashedFiles);
             setHiddenFiles(hiddenFiles);
@@ -321,16 +328,21 @@ export default function Gallery() {
     }, [collections, files, hiddenFiles, trashedFiles, user]);
 
     useEffect(() => {
-        const fetchData = async () => {
-            if (!collections) {
+        if (!collections || !user) {
             return;
         }
-            const userIdToEmailMap = await constructUserIDToEmailMap();
+        const userIdToEmailMap = constructUserIDToEmailMap(user, collections);
         setUserIDToEmailMap(userIdToEmailMap);
-        };
-        fetchData();
     }, [collections]);
 
+    useEffect(() => {
+        if (!user || !collections) {
+            return;
+        }
+        const emailList = constructEmailList(user, collections, familyData);
+        setEmailList(emailList);
+    }, [user, collections, familyData]);
+
     useEffect(() => {
         collectionSelectorAttributes && setCollectionSelectorView(true);
     }, [collectionSelectorAttributes]);
@@ -901,6 +913,7 @@ export default function Gallery() {
                 authenticateUser,
                 userIDToEmailMap,
                 user,
+                emailList,
             }}>
             <FullScreenDropZone
                 getDragAndDropRootProps={getDragAndDropRootProps}>

apps/photos/src/services/collectionService.ts

@@ -50,7 +50,7 @@ import {
     isPinnedCollection,
     updateMagicMetadata,
 } from 'utils/magicMetadata';
-import { User } from 'types/user';
+import { FamilyData, User } from 'types/user';
 import {
     isQuickLinkCollection,
     isOutgoingShare,
@@ -1407,20 +1407,19 @@ export async function unhideToCollection(
     }
 }
 
-export const constructUserIDToEmailMap = async (): Promise<
-    Map<number, string>
-> => {
+export const constructUserIDToEmailMap = (
+    user: User,
+    collections: Collection[]
+): Map<number, string> => {
     try {
-        const collection = await getLocalCollections();
-        const user: User = getData(LS_KEYS.USER);
         const userIDToEmailMap = new Map<number, string>();
-        collection.map((item) => {
+        collections.forEach((item) => {
             const { owner, sharees } = item;
             if (user.id !== owner.id && owner.email) {
                 userIDToEmailMap.set(owner.id, owner.email);
             }
             if (sharees) {
-                sharees.map((item) => {
+                sharees.forEach((item) => {
                     if (item.id !== user.id)
                         userIDToEmailMap.set(item.id, item.email);
                 });
@@ -1430,6 +1429,31 @@ export const constructUserIDToEmailMap = async (): Promise<
     } catch (e) {
         logError('Error Mapping UserId to email:', e);
         return new Map<number, string>();
-        throw e;
     }
 };
+
+export const constructEmailList = (
+    user: User,
+    collections: Collection[],
+    familyData: FamilyData
+): string[] => {
+    const emails = collections
+        .map((item) => {
+            if (item.owner.email && item.owner.id !== user.id) {
+                return [item.owner.email];
+            } else {
+                const shareeEmails = item.sharees
+                    .filter((sharee) => sharee.email !== user.email)
+                    .map((sharee) => sharee.email);
+                return shareeEmails;
+            }
+        })
+        .flat();
+
+    // adding family members
+    if (familyData) {
+        const family = familyData.members.map((member) => member.email);
+        emails.push(...family);
+    }
+    return Array.from(new Set(emails));
+};

apps/photos/src/types/gallery/index.ts

@@ -39,6 +39,7 @@ export type GalleryContextType = {
     authenticateUser: (callback: () => void) => void;
     user: User;
     userIDToEmailMap: Map<number, string>;
+    emailList: string[];
 };
 
 export enum CollectionSelectorIntent {