Merge branch 'collection-ops' into file-loading-single-update

src/pages/gallery/components/AddCollection.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from "react";
 import { Card } from "react-bootstrap";
-import Dropzone from "react-dropzone";
 import styled from "styled-components";
-import { DropDiv } from "./CollectionDropZone";
 import CreateCollection from "./CreateCollection";
+import DropzoneWrapper from "./DropzoneWrapper";
 
 const ImageContainer = styled.div`
     min-height: 192px;
@@ -24,46 +23,26 @@ export default function AddCollection(props) {
     const [acceptedFiles, setAcceptedFiles] = useState<File[]>();
     const [createCollectionView, setCreateCollectionView] = useState(false);
 
-    const { children, closeUploadModal, showUploadModal, ...rest } = props;
+    const { closeUploadModal, showUploadModal, ...rest } = props;
 
     const createCollection = (acceptedFiles) => {
         setAcceptedFiles(acceptedFiles);
         setCreateCollectionView(true);
     };
-
+    const children = (
-    return (
-        <>
-            <Dropzone
-                onDropAccepted={createCollection}
-                onDropRejected={closeUploadModal}
-                onDragOver={showUploadModal}
-                noDragEventsBubbling
-                accept="image/*, video/*"
-            >
-                {({
-                    getRootProps,
-                    getInputProps,
-                    isDragActive,
-                    isDragAccept,
-                    isDragReject,
-                }) => {
-                    return (
-                        <DropDiv
-                            {...getRootProps({
-                                isDragActive,
-                                isDragAccept,
-                                isDragReject,
-                            })}
-                        >
-                            <input {...getInputProps()} />
         <StyledCard>
             <ImageContainer>+</ImageContainer>
             <Card.Text style={{ textAlign: "center" }}>Create New Album</Card.Text>
         </StyledCard>
-                        </DropDiv>
     );
-                }}
+    return (
-            </Dropzone>
+        <>
+            <DropzoneWrapper
+                onDropAccepted={createCollection}
+                onDropRejected={closeUploadModal}
+                onDragOver={showUploadModal}
+                children={children}
+            />
             <CreateCollection
                 {...rest}
                 modalView={createCollectionView}

src/pages/gallery/components/CollectionDropZone.tsx

@@ -1,35 +1,8 @@
 import React from 'react';
-import Dropzone from 'react-dropzone';
-import styled from 'styled-components';
 import UploadService from 'services/uploadService';
 import { getToken } from 'utils/common/key';
+import DropzoneWrapper from './DropzoneWrapper';
 
-export const getColor = (props) => {
-    if (props.isDragAccept) {
-        return '#00e676';
-    }
-    if (props.isDragReject) {
-        return '#ff1744';
-    }
-    if (props.isDragActive) {
-        return '#2196f3';
-    }
-};
-
-export const enableBorder = (props) => (props.isDragActive ? 'dashed' : 'none');
-
-export const DropDiv = styled.div`
-  width:200px;
-  margin:5px;
-  height:230px;
-  color:black;
-  border-width: 2px;
-  border-radius: 2px;
-  border-color: ${(props) => getColor(props)};
-  border-style: ${(props) => enableBorder(props)};
-  outline: none;
-  transition: border 0.24s ease-in-out;
-`;
 
 function CollectionDropZone({
     children,
@@ -53,34 +26,12 @@ function CollectionDropZone({
         setProgressView(false);
     }
     return (
-        <Dropzone
+        <DropzoneWrapper
+            children={children}
             onDropAccepted={upload}
             onDragOver={showModal}
             onDropRejected={closeModal}
-            noDragEventsBubbling
+        />
-            accept="image/*, video/*, application/json, "
-        >
-            {({
-                getRootProps,
-                getInputProps,
-                isDragActive,
-                isDragAccept,
-                isDragReject,
-            }) => {
-                return (
-                    <DropDiv
-                        {...getRootProps({
-                            isDragActive,
-                            isDragAccept,
-                            isDragReject,
-                        })}
-                    >
-                        <input {...getInputProps()} />
-                        {children}
-                    </DropDiv>
-                );
-            }}
-        </Dropzone>
     );
 };
 

src/pages/gallery/components/DropzoneWrapper.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Dropzone from 'react-dropzone';
+import styled from 'styled-components';
+
+export const getColor = (props) => {
+    if (props.isDragAccept) {
+        return '#00e676';
+    }
+    if (props.isDragReject) {
+        return '#ff1744';
+    }
+    if (props.isDragActive) {
+        return '#2196f3';
+    }
+};
+
+export const enableBorder = (props) => (props.isDragActive ? 'dashed' : 'none');
+
+export const DropDiv = styled.div`
+  width:200px;
+  margin:5px;
+  height:230px;
+  color:black;
+  border-width: 2px;
+  border-radius: 2px;
+  border-color: ${(props) => getColor(props)};
+  border-style: ${(props) => enableBorder(props)};
+  outline: none;
+  transition: border 0.24s ease-in-out;
+`;
+
+export function DropzoneWrapper(props) {
+    const { children, ...callbackProps } = props
+    return (
+        <Dropzone
+            noDragEventsBubbling
+            accept="image/*, video/*, application/json, "
+            {...callbackProps}
+        >
+            {({
+                getRootProps,
+                getInputProps,
+                isDragActive,
+                isDragAccept,
+                isDragReject,
+            }) => {
+                return (
+                    <DropDiv
+                        {...getRootProps({
+                            isDragActive,
+                            isDragAccept,
+                            isDragReject,
+                        })}
+                    >
+                        <input {...getInputProps()} />
+                        {children}
+                    </DropDiv>
+                );
+            }}
+        </Dropzone>
+    );
+};
+
+export default DropzoneWrapper;