updated passed collection prop to collectionLatestFile

src/pages/gallery/components/CollectionSelector.tsx

@@ -2,23 +2,38 @@ import React from 'react';
 import { Button, Card, Col, Container, Modal, Row } from 'react-bootstrap';
 import FileUpload from './DragAndDropUpload';
 
-function CollectionSelector({ modalView, closeModal, collections }) {
-  const CollectionIcons = collections.map((item) => (
-    <FileUpload closeModal={closeModal} collection={item} noDragEventsBubbling>
+function CollectionSelector({ modalView, closeModal, collectionLatestFile }) {
+
+  const CollectionIcons = collectionLatestFile.map((item) => (
+    <FileUpload
+      closeModal={closeModal}
+      collectionLatestFile={item}
+      noDragEventsBubbling
+    >
       <Card
         style={{
           margin: '5px',
           padding: '5px',
-          width: 'auto',
-          height: 'auto',
+          width: '95%',
+          height: '150px',
           position: 'relative',
           border: 'solid',
-          overflow: 'auto',
           float: 'left',
           cursor: 'pointer',
         }}
       >
-        <Card.Body>{item.name}</Card.Body>{' '}
+        <Card.Img
+          variant='top'
+          src={item.thumb}
+          style={{ width: '100%', height: '100%' }}
+        />
+        <Card.Body
+          style={{
+            padding: '5px',
+          }}
+        >
+          {item.collectionName}
+        </Card.Body>{' '}
       </Card>
     </FileUpload>
   ));

src/pages/gallery/components/DragAndDropUpload.tsx

@@ -1,8 +1,6 @@
-import { close } from 'inspector';
 import React from 'react';
 import Dropzone from 'react-dropzone';
 import styled from 'styled-components';
-import CollectionSelector from './CollectionSelector';
 
 const getColor = (props) => {
   if (props.isDragAccept) {
@@ -36,14 +34,14 @@ const FileUpload = ({
   noClick = null,
   closeModal = null,
   showModal = null,
-  collection = null,
-  noDragEventsBubbling,
+  collectionLatestFile = null,
+  noDragEventsBubbling = null,
 }) => {
   return (
     <>
       <Dropzone
         onDrop={(acceptedFiles) => {
-          console.log(collection.name);
+          console.log(collectionLatestFile.collectionName);
           closeModal();
         }}
         noClick={noClick}