Merge pull request Expensify#72428 from margelo/@chrispader/workspace-avatar-attachment-modal-migration

Migrate WorkspaceAvatar screen to AttachmentModalScreen

Author: mountiny

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -85,7 +85,6 @@ const loadConciergePage = () => require<ReactComponentModule>('../../../pages/Co
 const loadTrackExpensePage = () => require<ReactComponentModule>('../../../pages/TrackExpensePage').default;
 const loadSubmitExpensePage = () => require<ReactComponentModule>('../../../pages/SubmitExpensePage').default;
 const loadProfileAvatar = () => require<ReactComponentModule>('../../../pages/settings/Profile/Avatar/ProfileAvatar').default;
-const loadWorkspaceAvatar = () => require<ReactComponentModule>('../../../pages/workspace/WorkspaceAvatar').default;
 const loadReportAvatar = () => require<ReactComponentModule>('../../../pages/ReportAvatar').default;
 const loadReceiptView = () => require<ReactComponentModule>('../../../pages/TransactionReceiptPage').default;
 const loadWorkspaceJoinUser = () => require<ReactComponentModule>('@pages/workspace/WorkspaceJoinUserPage').default;
@@ -582,22 +581,19 @@ function AuthScreens() {
                     listeners={modalScreenListeners}
                 />
                 <RootStack.Screen
-                    name={SCREENS.PROFILE_AVATAR}
-                    options={{
-                        headerShown: false,
-                        presentation: Presentation.TRANSPARENT_MODAL,
-                        animation: Animations.NONE,
-                    }}
-                    getComponent={loadProfileAvatar}
+                    name={SCREENS.WORKSPACE_AVATAR}
+                    options={attachmentModalScreenOptions}
+                    getComponent={loadAttachmentModalScreen}
                     listeners={modalScreenListeners}
                 />
                 <RootStack.Screen
-                    name={SCREENS.WORKSPACE_AVATAR}
+                    name={SCREENS.PROFILE_AVATAR}
                     options={{
                         headerShown: false,
                         presentation: Presentation.TRANSPARENT_MODAL,
+                        animation: Animations.NONE,
                     }}
-                    getComponent={loadWorkspaceAvatar}
+                    getComponent={loadProfileAvatar}
                     listeners={modalScreenListeners}
                 />
                 <RootStack.Screen

src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx

@@ -86,7 +86,7 @@ function AttachmentModalBaseContent({
     const [currentAttachmentLink, setCurrentAttachmentLink] = useState(attachmentLink);
 
     const fallbackFile = useMemo(() => (originalFileName ? {name: originalFileName} : undefined), [originalFileName]);
-    const [files, setFilesInternal] = useState<FileObject | FileObject[] | undefined>();
+    const [files, setFilesInternal] = useState<FileObject | FileObject[] | undefined>(() => filesProp ?? fallbackFile);
     const [isMultipleFiles, setIsMultipleFiles] = useState<boolean>(() => Array.isArray(files));
     const fileToDisplay = useMemo(() => {
         if (isMultipleFiles) {
@@ -106,10 +106,6 @@ function AttachmentModalBaseContent({
     }, []);
 
     useEffect(() => {
-        if (!filesProp) {
-            return;
-        }
-
         setFile(filesProp ?? fallbackFile);
     }, [filesProp, fallbackFile, setFile]);
 

src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.tsx

@@ -27,7 +27,8 @@ function AttachmentModalContainer<Screen extends AttachmentModalScreenType>({
 
     const closeModal = useCallback(() => {
         Navigation.dismissModal();
-    }, []);
+        resetAttachmentModalAndClose();
+    }, [resetAttachmentModalAndClose]);
 
     useEffect(() => {
         onShow?.();

src/pages/media/AttachmentModalScreen/routes/WorkspaceAvatarModalContent.tsx

@@ -1,32 +1,45 @@
 import React, {useMemo} from 'react';
 import useOnyx from '@hooks/useOnyx';
+import usePolicy from '@hooks/usePolicy';
 import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils';
 import {getFullSizeAvatar} from '@libs/UserUtils';
 import type {AttachmentModalBaseContentProps} from '@pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types';
 import AttachmentModalContainer from '@pages/media/AttachmentModalScreen/AttachmentModalContainer';
 import type {AttachmentModalScreenProps} from '@pages/media/AttachmentModalScreen/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
+import useDownloadAttachment from './hooks/useDownloadAttachment';
 
 function WorkspaceAvatarModalContent({navigation, route}: AttachmentModalScreenProps<typeof SCREENS.WORKSPACE_AVATAR>) {
-    const {policyID} = route.params;
+    const {policyID, letter: fallbackLetter} = route.params;
 
-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: false});
-    const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true});
+    const policy = usePolicy(policyID);
+    const [isLoadingApp = false] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true, initWithStoredValues: false});
 
-    const avatarURL = policy?.avatarURL ?? getDefaultWorkspaceAvatar(policy?.name ?? '');
+    const avatarURL = policy?.avatarURL ?? getDefaultWorkspaceAvatar(policy?.name ?? fallbackLetter);
+    const source = getFullSizeAvatar(avatarURL, 0);
+    const policyKeysLength = Object.keys(policy ?? {}).length;
+
+    // eslint-disable-next-line rulesdir/no-negated-variables
+    const shouldShowNotFoundPage = policyKeysLength === 0 && !isLoadingApp && (!policyID || !fallbackLetter);
+    const isLoading = policyKeysLength === 0 && !!isLoadingApp;
+    const originalFileName = policy?.originalFileName ?? policy?.id ?? policyID;
+    const headerTitle = policy?.name ?? '';
+
+    const onDownloadAttachment = useDownloadAttachment();
 
     const contentProps = useMemo<AttachmentModalBaseContentProps>(
         () => ({
-            source: getFullSizeAvatar(avatarURL, 0),
-            headerTitle: policy?.name,
+            source,
+            headerTitle,
+            originalFileName,
+            shouldShowNotFoundPage,
+            isLoading,
             isWorkspaceAvatar: true,
-            originalFileName: policy?.originalFileName ?? policy?.id,
-            shouldShowNotFoundPage: !Object.keys(policy ?? {}).length && !isLoadingApp,
-            isLoading: !Object.keys(policy ?? {}).length && !!isLoadingApp,
             maybeIcon: true,
+            onDownloadAttachment,
         }),
-        [avatarURL, isLoadingApp, policy],
+        [headerTitle, isLoading, onDownloadAttachment, originalFileName, shouldShowNotFoundPage, source],
     );
 
     return (