From 5b39e751198df40c3fd279489518f70d7c71705b Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 8 Aug 2023 22:06:44 +0100 Subject: [PATCH 1/2] Add item button moved down --- src/components/Resources/index.jsx | 4 +- .../Resources/tabs/MyUploadedFiles.jsx | 11 ++ src/components/UploadProduct/index.jsx | 101 ++++++++++++++++-- 3 files changed, 106 insertions(+), 10 deletions(-) diff --git a/src/components/Resources/index.jsx b/src/components/Resources/index.jsx index 8752a34..42ec779 100644 --- a/src/components/Resources/index.jsx +++ b/src/components/Resources/index.jsx @@ -136,14 +136,14 @@ export default function Resources(props) {
-
+ {/*
Add My Item -
+
*/}
diff --git a/src/components/Resources/tabs/MyUploadedFiles.jsx b/src/components/Resources/tabs/MyUploadedFiles.jsx index bbedb02..53df8d9 100644 --- a/src/components/Resources/tabs/MyUploadedFiles.jsx +++ b/src/components/Resources/tabs/MyUploadedFiles.jsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import dataImage1 from "../../../assets/images/data-table-user-1.png"; import dataImage2 from "../../../assets/images/data-table-user-2.png"; +import { Link } from "react-router-dom"; // import dataImage3 from "../../../assets/images/data-table-user-3.png"; // import dataImage4 from "../../../assets/images/data-table-user-4.png"; // import SelectBox from "../Helpers/SelectBox"; @@ -9,6 +10,15 @@ export default function MyUploadedFiles({ className }) { const filterCategories = ["All Categories", "Explore", "Featured"]; const [selectedCategory, setCategory] = useState(filterCategories[0]); return ( + <> +
+ + Add My Item + +
+ ); } diff --git a/src/components/UploadProduct/index.jsx b/src/components/UploadProduct/index.jsx index 31b3d45..84a1e03 100644 --- a/src/components/UploadProduct/index.jsx +++ b/src/components/UploadProduct/index.jsx @@ -5,8 +5,11 @@ import ModalCom from "../Helpers/ModalCom"; import Layout from "../Partials/Layout"; // import DropFileWidget from "./DropFileWidget"; import ProductUploadField from "./ProductUploadField"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import usersService from "../../services/UsersService"; export default function UploadProduct() { + const apiCall = new usersService() // preview modal const [previewProductModal, setPreviewProductModal] = useState(false); // cancelUploadModal @@ -68,10 +71,14 @@ export default function UploadProduct() { }; const fileSelect = useRef(null); const fileRef = useRef(null); - const [selectedFile, setSelectedFile] = useState(""); + const [selectedFile, setSelectedFile] = useState(''); + // const [selectedFile, setSelectedFile] = useState({name: '', size: ''}); const [img, setImg] = useState(null); + const [imgDetails, setImgDetails] = useState('') const changeFile = (e, file) => { if (e) { + setSelectedFile(e.target.files[0].name); + setImgDetails(e?.target?.files[0]) const imgRead = new FileReader(); imgRead.onload = (event) => { setImg(event.target.result); @@ -81,7 +88,8 @@ export default function UploadProduct() { } if (file) { if (file[0].name) { - setSelectedFile(file[0].name); + setSelectedFile(file?.[0].name); + setImgDetails(file?.[0]) const imgRead = new FileReader(); imgRead.onload = (event) => { setImg(event.target.result); @@ -92,6 +100,77 @@ export default function UploadProduct() { } }; + const [requestStatus, setRequestStatus] = useState({loading: false, status: null, message: ''}) + //FUNCTION TO UPLOAD ITEM + const uploadItem = () => { + let errorArr = [] + let uploadInfo = { // SUBMITTED DETAILS FROM USER + img, + itemName, + description + } + //LOOPS THROUGH ITEM DETAILS FOR EMPTINESS + for(let info in uploadInfo){ + if(!uploadInfo[info]){ + errorArr.push(info) + } + } + + // TEST TO SEE IF FIELDS ARE EMPTY + if(errorArr.length){ + let message = '' + // for(let i = 0; i 1 && errorArr.includes('img')){ + message='Please select file to upload & Item name/description cannot be empty' + }else { + message='Item name/description cannot be empty' + } + setRequestStatus({loading: false, status: null, message}) + return setTimeout(()=>{ + setRequestStatus({loading: false, status: false, message: ''}) + },5000) + } + + if(imgDetails.size > 2097152){ // CHECKS IF IMAGE SIZE IS MORE THAN "MB" + setRequestStatus({loading: false, status: null, message: 'Image must be less than 2MB'}) + return setTimeout(()=>{ + setRequestStatus({loading: false, status: false, message: ''}) + },5000) + } + + let reqData = { // PAYLOAD FOR API CALL + file_name: selectedFile, + file_size: imgDetails.size, + file_type: imgDetails.type, + file_data: img, + item_name: itemName, + item_description: description, + msg_type: 'FILE', + action: 'WRENCHBOARD_RESOURCE_MYFILES' + action: 11307 + } + console.log('TESTING', reqData) + setRequestStatus({loading: true, status: null, message: ''}) + + //API CALL TO UPLOAD COMES HERE + setTimeout(()=>{ + setRequestStatus({loading: false, status: true, message: 'Bad'}) + },3000) + setTimeout(()=>{ + setRequestStatus({loading: false, status: false, message: ''}) + },7000) + } + // drop event function handleDrop(e) { const dt = e.dataTransfer; @@ -167,7 +246,7 @@ export default function UploadProduct() { {/* heading */}

- Upload new item + {requestStatus.status == null ? 'Create new item' : 'Upload new item'}

{/** @@ -289,7 +368,8 @@ export default function UploadProduct() { {/* bottom action */} -
+
+

{requestStatus.message && requestStatus.message}

{/**/} {/* Preview*/} {/**/} - + : + + }
From 4b9289cb8e34743ad1750171ba69f1d2e1d730fd Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 8 Aug 2023 22:15:09 +0100 Subject: [PATCH 2/2] bug fix --- src/components/UploadProduct/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UploadProduct/index.jsx b/src/components/UploadProduct/index.jsx index 84a1e03..3d9c3d0 100644 --- a/src/components/UploadProduct/index.jsx +++ b/src/components/UploadProduct/index.jsx @@ -156,7 +156,7 @@ export default function UploadProduct() { item_name: itemName, item_description: description, msg_type: 'FILE', - action: 'WRENCHBOARD_RESOURCE_MYFILES' + // action: 'WRENCHBOARD_RESOURCE_MYFILES', action: 11307 } console.log('TESTING', reqData)