refactor selected options bar

src/components/pages/deduplicate/SelectedDuplicatesOptions.tsx

@@ -1,117 +0,0 @@
-import { IconButton } from 'components/Container';
-import CloseIcon from 'components/icons/CloseIcon';
-import DeleteIcon from 'components/icons/DeleteIcon';
-import { SetDialogMessage } from 'components/MessageDialog';
-import Navbar from 'components/Navbar';
-import React from 'react';
-import { OverlayTrigger } from 'react-bootstrap';
-import styled from 'styled-components';
-import constants from 'utils/strings/constants';
-
-interface Props {
-    setDialogMessage: SetDialogMessage;
-    deleteFileHelper: () => void;
-    count: number;
-    clearSelection: () => void;
-    clubByTime: boolean;
-    setClubByTime: (clubByTime: boolean) => void;
-}
-
-const SelectionBar = styled(Navbar)`
-    position: fixed;
-    top: 0;
-    color: #fff;
-    z-index: 1001;
-    width: 100%;
-    padding: 0 16px;
-`;
-
-const SelectionContainer = styled.div`
-    flex: 1;
-    align-items: center;
-    display: flex;
-`;
-
-interface IconWithMessageProps {
-    children?: any;
-    message: string;
-}
-export const IconWithMessage = (props: IconWithMessageProps) => (
-    <OverlayTrigger
-        placement="bottom"
-        overlay={<p style={{ zIndex: 1002 }}>{props.message}</p>}>
-        {props.children}
-    </OverlayTrigger>
-);
-
-const SelectedFileOptions = ({
-    setDialogMessage,
-    deleteFileHelper,
-    count,
-    clearSelection,
-    clubByTime,
-    setClubByTime,
-}: Props) => {
-    const trashHandler = () =>
-        setDialogMessage({
-            title: constants.CONFIRM_DELETE,
-            content: constants.TRASH_MESSAGE,
-            staticBackdrop: true,
-            proceed: {
-                action: deleteFileHelper,
-                text: constants.MOVE_TO_TRASH,
-                variant: 'danger',
-            },
-            close: { text: constants.CANCEL },
-        });
-
-    return (
-        <SelectionBar>
-            <SelectionContainer>
-                <IconButton onClick={clearSelection}>
-                    <CloseIcon />
-                </IconButton>
-                <div>
-                    {count} {constants.SELECTED}
-                </div>
-            </SelectionContainer>
-            <>
-                <input
-                    type="checkbox"
-                    style={{
-                        width: '1em',
-                        height: '1em',
-                    }}
-                    value={clubByTime ? 'true' : 'false'}
-                    onChange={() => {
-                        setClubByTime(!clubByTime);
-                    }}></input>
-                <div
-                    style={{
-                        marginLeft: '0.5em',
-                        fontSize: '16px',
-                        marginRight: '0.8em',
-                    }}>
-                    {constants.CLUB_BY_CAPTURE_TIME}
-                </div>
-                <div className="vertical-line">
-                    <div
-                        style={{
-                            position: 'absolute',
-                            width: '1px',
-                            top: 0,
-                            bottom: 0,
-                            background: '#303030',
-                        }}></div>
-                </div>
-                <IconWithMessage message={constants.DELETE}>
-                    <IconButton onClick={trashHandler}>
-                        <DeleteIcon />
-                    </IconButton>
-                </IconWithMessage>
-            </>
-        </SelectionBar>
-    );
-};
-
-export default SelectedFileOptions;

src/components/pages/gallery/SelectedFileOptions.tsx

@@ -1,5 +1,5 @@
 import { SetDialogMessage } from 'components/MessageDialog';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { SetCollectionSelectorAttributes } from './CollectionSelector';
 import styled from 'styled-components';
 import Navbar from 'components/Navbar';
@@ -26,24 +26,25 @@ import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import { FIX_CREATION_TIME_VISIBLE_TO_USER_IDS } from 'constants/user';
 import DownloadIcon from 'components/icons/DownloadIcon';
 import { User } from 'types/user';
+import { DeduplicateContext } from 'pages/deduplicate';
 
 interface Props {
-    addToCollectionHelper: (collection: Collection) => void;
-    moveToCollectionHelper: (collection: Collection) => void;
-    restoreToCollectionHelper: (collection: Collection) => void;
-    showCreateCollectionModal: (opsType: COLLECTION_OPS_TYPE) => () => void;
+    addToCollectionHelper?: (collection: Collection) => void;
+    moveToCollectionHelper?: (collection: Collection) => void;
+    restoreToCollectionHelper?: (collection: Collection) => void;
+    showCreateCollectionModal?: (opsType: COLLECTION_OPS_TYPE) => () => void;
     setDialogMessage: SetDialogMessage;
-    setCollectionSelectorAttributes: SetCollectionSelectorAttributes;
+    setCollectionSelectorAttributes?: SetCollectionSelectorAttributes;
     deleteFileHelper: (permanent?: boolean) => void;
-    removeFromCollectionHelper: () => void;
-    fixTimeHelper: () => void;
-    downloadHelper: () => void;
+    removeFromCollectionHelper?: () => void;
+    fixTimeHelper?: () => void;
+    downloadHelper?: () => void;
     count: number;
     clearSelection: () => void;
-    archiveFilesHelper: () => void;
-    unArchiveFilesHelper: () => void;
-    activeCollection: number;
-    isFavoriteCollection: boolean;
+    archiveFilesHelper?: () => void;
+    unArchiveFilesHelper?: () => void;
+    activeCollection?: number;
+    isFavoriteCollection?: boolean;
 }
 
 const SelectionBar = styled(Navbar)`
@@ -92,6 +93,8 @@ const SelectedFileOptions = ({
     isFavoriteCollection,
 }: Props) => {
     const [showFixCreationTime, setShowFixCreationTime] = useState(false);
+    const deduplicateContext = useContext(DeduplicateContext);
+
     useEffect(() => {
         const user: User = getData(LS_KEYS.USER);
         const showFixCreationTime =
@@ -173,7 +176,45 @@ const SelectedFileOptions = ({
                     {count} {constants.SELECTED}
                 </div>
             </SelectionContainer>
-            {activeCollection === TRASH_SECTION ? (
+            {deduplicateContext.state ? (
+                <>
+                    <input
+                        type="checkbox"
+                        style={{
+                            width: '1em',
+                            height: '1em',
+                        }}
+                        value={deduplicateContext.clubByTime ? 'true' : 'false'}
+                        onChange={() => {
+                            deduplicateContext.setClubByTime(
+                                !deduplicateContext.clubByTime
+                            );
+                        }}></input>
+                    <div
+                        style={{
+                            marginLeft: '0.5em',
+                            fontSize: '16px',
+                            marginRight: '0.8em',
+                        }}>
+                        {constants.CLUB_BY_CAPTURE_TIME}
+                    </div>
+                    <div className="vertical-line">
+                        <div
+                            style={{
+                                position: 'absolute',
+                                width: '1px',
+                                top: 0,
+                                bottom: 0,
+                                background: '#303030',
+                            }}></div>
+                    </div>
+                    <IconWithMessage message={constants.DELETE}>
+                        <IconButton onClick={trashHandler}>
+                            <DeleteIcon />
+                        </IconButton>
+                    </IconWithMessage>
+                </>
+            ) : activeCollection === TRASH_SECTION ? (
                 <>
                     <IconWithMessage message={constants.RESTORE}>
                         <IconButton onClick={restoreHandler}>

src/pages/deduplicate/index.tsx

@@ -1,8 +1,8 @@
 import { IconButton } from 'components/Container';
 import LeftArrow from 'components/icons/LeftArrow';
 import MessageDialog, { MessageAttributes } from 'components/MessageDialog';
-import SelectedDuplicatesOptions from 'components/pages/deduplicate/SelectedDuplicatesOptions';
 import AlertBanner from 'components/pages/gallery/AlertBanner';
+import SelectedFileOptions from 'components/pages/gallery/SelectedFileOptions';
 import PhotoFrame from 'components/PhotoFrame';
 import ToastNotification from 'components/ToastNotification';
 import { ALL_SECTION } from 'constants/collection';
@@ -20,12 +20,13 @@ import React, {
 import LoadingBar from 'react-top-loading-bar';
 import { syncCollections } from 'services/collectionService';
 import {
-    getDuplicateFiles,
     clubDuplicatesByTime,
+    getDuplicateFiles,
 } from 'services/deduplicationService';
 import { getLocalFiles, syncFiles, trashFiles } from 'services/fileService';
 import { getLocalTrash, getTrashedFiles } from 'services/trashService';
 import { isTokenValid, logoutUser } from 'services/userService';
+import { DeduplicateContextType } from 'types/deduplicating';
 import { EnteFile } from 'types/file';
 import { NotificationAttributes, SelectedState } from 'types/gallery';
 import { checkConnectivity } from 'utils/common';
@@ -34,10 +35,10 @@ import { getSelectedFiles, mergeMetadata, sortFiles } from 'utils/file';
 import { isFirstLogin, setIsFirstLogin, setJustSignedUp } from 'utils/storage';
 import { clearKeys, getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
 import constants from 'utils/strings/constants';
-import { DeduplicateContextType } from 'types/deduplicating';
 
 const defaultDeduplicateContext: DeduplicateContextType = {
     clubByTime: false,
+    setClubByTime: null,
     fileSizeMap: new Map<number, number>(),
     state: false,
 };
@@ -242,6 +243,7 @@ export default function Deduplicate() {
             value={{
                 ...defaultDeduplicateContext,
                 clubByTime,
+                setClubByTime,
                 fileSizeMap,
                 state: true,
             }}>
@@ -294,13 +296,11 @@ export default function Deduplicate() {
                 )}
 
                 {selected.count > 0 ? (
-                    <SelectedDuplicatesOptions
+                    <SelectedFileOptions
                         setDialogMessage={setDialogMessage}
                         deleteFileHelper={deleteFileHelper}
                         count={selected.count}
                         clearSelection={clearSelection}
-                        clubByTime={clubByTime}
-                        setClubByTime={setClubByTime}
                     />
                 ) : (
                     <div

src/types/deduplicating/index.ts

@@ -1,5 +1,6 @@
 export interface DeduplicateContextType {
     clubByTime: boolean;
+    setClubByTime: (clubByTime: boolean) => void;
     fileSizeMap: Map<number, number>;
     state: boolean;
 }