beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

make sessionExpired dialog non closable

Browse source
This commit is contained in:
Abhinav-grd 2021-08-11 18:17:52 +05:30
parent bae4e95dcc
commit b2767d086b
1 changed files with 66 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
src/pages/gallery/index.tsx
View file

@ -1,4 +1,10 @@
import React, { createContext, useContext, useEffect, useRef, useState } from 'react'; import React, {
createContext,
useContext,
useEffect,
useRef,
useState,
} from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { clearKeys, getKey, SESSION_KEYS } from 'utils/storage/sessionStorage'; import { clearKeys, getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
import { import {
@ -98,19 +104,22 @@ export interface SearchStats {
type GalleryContextType = { type GalleryContextType = {
thumbs: Map<number, string>; thumbs: Map<number, string>;
files: Map<number, string>; files: Map<number, string>;
} };
const defaultGalleryContext: GalleryContextType = { const defaultGalleryContext: GalleryContextType = {
thumbs: new Map(), thumbs: new Map(),
files: new Map(), files: new Map(),
}; };
export const GalleryContext = createContext<GalleryContextType>(defaultGalleryContext); export const GalleryContext = createContext<GalleryContextType>(
defaultGalleryContext,
);
export default function Gallery() { export default function Gallery() {
const router = useRouter(); const router = useRouter();
const [collections, setCollections] = useState<Collection[]>([]); const [collections, setCollections] = useState<Collection[]>([]);
const [collectionsAndTheirLatestFile, setCollectionsAndTheirLatestFile] = useState<CollectionAndItsLatestFile[]>([]); const [collectionsAndTheirLatestFile, setCollectionsAndTheirLatestFile] =
useState<CollectionAndItsLatestFile[]>([]);
const [files, setFiles] = useState<File[]>(null); const [files, setFiles] = useState<File[]>(null);
const [favItemIds, setFavItemIds] = useState<Set<number>>(); const [favItemIds, setFavItemIds] = useState<Set<number>>();
const [bannerMessage, setBannerMessage] = useState<string>(null); const [bannerMessage, setBannerMessage] = useState<string>(null);
@ -121,9 +130,11 @@ export default function Gallery() {
const [dialogView, setDialogView] = useState(false); const [dialogView, setDialogView] = useState(false);
const [planModalView, setPlanModalView] = useState(false); const [planModalView, setPlanModalView] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [collectionSelectorAttributes, setCollectionSelectorAttributes] = useState<CollectionSelectorAttributes>(null); const [collectionSelectorAttributes, setCollectionSelectorAttributes] =
useState<CollectionSelectorAttributes>(null);
const [collectionSelectorView, setCollectionSelectorView] = useState(false); const [collectionSelectorView, setCollectionSelectorView] = useState(false);
const [collectionNamerAttributes, setCollectionNamerAttributes] = useState<CollectionNamerAttributes>(null); const [collectionNamerAttributes, setCollectionNamerAttributes] =
useState<CollectionNamerAttributes>(null);
const [collectionNamerView, setCollectionNamerView] = useState(false); const [collectionNamerView, setCollectionNamerView] = useState(false);
const [search, setSearch] = useState<Search>({ const [search, setSearch] = useState<Search>({
date: null, date: null,
@ -150,7 +161,8 @@ export default function Gallery() {
const resync = useRef(false); const resync = useRef(false);
const [deleted, setDeleted] = useState<number[]>([]); const [deleted, setDeleted] = useState<number[]>([]);
const appContext = useContext(AppContext); const appContext = useContext(AppContext);
const [collectionFilesCount, setCollectionFilesCount] = useState<Map<number, number>>(); const [collectionFilesCount, setCollectionFilesCount] =
useState<Map<number, number>>();
useEffect(() => { useEffect(() => {
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY); const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
@ -181,22 +193,19 @@ export default function Gallery() {
}, []); }, []);
useEffect(() => setDialogView(true), [dialogMessage]); useEffect(() => setDialogView(true), [dialogMessage]);
useEffect( useEffect(() => {
() => { if (collectionSelectorAttributes) {
if (collectionSelectorAttributes) { setCollectionSelectorView(true);
setCollectionSelectorView(true); }
} }, [collectionSelectorAttributes]);
},
[collectionSelectorAttributes],
);
useEffect(() => setCollectionNamerView(true), [collectionNamerAttributes]); useEffect(() => setCollectionNamerView(true), [collectionNamerAttributes]);
const syncWithRemote = async (force = false, silent=false) => { const syncWithRemote = async (force = false, silent = false) => {
if (syncInProgress.current && !force) { if (syncInProgress.current && !force) {
resync.current= true; resync.current = true;
return; return;
} }
syncInProgress.current=true; syncInProgress.current = true;
try { try {
checkConnectivity(); checkConnectivity();
if (!(await isTokenValid())) { if (!(await isTokenValid())) {
@ -215,11 +224,13 @@ export default function Gallery() {
title: constants.SESSION_EXPIRED, title: constants.SESSION_EXPIRED,
content: constants.SESSION_EXPIRED_MESSAGE, content: constants.SESSION_EXPIRED_MESSAGE,
staticBackdrop: true, staticBackdrop: true,
nonClosable: true,
proceed: { proceed: {
text: constants.LOGIN, text: constants.LOGIN,
action: logoutUser, action: logoutUser,
variant: 'success', variant: 'success',
} }); },
});
break; break;
case CustomError.KEY_MISSING: case CustomError.KEY_MISSING:
clearKeys(); clearKeys();
@ -229,22 +240,17 @@ export default function Gallery() {
} finally { } finally {
!silent && loadingBar.current?.complete(); !silent && loadingBar.current?.complete();
} }
syncInProgress.current=false; syncInProgress.current = false;
if (resync.current) { if (resync.current) {
resync.current=false; resync.current = false;
syncWithRemote(); syncWithRemote();
} }
}; };
const initDerivativeState = async (collections, files) => { const initDerivativeState = async (collections, files) => {
const nonEmptyCollections = getNonEmptyCollections( const nonEmptyCollections = getNonEmptyCollections(collections, files);
collections, const collectionsAndTheirLatestFile =
files, await getCollectionsAndTheirLatestFile(nonEmptyCollections, files);
);
const collectionsAndTheirLatestFile = await getCollectionsAndTheirLatestFile(
nonEmptyCollections,
files,
);
const collectionWiseFiles = sortFilesIntoCollections(files); const collectionWiseFiles = sortFilesIntoCollections(files);
const collectionFilesCount = new Map<number, number>(); const collectionFilesCount = new Map<number, number>();
for (const [id, files] of collectionWiseFiles) { for (const [id, files] of collectionWiseFiles) {
@ -286,22 +292,20 @@ export default function Gallery() {
); );
}; };
const showCreateCollectionModal = () => setCollectionNamerAttributes({ const showCreateCollectionModal = () =>
title: constants.CREATE_COLLECTION, setCollectionNamerAttributes({
buttonText: constants.CREATE, title: constants.CREATE_COLLECTION,
autoFilledName: '', buttonText: constants.CREATE,
callback: (collectionName) => addToCollectionHelper(collectionName, null), autoFilledName: '',
}); callback: (collectionName) =>
addToCollectionHelper(collectionName, null),
});
const deleteFileHelper = async () => { const deleteFileHelper = async () => {
loadingBar.current?.continuousStart(); loadingBar.current?.continuousStart();
try { try {
const fileIds = getSelectedFileIds(selected); const fileIds = getSelectedFileIds(selected);
await deleteFiles( await deleteFiles(fileIds, clearSelection, syncWithRemote);
fileIds,
clearSelection,
syncWithRemote,
);
setDeleted([...deleted, ...fileIds]); setDeleted([...deleted, ...fileIds]);
} catch (e) { } catch (e) {
loadingBar.current.complete(); loadingBar.current.complete();
@ -330,7 +334,6 @@ export default function Gallery() {
setSearchStats(null); setSearchStats(null);
}; };
const closeCollectionSelector = (closeBtnClick?: boolean) => { const closeCollectionSelector = (closeBtnClick?: boolean) => {
if (closeBtnClick === true) { if (closeBtnClick === true) {
appContext.resetSharedFiles(); appContext.resetSharedFiles();
@ -343,8 +346,10 @@ export default function Gallery() {
<FullScreenDropZone <FullScreenDropZone
getRootProps={getRootProps} getRootProps={getRootProps}
getInputProps={getInputProps} getInputProps={getInputProps}
showCollectionSelector={setCollectionSelectorView.bind(null, true)} showCollectionSelector={setCollectionSelectorView.bind(
> null,
true,
)}>
{loading && ( {loading && (
<LoadingOverlay> <LoadingOverlay>
<EnteSpinner /> <EnteSpinner />
@ -396,9 +401,14 @@ export default function Gallery() {
attributes={collectionNamerAttributes} attributes={collectionNamerAttributes}
/> />
<CollectionSelector <CollectionSelector
show={collectionSelectorView && !(collectionsAndTheirLatestFile?.length === 0)} show={
collectionSelectorView &&
!(collectionsAndTheirLatestFile?.length === 0)
}
onHide={closeCollectionSelector} onHide={closeCollectionSelector}
collectionsAndTheirLatestFile={collectionsAndTheirLatestFile} collectionsAndTheirLatestFile={
collectionsAndTheirLatestFile
}
directlyShowNextModal={ directlyShowNextModal={
collectionsAndTheirLatestFile?.length === 0 collectionsAndTheirLatestFile?.length === 0
} }
@ -409,8 +419,13 @@ export default function Gallery() {
syncWithRemote={syncWithRemote} syncWithRemote={syncWithRemote}
setBannerMessage={setBannerMessage} setBannerMessage={setBannerMessage}
acceptedFiles={acceptedFiles} acceptedFiles={acceptedFiles}
showCollectionSelector={setCollectionSelectorView.bind(null, true)} showCollectionSelector={setCollectionSelectorView.bind(
setCollectionSelectorAttributes={setCollectionSelectorAttributes} null,
true,
)}
setCollectionSelectorAttributes={
setCollectionSelectorAttributes
}
closeCollectionSelector={setCollectionSelectorView.bind( closeCollectionSelector={setCollectionSelectorView.bind(
null, null,
false, false,
@ -428,7 +443,10 @@ export default function Gallery() {
setLoading={setLoading} setLoading={setLoading}
showPlanSelectorModal={() => setPlanModalView(true)} showPlanSelectorModal={() => setPlanModalView(true)}
/> />
<UploadButton isFirstFetch={isFirstFetch} openFileUploader={openFileUploader} /> <UploadButton
isFirstFetch={isFirstFetch}
openFileUploader={openFileUploader}
/>
<PhotoFrame <PhotoFrame
files={files} files={files}
setFiles={setFiles} setFiles={setFiles}