refactor shared-albums to use app context for loader and message dialog

src/components/pages/sharedAlbum/AbuseReportForm.tsx

@@ -10,6 +10,7 @@ import constants from 'utils/strings/constants';
 import * as Yup from 'yup';
 import styled from 'styled-components';
 import { AbuseReportDetails, AbuseReportRequest } from 'types/publicCollection';
+import { AppContext } from 'pages/_app';
 
 interface Iprops {
     url: string;
@@ -57,6 +58,7 @@ const Wrapper = styled.div`
 
 export function AbuseReportForm({ show, close, url }: Iprops) {
     const [loading, setLoading] = useState(false);
+    const appContext = useContext(AppContext);
     const publicCollectionGalleryContent = useContext(
         PublicCollectionGalleryContext
     );
@@ -83,7 +85,7 @@ export function AbuseReportForm({ show, close, url }: Iprops) {
                 details
             );
             close();
-            publicCollectionGalleryContent.setDialogMessage({
+            appContext.setDialogMessage({
                 title: constants.REPORT_SUBMIT_SUCCESS_TITLE,
                 content: constants.REPORT_SUBMIT_SUCCESS_CONTENT,
                 close: { text: constants.OK },

src/pages/shared-albums/index.tsx

@@ -19,7 +19,6 @@ import { mergeMetadata, sortFiles } from 'utils/file';
 import { AppContext } from 'pages/_app';
 import { CollectionInfo } from 'components/pages/sharedAlbum/CollectionInfo';
 import { AbuseReportForm } from 'components/pages/sharedAlbum/AbuseReportForm';
-import MessageDialog, { MessageAttributes } from 'components/MessageDialog';
 import {
     defaultPublicCollectionGalleryContext,
     PublicCollectionGalleryContext,
@@ -28,7 +27,6 @@ import { CustomError, parseSharingErrorCodes } from 'utils/error';
 import Container from 'components/Container';
 import constants from 'utils/strings/constants';
 import EnteSpinner from 'components/EnteSpinner';
-import LoadingBar from 'react-top-loading-bar';
 import CryptoWorker from 'utils/crypto';
 import { PAGES } from 'constants/pages';
 import { useRouter } from 'next/router';
@@ -55,29 +53,14 @@ export default function PublicCollectionGallery() {
     const [errorMessage, setErrorMessage] = useState<String>(null);
     const appContext = useContext(AppContext);
     const [abuseReportFormView, setAbuseReportFormView] = useState(false);
-    const [dialogMessage, setDialogMessage] = useState<MessageAttributes>();
-    const [messageDialogView, setMessageDialogView] = useState(false);
     const [loading, setLoading] = useState(true);
     const openReportForm = () => setAbuseReportFormView(true);
     const closeReportForm = () => setAbuseReportFormView(false);
-    const loadingBar = useRef(null);
-    const isLoadingBarRunning = useRef(false);
+
     const router = useRouter();
     const [isPasswordProtected, setIsPasswordProtected] =
         useState<boolean>(false);
 
-    const openMessageDialog = () => setMessageDialogView(true);
-    const closeMessageDialog = () => setMessageDialogView(false);
-
-    const startLoadingBar = () => {
-        !isLoadingBarRunning.current && loadingBar.current?.continuousStart();
-        isLoadingBarRunning.current = true;
-    };
-    const finishLoadingBar = () => {
-        isLoadingBarRunning.current && loadingBar.current?.complete();
-        isLoadingBarRunning.current = false;
-    };
-
     useEffect(() => {
         appContext.showNavBar(true);
         const currentURL = new URL(window.location.href);
@@ -137,12 +120,10 @@ export default function PublicCollectionGallery() {
         main();
     }, []);
 
-    useEffect(openMessageDialog, [dialogMessage]);
-
     const syncWithRemote = async () => {
         const collectionUID = getPublicCollectionUID(token.current);
         try {
-            startLoadingBar();
+            appContext.startLoading();
             const collection = await getPublicCollection(
                 token.current,
                 collectionKey.current
@@ -204,7 +185,7 @@ export default function PublicCollectionGallery() {
                 logError(e, 'failed to sync public album with remote');
             }
         } finally {
-            finishLoadingBar();
+            appContext.finishLoading();
         }
     };
 
@@ -245,7 +226,7 @@ export default function PublicCollectionGallery() {
                 throw e;
             }
             await syncWithRemote();
-            finishLoadingBar();
+            appContext.finishLoading();
         } catch (e) {
             logError(e, 'failed to verifyLinkPassword');
             setFieldError(
@@ -295,10 +276,9 @@ export default function PublicCollectionGallery() {
                 token: token.current,
                 passwordToken: passwordJWTToken.current,
                 accessedThroughSharedURL: true,
-                setDialogMessage,
+
                 openReportForm,
             }}>
-            <LoadingBar color="#51cd7c" ref={loadingBar} />
             <CollectionInfo collection={publicCollection} />
             <PhotoFrame
                 files={publicFiles}
@@ -324,12 +304,6 @@ export default function PublicCollectionGallery() {
                 close={closeReportForm}
                 url={url.current}
             />
-            <MessageDialog
-                size="lg"
-                show={messageDialogView}
-                onHide={closeMessageDialog}
-                attributes={dialogMessage}
-            />
         </PublicCollectionGalleryContext.Provider>
     );
 }

src/types/publicCollection/index.ts

@@ -1,4 +1,3 @@
-import { SetDialogMessage } from 'components/MessageDialog';
 import { REPORT_REASON } from 'constants/publicCollection';
 import { EnteFile } from 'types/file';
 
@@ -6,7 +5,7 @@ export interface PublicCollectionGalleryContextType {
     token: string;
     passwordToken: string;
     accessedThroughSharedURL: boolean;
-    setDialogMessage: SetDialogMessage;
+
     openReportForm: () => void;
 }
 

src/utils/publicCollectionGallery/index.ts

@@ -6,7 +6,7 @@ export const defaultPublicCollectionGalleryContext: PublicCollectionGalleryConte
         token: null,
         passwordToken: null,
         accessedThroughSharedURL: false,
-        setDialogMessage: () => null,
+
         openReportForm: () => null,
     };