Merge branch 'add-item-btn-moved' of WrenchBoard/Users-Wrench into master

src/components/Resources/index.jsx

@@ -136,14 +136,14 @@ export default function Resources(props) {
                     <div className="tab-items">
                       <TabList tabCategories={tab_categories} />
                     </div>
-                    <div style={{ transform: "translateY(-22px)" }}>
+                    {/* <div style={{ transform: "translateY(-22px)" }}>
                       <Link
                         to="/my-uploads"
                         className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
                       >
                         Add My Item
                       </Link>
-                    </div>
+                    </div> */}
                   </div>
                   <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
                 </div>

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 (
+        <>
+        <div className="mb-4 w-full flex justify-end item-center">
+            <Link
+            to="/my-uploads"
+            className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
+            >
+            Add My Item
+            </Link>
+        </div>
         <div
             className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow relative min-h-[520px] ${
                 className || ""
@@ -263,5 +273,6 @@ export default function MyUploadedFiles({ className }) {
                 </table>
             </div>
         </div>
+        </>
     );
 }

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<errorArr.length; i++){
+      //   if(errorArr.includes('img')){
+      //     message+='Please select file to upload'
+      //   }else{
+      //     message+='Item name or decription cannot be empty'
+      //   }
+      // }
+      if(errorArr.length == 1 && errorArr.includes('img')){
+        message='Please select file to upload'
+      }else if (errorArr.length == 1 && !errorArr.includes('img')){
+        message='Item name or description cannot be empty'
+      }else if (errorArr.length > 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 */}
               <div className="mb-6">
                 <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-                  Upload new item
+                {requestStatus.status == null ? 'Create new item' : 'Upload new item'}
                 </h1>
               </div>
               {/**
@@ -289,7 +368,8 @@ export default function UploadProduct() {
                   </div>
                 </div>
                 {/* bottom action */}
-                <div className="w-full h-[120px] bg-red border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                <div className="w-full h-[120px] bg-red border-t border-light-purple dark:border-[#5356fb29]  flex justify-between items-center">
+                  <p className={`px-4 text-sm sm:text-lg ${requestStatus.status ? 'text-green-500' : 'text-red-500'}  tracking-wide`}>{requestStatus.message && requestStatus.message}</p>
                   <div className="flex sm:space-x-4 space-x-2 sm:mr-9 mr-2">
                     <button
                       type="button"
@@ -298,7 +378,7 @@ export default function UploadProduct() {
                     >
                       <span className="border-b dark:border-[#5356fb29]  border-light-red">
                         {" "}
-                        Return
+                        {requestStatus.status == null ? 'Cancel' : 'Return'}
                       </span>
                     </button>
                     {/*<button*/}
@@ -308,12 +388,17 @@ export default function UploadProduct() {
                     {/*>*/}
                     {/*  <span className="text-gradient"> Preview</span>*/}
                     {/*</button>*/}
-                    <Link
+                    {requestStatus.loading ?
-                      to="/"
+                    <LoadingSpinner size='8' color='sky-blue' />
+                    :
+                    <button
+                      // to="/"
+                      onClick={uploadItem}
                       className="sm:w-[126px] h-[46px] w-[100px] flex justify-center items-center btn-gradient sm:text-18 text-sm rounded-full text-white"
                     >
                       Upload
-                    </Link>
+                    </button>
+                    }
                   </div>
                 </div>