make sessionExpired dialog non closable
This commit is contained in:
parent
bae4e95dcc
commit
b2767d086b
|
@ -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 = () =>
|
||||||
|
setCollectionNamerAttributes({
|
||||||
title: constants.CREATE_COLLECTION,
|
title: constants.CREATE_COLLECTION,
|
||||||
buttonText: constants.CREATE,
|
buttonText: constants.CREATE,
|
||||||
autoFilledName: '',
|
autoFilledName: '',
|
||||||
callback: (collectionName) => addToCollectionHelper(collectionName, null),
|
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}
|
||||||
|
|
Loading…
Reference in a new issue