implemented multi file upload

src/components/FamilyAcc/FamilyManage.jsx

@@ -1,21 +1,35 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Layout from "../Partials/Layout";
 import FamilyManageTabs from "./Tabs/FamilyManageTabs";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function FamilyManage() {
   const [selectTab, setValue] = useState("today");
+  let [pageLoading, setPageLoading] = useState(true);
 
   let location = useLocation();
-  let accountDetails = location?.state
+  let navigate = useNavigate();
+  let accountDetails = location?.state;
   //   tab handler
   const filterHandler = (value) => {
     setValue(value);
   };
 
+  useEffect(() => {
+    if (!accountDetails) {
+      navigate("/acc-family", { replace: true });
+    } else {
+      setPageLoading(false);
+    }
+  }, []);
+
   return (
     <Layout>
       {/*<CommonHead />*/}
+      {pageLoading ? (
+        <LoadingSpinner size={8} color="sky-blue" />
+      ) : (
         <div className="notification-page w-full mb-10">
           <div className="notification-wrapper w-full">
             {/* heading */}
@@ -39,6 +53,7 @@ export default function FamilyManage() {
             <FamilyManageTabs accountDetails={accountDetails} />
           </div>
         </div>
+      )}
     </Layout>
   );
 }

src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx

@@ -200,7 +200,6 @@ function ProfileInfo({
   browseProfileImg,
   accountDetails,
 }) {
-  let { firstname, lastname, age } = accountDetails;
   return (
     <div className="flex flex-col items-center gap-6">
       <div className="flex justify-center">
@@ -241,13 +240,13 @@ function ProfileInfo({
       </div>
       <div className="flex flex-col justify-center gap-3 items-center">
         <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-          {firstname}
+          {accountDetails?.firstname}
         </h1>
         <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-          {lastname}
+          {accountDetails?.lastname}
         </h1>
         <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-          {age}
+          {accountDetails?.age}
         </h1>
       </div>
     </div>

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -1,14 +1,18 @@
 import React, { useState } from "react";
 import dataImage2 from "../../../assets/images/data-table-user-2.png";
-
+import { useNavigate, useLocation } from "react-router-dom";
 import { handlePagingFunc } from "../../Pagination/HandlePagination";
 import PaginatedList from "../../Pagination/PaginatedList";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import Icons from "../../Helpers/Icons";
 
 export default function FamilyTasks({ familyData, className, loader }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
 
+  let navigate = useNavigate();
+  let { pathname } = useLocation();
+
   let data = ["1", "2", "3", "4", "5", "6"]; // to be replaced later by result from API CALL
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -20,6 +24,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
     indexOfLastItem
   );
 
+
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
   };
@@ -46,7 +51,10 @@ export default function FamilyTasks({ familyData, className, loader }) {
                       {familyData &&
                         familyData?.result_list &&
                         familyData.result_list.length > 0 &&
-                        currentTask.map((value, index) => (
+                        currentTask.map((value, index) => {
+  // find due date
+  const dueDate = value?.delivery_date.split(" ")[0]
+                          return (
                             <tr
                               key={index}
                               className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
@@ -64,7 +72,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
                                     <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                       {value.title}
                                     </h1>
-                                  <div>{value.description}</div>
+                                    <div className="flex gap-4 items-center">
                                     <span className="text-sm text-thin-light-gray">
                                       Price:{" "}
                                       <span className="text-purple">
@@ -79,36 +87,33 @@ export default function FamilyTasks({ familyData, className, loader }) {
                                       </span>
                                     </span>
                                     <span className="text-sm text-thin-light-gray">
-                                    Expire:{" "}
+                                      Due Date:{" "}
                                       <span className="text-purple">
                                         {" "}
-                                      {value.expire}
+                                        {dueDate}
-                                    </span>
-                                  </span>
-                                  <span className="text-sm text-thin-light-gray">
-                                    Send to:{" "}
-                                    <span className="text-purple">
-                                      {" "}
-                                      {value.job_to}
                                       </span>
                                     </span>
                                     </div>
                                   </div>
+                                </div>
                               </td>
   
                               <td className="text-right py-4 px-2">
                                 <button
                                   type="button"
                                   onClick={() => {
-                                  // setJobPopout({ show: true, data: value });
+                                    navigate("/manage-active-job", {
+                                      state: { ...value, pathname },
+                                    });
                                   }}
                                   className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                 >
-                                View
+                                  <Icons name="right-arrow" />
                                 </button>
                               </td>
                             </tr>
-                        ))}
+                          )
+                        })}
                     </>
                   }
                 </tbody>

src/components/Helpers/Icons.jsx

@@ -468,6 +468,21 @@ export default function Icons({ name }) {
         >
           <rect y="0.823242" width="20" height="2.35294" rx="1.17647" />
         </svg>
+      ) : name === "right-arrow" ? (
+        <svg
+          width="24"
+          height="24"
+          xmlns="http://www.w3.org/2000/svg"
+          // enableBackground="new 0 0 24 24"
+          viewBox="0 0 24 24"
+          className="fill-black dark:fill-white"
+          id="right-arrow"
+        >
+          <path
+            d="M15.5,11.3L9.9,5.6c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l4.9,4.9l-4.9,4.9c-0.2,0.2-0.3,0.4-0.3,0.7c0,0.6,0.4,1,1,1
+      c0.3,0,0.5-0.1,0.7-0.3l5.7-5.7c0,0,0,0,0,0C15.9,12.3,15.9,11.7,15.5,11.3z"
+          ></path>
+        </svg>
       ) : (
         ""
       )}

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -104,49 +104,46 @@ function ActiveJobs(props) {
        setRequestStatus({loading: false, status: false, message: ''})
      }, 5000)
    }
-    // let reqData = new FormData()
 
-    // for(let files of filesToSend){
+   for(let i=0; i<=filesToSend.length-1; i++){ // Loops through files to send array and trigger upload API call
-    //   reqData.append(files.name, files)
-    // }
-    // let reqData={file_size: filesToSend[0].size, file_type: 'image/png', file_data: filesToSend[0], msg_type: 'FILE', contract:props.details.contract}
   
-    // for(let files of filesToSend){
+     const fileToBase64 = async () =>{ // Converts file data to base64 string
-    //   reqData[files.name] = files
-    // }
-
-    const fileToBase64 = async () =>{
        try {
-        const base64String = await convertFileToBase64(filesToSend[0]);
+         const base64String = await convertFileToBase64(filesToSend[i]);
          return base64String;
        } catch (error) {
          return false;
        }
      }
 
-    if(await !fileToBase64()){
+     // if(await !fileToBase64()){
-      return
+     //   return
-    }
+     // }
 
-    let reqData={file_name: filesToSend[0].name, file_size: filesToSend[0].size, file_type: 'image/png', file_data: await fileToBase64(), msg_type: 'FILE', contract:props.details.contract}
+     let reqData={file_name: filesToSend[i].name, file_size: filesToSend[i].size, file_type: 'image/png', file_data: await fileToBase64(), msg_type: 'FILE', contract:props.details.contract}
     
-  console.log(reqData)
      ApiCall.sendFiles(reqData).then((res)=>{
-      if(res.status != 200 || res.data.internal_return < 0){
+       // if(res.status != 200 || res.data.internal_return < 0){
-        setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
+       //   setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
-        return
+       //   return
-      }
+       // }
-      setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
+       // setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
-      props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+       // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
-      setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+       // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
      }).catch(error => {
-      setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
+       // setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
      }).finally(()=>{
+       if(i==filesToSend.length-1){
+         setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
+         setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+         props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
          setTimeout(()=>{
            setRequestStatus({loading: false, status: false, message: ''})
          }, 5000)
+       }
      })
    }
+ }
 
   return (
     <Layout>

src/middleware/AuthRoute.jsx

@@ -26,7 +26,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       navigate("/login", { replace: true }); // redirects user to login page after session expires
     };
 
-    console.log(loadProfileDetails);
     const checkInactivity = setInterval(() => {
       let { account_type } = loadProfileDetails;
       if (account_type === "FAMILY") {

src/services/UsersService.js

@@ -563,7 +563,9 @@ class usersService {
     for (let data in postData) {
       formData.append(data, postData[data]);
     }
-    return this.postAuxEnd("/uploads", formData);
+  //  return this.postAuxEnd("/uploads", formData);
+
+    return this.postAuxEnd("/uploads", postData);
   }
 
   // END POINT TO DELETE  A JOB