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