Merge pull request #153 from ente-io/update-selection-behaviour

Update selection behaviour

src/components/PhotoFrame.tsx

@@ -3,6 +3,7 @@ import {
     DeadCenter,
     GalleryContext,
     Search,
+    SelectedState,
     SetFiles,
     setSearchStats,
 } from 'pages/gallery';
@@ -136,8 +137,10 @@ interface Props {
     setFiles: SetFiles;
     syncWithRemote: () => Promise<void>;
     favItemIds: Set<number>;
-    setSelected;
-    selected;
+    setSelected: (
+        selected: SelectedState | ((selected: SelectedState) => SelectedState)
+    ) => void;
+    selected: SelectedState;
     isFirstLoad;
     openFileUploader;
     loadingBar;
@@ -146,6 +149,7 @@ interface Props {
     setSearchStats: setSearchStats;
     deleted?: number[];
     setDialogMessage: SetDialogMessage;
+    activeCollection: number;
 }
 
 const PhotoFrame = ({
@@ -163,6 +167,7 @@ const PhotoFrame = ({
     setSearchStats,
     deleted,
     setDialogMessage,
+    activeCollection,
 }: Props) => {
     const [open, setOpen] = useState(false);
     const [currentIndex, setCurrentIndex] = useState<number>(0);
@@ -246,10 +251,14 @@ const PhotoFrame = ({
     };
 
     const handleSelect = (id: number) => (checked: boolean) => {
+        if (selected.collectionID !== activeCollection) {
+            setSelected({ count: 0, collectionID: 0 });
+        }
         setSelected((selected) => ({
             ...selected,
             [id]: checked,
             count: checked ? selected.count + 1 : selected.count - 1,
+            collectionID: activeCollection,
         }));
     };
     const getThumbnail = (file: File[], index: number) => (
@@ -260,7 +269,10 @@ const PhotoFrame = ({
             onClick={onThumbnailClick(index)}
             selectable
             onSelect={handleSelect(file[index].id)}
-            selected={selected[file[index].id]}
+            selected={
+                selected.collectionID === activeCollection &&
+                selected[file[index].id]
+            }
             selectOnClick={selected.count > 0}
         />
     );

src/components/pages/gallery/Collections.tsx

@@ -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) => () => {

src/pages/gallery/index.tsx

@@ -79,9 +79,10 @@ const AlertContainer = styled.div`
     text-align: center;
 `;
 
-export type selectedState = {
+export type SelectedState = {
     [k: number]: boolean;
     count: number;
+    collectionID: number;
 };
 export type SetFiles = React.Dispatch<React.SetStateAction<File[]>>;
 export type SetCollections = React.Dispatch<React.SetStateAction<Collection[]>>;
@@ -125,7 +126,10 @@ export default function Gallery() {
     );
     const [isFirstLoad, setIsFirstLoad] = useState(false);
     const [isFirstFetch, setIsFirstFetch] = useState(false);
-    const [selected, setSelected] = useState<selectedState>({ count: 0 });
+    const [selected, setSelected] = useState<SelectedState>({
+        count: 0,
+        collectionID: 0,
+    });
     const [dialogMessage, setDialogMessage] = useState<MessageAttributes>();
     const [dialogView, setDialogView] = useState(false);
     const [planModalView, setPlanModalView] = useState(false);
@@ -162,6 +166,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 +201,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;
@@ -269,12 +283,7 @@ export default function Gallery() {
     };
 
     const clearSelection = function () {
-        setSelected({ count: 0 });
-    };
-
-    const selectCollection = (id?: number) => {
-        const href = `/gallery${id ? `?collection=${id.toString()}` : ''}`;
-        router.push(href, undefined, { shallow: true });
+        setSelected({ count: 0, collectionID: 0 });
     };
 
     if (!files) {
@@ -292,7 +301,7 @@ export default function Gallery() {
                 files,
                 clearSelection,
                 syncWithRemote,
-                selectCollection,
+                setActiveCollection,
                 collectionName,
                 collection
             );
@@ -402,7 +411,7 @@ export default function Gallery() {
                     collections={collections}
                     searchMode={searchMode}
                     selected={Number(router.query.collection)}
-                    selectCollection={selectCollection}
+                    setActiveCollection={setActiveCollection}
                     syncWithRemote={syncWithRemote}
                     setDialogMessage={setDialogMessage}
                     setCollectionNamerAttributes={setCollectionNamerAttributes}
@@ -473,20 +482,24 @@ export default function Gallery() {
                     setSearchStats={setSearchStats}
                     deleted={deleted}
                     setDialogMessage={setDialogMessage}
+                    activeCollection={activeCollection}
                 />
-                {selected.count > 0 && (
-                    <SelectedFileOptions
-                        addToCollectionHelper={addToCollectionHelper}
-                        showCreateCollectionModal={showCreateCollectionModal}
-                        setDialogMessage={setDialogMessage}
-                        setCollectionSelectorAttributes={
-                            setCollectionSelectorAttributes
-                        }
-                        deleteFileHelper={deleteFileHelper}
-                        count={selected.count}
-                        clearSelection={clearSelection}
-                    />
-                )}
+                {selected.count > 0 &&
+                    selected.collectionID === activeCollection && (
+                        <SelectedFileOptions
+                            addToCollectionHelper={addToCollectionHelper}
+                            showCreateCollectionModal={
+                                showCreateCollectionModal
+                            }
+                            setDialogMessage={setDialogMessage}
+                            setCollectionSelectorAttributes={
+                                setCollectionSelectorAttributes
+                            }
+                            deleteFileHelper={deleteFileHelper}
+                            count={selected.count}
+                            clearSelection={clearSelection}
+                        />
+                    )}
             </FullScreenDropZone>
         </GalleryContext.Provider>
     );

src/utils/collection/index.ts

@@ -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) {