use activeCollection state for navigation between collections
This commit is contained in:
parent
0cf8e5e2e1
commit
99d62756cc
|
@ -18,7 +18,7 @@ import OptionIcon, { OptionIconWrapper } from './OptionIcon';
|
||||||
interface CollectionProps {
|
interface CollectionProps {
|
||||||
collections: Collection[];
|
collections: Collection[];
|
||||||
selected?: number;
|
selected?: number;
|
||||||
selectCollection: (id?: number) => void;
|
setActiveCollection: (id?: number) => void;
|
||||||
setDialogMessage: SetDialogMessage;
|
setDialogMessage: SetDialogMessage;
|
||||||
syncWithRemote: () => Promise<void>;
|
syncWithRemote: () => Promise<void>;
|
||||||
setCollectionNamerAttributes: SetCollectionNamerAttributes;
|
setCollectionNamerAttributes: SetCollectionNamerAttributes;
|
||||||
|
@ -69,7 +69,7 @@ const Chip = styled.button<{ active: boolean }>`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default function Collections(props: CollectionProps) {
|
export default function Collections(props: CollectionProps) {
|
||||||
const { selected, collections, selectCollection } = props;
|
const { selected, collections, setActiveCollection } = props;
|
||||||
const [selectedCollectionID, setSelectedCollectionID] =
|
const [selectedCollectionID, setSelectedCollectionID] =
|
||||||
useState<number>(null);
|
useState<number>(null);
|
||||||
const collectionRef = useRef<HTMLDivElement>(null);
|
const collectionRef = useRef<HTMLDivElement>(null);
|
||||||
|
@ -102,7 +102,7 @@ export default function Collections(props: CollectionProps) {
|
||||||
|
|
||||||
const clickHandler = (collection?: Collection) => () => {
|
const clickHandler = (collection?: Collection) => () => {
|
||||||
setSelectedCollectionID(collection?.id);
|
setSelectedCollectionID(collection?.id);
|
||||||
selectCollection(collection?.id);
|
setActiveCollection(collection?.id);
|
||||||
};
|
};
|
||||||
|
|
||||||
const user: User = getData(LS_KEYS.USER);
|
const user: User = getData(LS_KEYS.USER);
|
||||||
|
@ -119,7 +119,7 @@ export default function Collections(props: CollectionProps) {
|
||||||
setDialogMessage: props.setDialogMessage,
|
setDialogMessage: props.setDialogMessage,
|
||||||
startLoadingBar: props.startLoadingBar,
|
startLoadingBar: props.startLoadingBar,
|
||||||
showCollectionShareModal: setCollectionShareModalView.bind(null, true),
|
showCollectionShareModal: setCollectionShareModalView.bind(null, true),
|
||||||
redirectToAll: selectCollection.bind(null, null),
|
redirectToAll: setActiveCollection.bind(null, 0),
|
||||||
});
|
});
|
||||||
|
|
||||||
const scrollCollection = (direction: SCROLL_DIRECTION) => () => {
|
const scrollCollection = (direction: SCROLL_DIRECTION) => () => {
|
||||||
|
|
|
@ -162,6 +162,7 @@ export default function Gallery() {
|
||||||
const appContext = useContext(AppContext);
|
const appContext = useContext(AppContext);
|
||||||
const [collectionFilesCount, setCollectionFilesCount] =
|
const [collectionFilesCount, setCollectionFilesCount] =
|
||||||
useState<Map<number, number>>();
|
useState<Map<number, number>>();
|
||||||
|
const [activeCollection, setActiveCollection] = useState(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
|
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
|
||||||
|
@ -196,13 +197,22 @@ 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]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const href = `/gallery${
|
||||||
|
activeCollection ? `?collection=${activeCollection.toString()}` : ''
|
||||||
|
}`;
|
||||||
|
router.push(href, undefined, { shallow: true });
|
||||||
|
}, [activeCollection]);
|
||||||
|
|
||||||
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;
|
||||||
|
@ -272,11 +282,6 @@ export default function Gallery() {
|
||||||
setSelected({ count: 0 });
|
setSelected({ count: 0 });
|
||||||
};
|
};
|
||||||
|
|
||||||
const selectCollection = (id?: number) => {
|
|
||||||
const href = `/gallery${id ? `?collection=${id.toString()}` : ''}`;
|
|
||||||
router.push(href, undefined, { shallow: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!files) {
|
if (!files) {
|
||||||
return <div />;
|
return <div />;
|
||||||
}
|
}
|
||||||
|
@ -292,7 +297,7 @@ export default function Gallery() {
|
||||||
files,
|
files,
|
||||||
clearSelection,
|
clearSelection,
|
||||||
syncWithRemote,
|
syncWithRemote,
|
||||||
selectCollection,
|
setActiveCollection,
|
||||||
collectionName,
|
collectionName,
|
||||||
collection
|
collection
|
||||||
);
|
);
|
||||||
|
@ -402,7 +407,7 @@ export default function Gallery() {
|
||||||
collections={collections}
|
collections={collections}
|
||||||
searchMode={searchMode}
|
searchMode={searchMode}
|
||||||
selected={Number(router.query.collection)}
|
selected={Number(router.query.collection)}
|
||||||
selectCollection={selectCollection}
|
setActiveCollection={setActiveCollection}
|
||||||
syncWithRemote={syncWithRemote}
|
syncWithRemote={syncWithRemote}
|
||||||
setDialogMessage={setDialogMessage}
|
setDialogMessage={setDialogMessage}
|
||||||
setCollectionNamerAttributes={setCollectionNamerAttributes}
|
setCollectionNamerAttributes={setCollectionNamerAttributes}
|
||||||
|
|
|
@ -13,7 +13,7 @@ export async function addFilesToCollection(
|
||||||
files: File[],
|
files: File[],
|
||||||
clearSelection: () => void,
|
clearSelection: () => void,
|
||||||
syncWithRemote: () => Promise<void>,
|
syncWithRemote: () => Promise<void>,
|
||||||
selectCollection: (id: number) => void,
|
setActiveCollection: (id: number) => void,
|
||||||
collectionName: string,
|
collectionName: string,
|
||||||
existingCollection: Collection
|
existingCollection: Collection
|
||||||
) {
|
) {
|
||||||
|
@ -31,7 +31,7 @@ export async function addFilesToCollection(
|
||||||
await addToCollection(collection, selectedFiles);
|
await addToCollection(collection, selectedFiles);
|
||||||
clearSelection();
|
clearSelection();
|
||||||
await syncWithRemote();
|
await syncWithRemote();
|
||||||
selectCollection(collection.id);
|
setActiveCollection(collection.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getSelectedCollection(collectionID: number, collections) {
|
export function getSelectedCollection(collectionID: number, collections) {
|
||||||
|
|
Loading…
Reference in a new issue