update collectionSelector to be used seperately from upload service

src/pages/gallery/components/CollectionSelector.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Card, Modal } from 'react-bootstrap';
 import AddCollectionButton from './AddCollectionButton';
 import PreviewCard from './PreviewCard';
-import constants from 'utils/strings/constants';
 import styled from 'styled-components';
-import EnteSpinner from 'components/EnteSpinner';
+import { CollectionAndItsLatestFile } from 'services/collectionService';
 
 export const CollectionIcon = styled.div`
     width: 200px;
@@ -17,35 +16,37 @@ export const CollectionIcon = styled.div`
     outline: none;
 `;
 
-export const LoadingOverlay = styled.div`
-    left: 0;
-    top: 0;
-    outline: none;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    font-weight: 900;
-    position: absolute;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 9000;
-`;
 interface Props {
-    collectionAndItsLatestFile;
-    uploadFiles;
-    collectionSelectorView;
-    closeCollectionSelector;
-    showNextModal;
-    loading;
+    show: boolean;
+    onHide: () => void;
+    directlyShowNextModal: boolean;
+    collectionsAndTheirLatestFile: CollectionAndItsLatestFile[];
+    attributes: {
+        showNextModal: () => void;
+        title: string;
+        callback: (collection) => Promise<void>;
+    };
 }
-function CollectionSelector(props: Props) {
-    const CollectionIcons: JSX.Element[] = props.collectionAndItsLatestFile?.map(
+function CollectionSelector({
+    attributes,
+    directlyShowNextModal,
+    collectionsAndTheirLatestFile,
+    ...props
+}: Props) {
+    useEffect(() => {
+        if (directlyShowNextModal && attributes) {
+            attributes.showNextModal();
+        }
+    }, [attributes]);
+
+    if (!attributes) {
+        return <Modal />;
+    }
+    const CollectionIcons: JSX.Element[] = collectionsAndTheirLatestFile?.map(
         (item) => (
             <CollectionIcon
                 key={item.collection.id}
-                onClick={async () => await props.uploadFiles(item.collection)}
+                onClick={attributes.callback.bind(null, item.collection)}
             >
                 <Card>
                     <PreviewCard
@@ -63,13 +64,12 @@ function CollectionSelector(props: Props) {
 
     return (
         <Modal
-            show={props.collectionSelectorView}
-            onHide={props.closeCollectionSelector}
+            {...props}
             dialogClassName="modal-90w"
             style={{ maxWidth: '100%' }}
         >
             <Modal.Header closeButton>
-                <Modal.Title>{constants.SELECT_COLLECTION}</Modal.Title>
+                <Modal.Title>{attributes.title}</Modal.Title>
             </Modal.Header>
             <Modal.Body
                 style={{
@@ -78,13 +78,8 @@ function CollectionSelector(props: Props) {
                     flexWrap: 'wrap',
                 }}
             >
-                <AddCollectionButton showChoiceModal={props.showNextModal} />
+                <AddCollectionButton showNextModal={attributes.showNextModal} />
                 {CollectionIcons}
-                {props.loading && (
-                    <LoadingOverlay>
-                        <EnteSpinner />
-                    </LoadingOverlay>
-                )}
             </Modal.Body>
         </Modal>
     );