From 6c597570d16432ac7479a9d20dd8d28065a9a3f2 Mon Sep 17 00:00:00 2001
From: abhinav-grd <abhinavk.grd@gmail.com>
Date: Mon, 20 Sep 2021 21:08:14 +0530
Subject: [PATCH] better remove fromCollection

---
 src/components/FullScreenDropZone.tsx         |  4 --
 .../pages/gallery/CollectionSelector.tsx      | 47 ++++++++++---------
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/components/FullScreenDropZone.tsx b/src/components/FullScreenDropZone.tsx
index 09d936b90..58d0102df 100644
--- a/src/components/FullScreenDropZone.tsx
+++ b/src/components/FullScreenDropZone.tsx
@@ -58,10 +58,6 @@ export default function FullScreenDropZone(props: Props) {
         <DropDiv
             {...props.getRootProps({
                 onDragEnter,
-                onDrop: (e) => {
-                    e.preventDefault();
-                    props.showCollectionSelector();
-                },
             })}>
             <input {...props.getInputProps()} />
             {isDragActive && (
diff --git a/src/components/pages/gallery/CollectionSelector.tsx b/src/components/pages/gallery/CollectionSelector.tsx
index 77ae684c4..f115814ac 100644
--- a/src/components/pages/gallery/CollectionSelector.tsx
+++ b/src/components/pages/gallery/CollectionSelector.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Card, Modal } from 'react-bootstrap';
 import styled from 'styled-components';
 import {
@@ -46,6 +46,9 @@ function CollectionSelector({
     collectionsAndTheirLatestFile,
     ...props
 }: Props) {
+    const [collectionToShow, setCollectionToShow] = useState<
+        CollectionAndItsLatestFile[]
+    >([]);
     useEffect(() => {
         if (!attributes) {
             return;
@@ -56,33 +59,33 @@ function CollectionSelector({
         if (collectionsOtherThanFrom.length === 0) {
             props.onHide();
             attributes.showNextModal();
+        } else {
+            setCollectionToShow(collectionsOtherThanFrom);
         }
     }, [props.show]);
 
     if (!attributes) {
         return <Modal />;
     }
-    const CollectionIcons: JSX.Element[] = collectionsAndTheirLatestFile
-        ?.filter((item) => !(item.collection.id === attributes.fromCollection))
-        .map((item) => (
-            <CollectionIcon
-                key={item.collection.id}
-                onClick={() => {
-                    attributes.callback(item.collection);
-                    props.onHide();
-                }}>
-                <CollectionCard>
-                    <PreviewCard
-                        file={item.file}
-                        updateUrl={() => {}}
-                        forcedEnable
-                    />
-                    <Card.Text className="text-center">
-                        {item.collection.name}
-                    </Card.Text>
-                </CollectionCard>
-            </CollectionIcon>
-        ));
+    const CollectionIcons: JSX.Element[] = collectionToShow?.map((item) => (
+        <CollectionIcon
+            key={item.collection.id}
+            onClick={() => {
+                attributes.callback(item.collection);
+                props.onHide();
+            }}>
+            <CollectionCard>
+                <PreviewCard
+                    file={item.file}
+                    updateUrl={() => {}}
+                    forcedEnable
+                />
+                <Card.Text className="text-center">
+                    {item.collection.name}
+                </Card.Text>
+            </CollectionCard>
+        </CollectionIcon>
+    ));
 
     return (
         <Modal