Added active file uploads component

Author: lakshya-20

package.json

@@ -29,6 +29,7 @@
     "react-toastify": "^7.0.4",
     "reactstrap": "^8.9.0",
     "styled-components": "^5.3.0",
+    "uuid": "^8.3.2",
     "web-vitals": "^1.1.1"
   },
   "scripts": {

src/App.js

@@ -7,6 +7,7 @@ import Footer from './Components/Footer';
 import './App.css';
 import AuthContextProvider from './Context/Contexts/AuthContext';
 import FileContextProvider from './Context/Contexts/FileContext';
+import FileUploadContextProvider from './Context/Contexts/FileUploadContext';
 
 require('dotenv').config()
 
@@ -15,10 +16,12 @@ function App() {
     <div className="App">
       <AuthContextProvider>
         <BrowserRouter>
-          <FileContextProvider>
+          <FileContextProvider>            
             <Header/>
             <div className="routing-wrapper">
-              <Routing/>
+              <FileUploadContextProvider>
+                <Routing/>
+              </FileUploadContextProvider>
             </div>
             <Footer/>
           </FileContextProvider>

src/Components/FileComponents/FileForm.js

@@ -3,12 +3,13 @@ import * as FileActionCreators from '../../Context/ActionCreators/FileActionCrea
 import * as AuthActionCreators from '../../Context/ActionCreators/AuthActionCreater';
 import { FileContext } from '../../Context/Contexts/FileContext';
 import { AuthContext } from '../../Context/Contexts/AuthContext';
+import { FileUploadContext } from '../../Context/Contexts/FileUploadContext';
+import * as FileUploadActionCreators from '../../Context/ActionCreators/FileUploadActionCreater';
 import axios from '../../utils/axios';
 import { toast } from 'react-toastify';
 import {useDropzone} from 'react-dropzone';
-import getFileSize from '../../utils/fileSize';
 import getFileType from '../../utils/fileType';
-
+import { v4 as uuidv4 } from 'uuid';
 if((typeof TextDecoder==='undefined' || typeof TextEncoder==='undefined') && typeof require!=='undefined'){
     global.TextDecoder = require('util').TextDecoder
     global.TextEncoder = require('util').TextEncoder
@@ -33,48 +34,15 @@ const img = {
     height: '50px',
     width: '50px'
 };
-const FileForm = ({setCurrentPage}) => {
-    const {fileState, fileDispatch} = useContext(FileContext)
+const FileForm = ({setCurrentPage, toggleFileFormModal, toggleFileUploadStatusModal}) => {
+    const {fileState, fileDispatch} = useContext(FileContext);
+    const {fileUploadDispatch} = useContext(FileUploadContext);
     const {authState} = useContext(AuthContext);
     const [files,setFiles] = useState([]);    
-    const [isDragActive, setIsDragActive] = useState(true);
     useEffect(()=>{
         series(files[0],0);
     },[files])
-    const setStatus = (index, status, URL=undefined) =>{
-        const temp = files;
-        temp[index].file_status = status;
-        if(URL){
-            temp[index].default = process.env.REACT_APP_FRONTENDURL+"/"+URL;
-        }
-        setFiles(temp);
-    }
-    const renderStatus = (status, URL) =>{
-        if(status=="uploaded"){
-            return(
-                <>
-                <span className="fa fa-clipboard mx-2" role="button" onClick={() => {navigator.clipboard.writeText(URL)}}></span>                          
-                <span className="text-success">
-                    <i className="fa fa-check-circle fa-lg"></i>
-                </span>
-                </>
-            )
-        }
-        else if(status=="uploading"){
-            return(
-                <div class="spinner-grow" role="status">
-                    <span class="sr-only">Loading...</span>
-                </div>
-            )
-        }
-        else if(status=="error"){
-            return(
-                <span className="text-danger">
-                    <i class="fa fa-exclamation-circle fa-lg"></i>
-                </span>
-            )
-        }
-    }
+
     async function getBuffer(file){
         const reader=new window.FileReader();
         return new Promise((resolve,reject)=>{
@@ -87,7 +55,8 @@ const FileForm = ({setCurrentPage}) => {
     }
     const series = (file,index) =>{
         if(file){
-            setIsDragActive(false);
+            toggleFileFormModal();
+            toggleFileUploadStatusModal();
             handleSubmit(file,index,()=>{
                 series(files[index+1],index+1);
             });
@@ -114,12 +83,9 @@ const FileForm = ({setCurrentPage}) => {
             fileDispatch(FileActionCreators.updateStartDate(undefined));
             FileActionCreators.loadFiles(fileDispatch,1,undefined,fileState.searchParam);      
             setCurrentPage(1);
-            setIsDragActive(true);
         }
     }
     const handleSubmit = async (file,i,callback)=>{        
-        const index=i
-        
         try{
             if(file==undefined){
                 throw new Error("Invalid File")
@@ -140,69 +106,47 @@ const FileForm = ({setCurrentPage}) => {
             if(response.data.error){
                 throw new Error(response.data.error);
             }
-            setStatus(index, "uploaded", response.data.body.default);
+            file.file_status = "uploaded";
+            file.default = response.data.body.default;
+            fileUploadDispatch(FileUploadActionCreators.fileUploadStateUpdateFile(file))
             authState.auth.storage_used+=fileData.size
             authState.auth.storage_used=parseFloat(authState.auth.storage_used.toFixed(4))
             AuthActionCreators.authStateUpdate(authState);
             localStorage.setItem("auth",JSON.stringify(authState.auth));
             callback();
         } catch(err){
             toast.error(err.message);
-            setStatus(index, "error");
+            file.status = "error";
+            fileUploadDispatch(FileUploadActionCreators.fileUploadStateUpdateFile(file))
             callback();
         }
     }
 
 
     const {getRootProps,getInputProps} = useDropzone({
         onDrop: acceptedFiles => {
-            setFiles(acceptedFiles.map(file => Object.assign(file, {
+            const fileData = acceptedFiles.map(file => Object.assign(file, {
                 preview: URL.createObjectURL(file),
                 file_type: getFileType(file.name),
                 file_name: file.name,
                 file_size: file.size,
-                file_status: "uploading"
-            })));
+                file_status: "uploading",
+                file_id: uuidv4()
+            }))
+            fileUploadDispatch(FileUploadActionCreators.fileUploadStateAddFiles(fileData));
+            setFiles(fileData);
+            
         }
     });
-    const thumbFile = (file) =>{
-        return(
-            <div className="d-flex justify-content-between align-items-center">
-                <div className="p-1 d-flex flex-row align-items-center">
-                    <img src={file.preview} style={img} alt="file"/>            
-                    <span>
-                        <span className="px-2 font-weight-bold text-monospace">{file.file_name}</span>    
-                        <span className="badge badge-info">{getFileSize(file.file_size)}</span>                
-                    </span>
-                </div>
-                <span>
-                    {renderStatus(file.file_status, file.default)}
-                </span>
-            </div>
-        )
-    }
-    const thumbs = files.map(file => {
-        return(
-            thumbFile(file)
-        )
-    });
     return ( 
         <div className="text-center">   
-            {isDragActive?         
-                <div {...getRootProps({style:baseStyle})}>
-                    <input {...getInputProps()} />                
-                    <div className="">
-                        <img src="https://res.cloudinary.com/code-gambit/image/upload/v1621421198/Web%20App/file_40x40_sea3kj.png"/>
-                        <br></br>
-                        <p>Drag and Drop your files here</p>
-                    </div>
+            <div {...getRootProps({style:baseStyle})}>
+                <input {...getInputProps()} />                
+                <div className="">
+                    <img src="https://res.cloudinary.com/code-gambit/image/upload/v1621421198/Web%20App/file_40x40_sea3kj.png"/>
+                    <br></br>
+                    <p>Drag and Drop your files here</p>
                 </div>
-            :
-                ""
-            }  
-            <div>
-                
-                {thumbs}
             </div>
         </div>
 

src/Components/FileComponents/FileUploadStatus.js

@@ -0,0 +1,69 @@
+import React, { useContext, useEffect } from 'react';
+import { FileUploadContext } from '../../Context/Contexts/FileUploadContext';
+import getFileSize from '../../utils/fileSize';
+import {UncontrolledTooltip} from 'reactstrap';
+import getFileIconURL from '../../utils/fileIcon';
+const img = {
+    display: 'block',
+    height: '50px',
+    width: '50px'
+};
+const renderStatus = (status, URL, id) =>{
+    if(status === "uploaded"){
+        return(
+            <div className="d-flex flex-row">
+                <span className="fa fa-clipboard mx-2" role="button" 
+                    onClick={() => {navigator.clipboard.writeText(process.env.REACT_APP_FRONTENDURL+"/"+URL)}}
+                    id={"copyURL"+id}
+                ></span>                          
+                <UncontrolledTooltip placement="left" target={"copyURL"+id}>
+                    Copy URL
+                </UncontrolledTooltip>
+                <span className="text-success">
+                    <i className="fa fa-check-circle fa-lg"></i>
+                </span>
+            </div>
+        )
+    }
+    else if(status === "uploading"){
+        return(
+            <div class="spinner-grow" role="status">
+                <span class="sr-only">Loading...</span>
+            </div>
+        )
+    }
+    else if(status === "error"){
+        return(
+            <span className="text-danger">
+                <i class="fa fa-exclamation-circle fa-lg"></i>
+            </span>
+        )
+    }
+}
+const thumbFile = (file) =>{
+    return(
+        <div className="d-flex justify-content-between align-items-center my-1">
+            <img src={getFileIconURL(file.file_name)} style={img} alt="file"/>                  
+            <span className="font-weight-bold">{file.file_name}</span>
+            <div className="d-flex align-items-center">
+                <span className="badge badge-info">{getFileSize(file.file_size)}</span>
+                {renderStatus(file.file_status, file.default, file.id)}
+            </div>
+        </div>
+    )
+}
+const FileUploadStatus = () => {
+    const {fileUploadState} = useContext(FileUploadContext);
+    const thumbs = fileUploadState.files.map(file => {
+        return(
+            thumbFile(file)
+        )
+    });
+    return ( 
+        <div>
+            {thumbs}
+        </div>
+     );
+}
+ 
+export default FileUploadStatus;

src/Components/Screens/FileList.js

@@ -2,16 +2,19 @@ import React, { useContext, useEffect, useState} from 'react';
 import { Row, Modal, ModalHeader, ModalBody, 
     Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import { FileContext } from '../../Context/Contexts/FileContext';
+import { FileUploadContext } from '../../Context/Contexts/FileUploadContext';
 import * as FileActionCreators from '../../Context/ActionCreators/FileActionCreator';
 import FileForm from '../FileComponents/FileForm';
 import RenderFile from '../FileComponents/FileCard';
 import { Loading } from '../Loading';
 import FileDateFilter from '../FileComponents/FileDateFilter';
-
+import FileUploadStatus from '../FileComponents/FileUploadStatus';
 const FileList = () => {
     const {fileState,fileDispatch} = useContext(FileContext);
+    const {fileUploadState} = useContext(FileUploadContext);
     const [isFileFormOpen,setIsFileFormOpen] = useState(false);
     const [isFileDateFilterOpen, setIsFileDateFilterOpen] = useState(false);
+    const [isFileUploadStatusModalOpen, setIsFileUploadStatusModalOpen] = useState(false);
     const [currentPage, setCurrentPage] = useState(fileState.currentPage);
     const [lastEKMap, setLastEKMap] = useState(fileState.lastEKMap);
     const [searchParam,setSearchParam] = useState(undefined);
@@ -45,11 +48,14 @@ const FileList = () => {
     }
 
     const toggleFileFormModal = ()=>{
-        setIsFileFormOpen(!isFileFormOpen)        
+        setIsFileFormOpen(!isFileFormOpen);
     }
     const toggleFileDateFilterModal = () =>{
         setIsFileDateFilterOpen(!isFileDateFilterOpen);
     }
+    const toggleFileUploadStatusModal = () => {
+        setIsFileUploadStatusModalOpen(!isFileUploadStatusModalOpen);
+    }
     function goToNextPage(){
         setCurrentPage(fileState.currentPage+1);                  
     }
@@ -166,27 +172,46 @@ const FileList = () => {
         <div className="container">
             <h3 className="text-center pt-2">YOUR FILES</h3>
             <div className="d-flex justify-content-between align-items-center p-2">                
-                <div type="button" onClick={toggleFileFormModal}>
-                    <i class="fa fa-plus fa-lg"></i>
-                </div>  
+                <div className="d-flex justify-content-between col-3">
+                    <div type="button" onClick={toggleFileFormModal}>
+                        <i class="fa fa-plus fa-lg"></i>
+                    </div> 
+                    {fileUploadState.files.length>0?
+                        <div type="button" onClick={toggleFileUploadStatusModal}>
+                            <i class="fa fa-upload"></i>
+                        </div>
+                    :
+                        ""
+                    } 
+                </div>
                 <div>
-                    {renderFilters()}    
+                    {renderFilters()}
                 </div>                                                                                         
             </div>
             <Modal isOpen={isFileFormOpen} toggle={toggleFileFormModal} className="modal-dialog-centered">
                 {/* <ModalHeader toggle={toggleFileFormModal}>Upload your files</ModalHeader>                 */}
                 <ModalBody className="text-center modal-wrapper">
-                    <FileForm setCurrentPage={setCurrentPage}/>
+                    <FileForm 
+                        setCurrentPage = {setCurrentPage} 
+                        toggleFileFormModal = {toggleFileFormModal}
+                        toggleFileUploadStatusModal = {toggleFileUploadStatusModal}
+                    />
                 </ModalBody>
             </Modal>
             <Modal isOpen={isFileDateFilterOpen} toggle={toggleFileDateFilterModal}>
-                <ModalHeader>Filter By Date</ModalHeader>
+                <ModalHeader toggle={toggleFileDateFilterModal}>Filter By Date</ModalHeader>
                 <ModalBody>
                     <div className="text-center">
                         <FileDateFilter toggle={toggleFileDateFilterModal}/>
                     </div>
                 </ModalBody>
             </Modal> 
+            <Modal isOpen={isFileUploadStatusModalOpen} toggle={toggleFileUploadStatusModal} className="modal-dialog-centered">
+                <ModalHeader toggle={toggleFileUploadStatusModal}>File Uploads</ModalHeader>
+                <ModalBody className="text-center modal-wrapper">
+                    <FileUploadStatus/>
+                </ModalBody>
+            </Modal>
             <div>
                 {renderData()}
             </div>

src/Context/ActionCreators/FileUploadActionCreater.js

@@ -1,18 +1,10 @@
 import * as ActionTypes from '../ActionTypes';
-//import axios from 'axios';
-import axios from '../../utils/axios'
-import { toast } from 'react-toastify';
 
 export const fileUploadStateAddFiles=(fileArray)=>({
     type:ActionTypes.FILE_UPLOAD_STATE_ADD_FILES,
     payload:fileArray
 })
 
-export const fileUploadStateUpdateFiles=(fileArray)=>({
-    type:ActionTypes.FILE_UPLOAD_STATE_UPDATE_FILES,
-    payload:fileArray
-})
-
 export const fileUploadStateResetFiles = () => ({
     type: ActionTypes.FILE_UPLOAD_STATE_RESET_FILES
 })