refactor shared-albums to use app context for loader and message dialog
This commit is contained in:
parent
efafc6b785
commit
21133eb484
|
@ -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 },
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ export const defaultPublicCollectionGalleryContext: PublicCollectionGalleryConte
|
|||
token: null,
|
||||
passwordToken: null,
|
||||
accessedThroughSharedURL: false,
|
||||
setDialogMessage: () => null,
|
||||
|
||||
openReportForm: () => null,
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue