Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into pending-jobs-pop-apis

.env

@@ -18,6 +18,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=300000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000

.env.development

@@ -18,6 +18,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=300000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000

.env.production

@@ -18,6 +18,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/svs/user"
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=300000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -29,6 +29,10 @@ function ActiveJobs(props) {
   // FUNCTION TO HANDLE FILE UPlOAD CHANGE
   const handleFileChange = ({target:{files}}) => {
     setRequestStatus({loading: false, status: false, message: ''}) // State to determine error state
+   
+    if(!files[0]) { // IF NO FILE SELECTED RETURN
+      return
+    }
     if(files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)){
       setRequestStatus({loading: false, status: false, message: 'File must be <= 1mb'})
       setTimeout(()=>{
@@ -90,6 +94,60 @@ function ActiveJobs(props) {
     })
   }
 
+   // FUNCTION TO SEND FILES
+   const sendFile = async () => {
+     setRequestStatus({loading: true, status: false, message: ''})
+
+     if(!filesToSend.length){ // checks if file to send is empty
+      setRequestStatus({loading: false, status: false, message: 'No File(s) selected'})
+      return setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: ''})
+      }, 5000)
+    }
+    // let reqData = new FormData()
+    
+    // for(let files of filesToSend){
+    //   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){
+    //   reqData[files.name] = files
+    // }
+
+    const fileToBase64 = async () =>{
+      try {
+        const base64String = await convertFileToBase64(filesToSend[0]);
+        return base64String;
+      } catch (error) {
+        return false;
+      }
+    }
+
+    if(await !fileToBase64()){
+      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}
+
+  console.log(reqData)
+    ApiCall.sendFiles(reqData).then((res)=>{
+      if(res.status != 200 || res.data.internal_return < 0){
+        setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
+        return
+      }
+      setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
+      props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+      setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+    }).catch(error => {
+      setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
+    }).finally(()=>{
+      setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: ''})
+      }, 5000)
+    })
+  }
+
   return (
     <Layout>
 
@@ -198,7 +256,7 @@ function ActiveJobs(props) {
                     <div className="p-4 w-full h-[300px] text-base text-slate-600 border border-slate-300">
                       <div className="files">
                         <label htmlFor="file" className="h-20 btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer">Select Files to Upload</label>
-                        <input type="file" id='file' style={{display: 'none'}} onChange={handleFileChange}/>
+                        <input type="file" id='file' accept="image/*" style={{display: 'none'}} onChange={handleFileChange}/>
                       </div>
                       <div className="selected_file my-2">
                         {filesToSend.length > 0 &&
@@ -267,15 +325,21 @@ function ActiveJobs(props) {
                     {tab == 'files' ? 
                       (
                         <button
-                          onClick={()=>{console.log('working')}}
+                          onClick={sendFile}
                           type="button"
                           className="btn-gradient text-base tracking-wide px-4 py-3 rounded-full flex justify-center items-center"
                         >
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
-                            <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
-                          </svg>
+                          {requestStatus.loading ? 
+                            <LoadingSpinner size='6' color='sky-blue' />
+                            :
+                            <>
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
+                                <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
+                              </svg>
 
-                          <span className="text-white">Upload Files</span>
+                              <span className="text-white">Upload Files</span>
+                            </>
+                          }
                         </button>
                       )
                       :
@@ -319,3 +383,22 @@ function ActiveJobs(props) {
 }
 
 export default ActiveJobs;
+
+
+function convertFileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const base64String = reader.result.split(',')[1];
+      resolve(base64String);
+    };
+
+    reader.onerror = error => {
+      reject(error);
+    };
+
+    reader.readAsDataURL(file);
+  });
+}
+

src/components/Partials/Header.jsx

@@ -100,7 +100,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
   // User Profile
   let { firstname, lastname, email, profile_pic } = userDetails;
-  let userEmail = email.split("@")[0];
+  let userEmail = email?.split("@")[0];
 
   return (
     <>

src/components/Partials/RightSideBar.jsx

@@ -89,7 +89,7 @@ export default function RightSideBar() {
               {/* image */}
               <div className="w-8 h-8 rounded-full">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="InternationalUser">
-                    <path fill="#e6e7f9" d="M38.5 31.1c2.1-1.1 3.9-2.5 5.4-4.4h-3.2c-.6 1.6-1.3 3.1-2.2 4.4zm-5.8 1.4c2-.7 3.7-2.8 4.9-5.8h-4.9v5.8zm8.8-8.6h4.2c.9-1.8 1.5-3.7 1.7-5.8h-5.1c-.1 2-.4 4-.8 5.8zm2.4-17.3c-1.5-1.8-3.3-3.3-5.4-4.4.8 1.2 1.6 2.7 2.2 4.4h3.2zm-5.3 2.9h-5.9v5.8h6.7c-.1-2.1-.4-4.1-.8-5.8zm3.7 5.8h5.1c-.2-2.1-.8-4-1.7-5.8h-4.2c.4 1.8.7 3.7.8 5.8zM32.7.8v5.8h4.9c-1.2-2.9-2.9-5.1-4.9-5.8zm6.7 17.3h-6.7v5.8h5.9c.4-1.8.7-3.8.8-5.8zM25 6.6h4.9V.8c-2 .7-3.7 2.9-4.9 5.8zm-1.8 8.7h6.7V9.5H24c-.4 1.7-.7 3.7-.8 5.8zm6.7 17.2v-5.8H25c1.2 3 2.9 5.1 4.9 5.8zM24.1 2.3c-2.1 1.1-3.9 2.5-5.4 4.4H22c.5-1.7 1.3-3.2 2.1-4.4zM24 23.9h5.9v-5.8h-6.7c.1 2 .4 4 .8 5.8z" class="colorc1e5ff svgShape"></path><path fill="#ff6699" d="M3.7 44.7c0 1.6 1.2 2.8 2.8 2.8 1.3 0 2.4-.9 2.7-2.2.3 1.3 1.4 2.2 2.7 2.2 1.5 0 2.8-1.3 2.8-2.8V30.1h3.1V18.8c0-4.2-3.3-7.5-7.4-7.5H8c-4.1 0-7.4 3.4-7.4 7.5v11.3h3.1v14.6z" class="colorff99b0 svgShape"></path><path fill="#998da0" d="M9.2 10.3c2.4 0 4.4-2.2 4.4-4.9S11.6.5 9.2.5C6.8.5 4.8 2.7 4.8 5.4s2 4.9 4.4 4.9z" class="colorffd499 svgShape"></path><path fill="#e6e7f9" d="M16.9 9.5c-.3.6-.5 1.2-.8 1.8 1.3 1 2.3 2.4 2.9 4h1.3c.1-2 .3-4 .8-5.8h-4.2zm2.9 9.3v5.1h1.4c-.4-1.8-.7-3.8-.8-5.8h-.6c-.1.2 0 .4 0 .7zm2.2 7.9h-2.2v1.2c1.3 1.3 2.7 2.4 4.4 3.2-.9-1.3-1.7-2.8-2.2-4.4z" class="colorc1e5ff svgShape"></path>
+                    <path fill="#e6e7f9" d="M38.5 31.1c2.1-1.1 3.9-2.5 5.4-4.4h-3.2c-.6 1.6-1.3 3.1-2.2 4.4zm-5.8 1.4c2-.7 3.7-2.8 4.9-5.8h-4.9v5.8zm8.8-8.6h4.2c.9-1.8 1.5-3.7 1.7-5.8h-5.1c-.1 2-.4 4-.8 5.8zm2.4-17.3c-1.5-1.8-3.3-3.3-5.4-4.4.8 1.2 1.6 2.7 2.2 4.4h3.2zm-5.3 2.9h-5.9v5.8h6.7c-.1-2.1-.4-4.1-.8-5.8zm3.7 5.8h5.1c-.2-2.1-.8-4-1.7-5.8h-4.2c.4 1.8.7 3.7.8 5.8zM32.7.8v5.8h4.9c-1.2-2.9-2.9-5.1-4.9-5.8zm6.7 17.3h-6.7v5.8h5.9c.4-1.8.7-3.8.8-5.8zM25 6.6h4.9V.8c-2 .7-3.7 2.9-4.9 5.8zm-1.8 8.7h6.7V9.5H24c-.4 1.7-.7 3.7-.8 5.8zm6.7 17.2v-5.8H25c1.2 3 2.9 5.1 4.9 5.8zM24.1 2.3c-2.1 1.1-3.9 2.5-5.4 4.4H22c.5-1.7 1.3-3.2 2.1-4.4zM24 23.9h5.9v-5.8h-6.7c.1 2 .4 4 .8 5.8z" className="colorc1e5ff svgShape"></path><path fill="#ff6699" d="M3.7 44.7c0 1.6 1.2 2.8 2.8 2.8 1.3 0 2.4-.9 2.7-2.2.3 1.3 1.4 2.2 2.7 2.2 1.5 0 2.8-1.3 2.8-2.8V30.1h3.1V18.8c0-4.2-3.3-7.5-7.4-7.5H8c-4.1 0-7.4 3.4-7.4 7.5v11.3h3.1v14.6z" className="colorff99b0 svgShape"></path><path fill="#998da0" d="M9.2 10.3c2.4 0 4.4-2.2 4.4-4.9S11.6.5 9.2.5C6.8.5 4.8 2.7 4.8 5.4s2 4.9 4.4 4.9z" className="colorffd499 svgShape"></path><path fill="#e6e7f9" d="M16.9 9.5c-.3.6-.5 1.2-.8 1.8 1.3 1 2.3 2.4 2.9 4h1.3c.1-2 .3-4 .8-5.8h-4.2zm2.9 9.3v5.1h1.4c-.4-1.8-.7-3.8-.8-5.8h-.6c-.1.2 0 .4 0 .7zm2.2 7.9h-2.2v1.2c1.3 1.3 2.7 2.4 4.4 3.2-.9-1.3-1.7-2.8-2.2-4.4z" className="colorc1e5ff svgShape"></path>
                   </svg>
               </div>
               {/* name */}

src/components/jobPopout/PendingJobsPopout.jsx

@@ -1,46 +1,63 @@
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import Detail from "./popoutcomponent/Detail";
 import ModalCom from "../Helpers/ModalCom";
 import usersService from "../../services/UsersService";
+import { toast } from "react-toastify";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+const showSuccessToast = (message) => {
+  toast.success(message, {
+    autoClose: 3000,
+    hideProgressBar: true,
+  });
+};
 
 function PendingJobsPopout({ details, onClose, situation }) {
-  const [pendingJobLoader, setPendingJobLoader] = useState(false)
+  const [pendingJobLoader, setPendingJobLoader] = useState({
+    extend: false,
+    offer: false,
+  });
   const apiCall = useMemo(() => new usersService(), []);
-  
-  const handlePendingJobsBtn = async ({ target: { name } }) => {
-    setPendingJobLoader(true)
-    let { job_uid, offer_code } = details;
 
-    let reqData;
+  const handlePendingJobsBtn = useCallback(
+    async ({ target: { name } }) => {
+      let { job_uid, offer_code } = details;
 
-    let pendingData = { job_uid, offer_code };
+      let reqData;
+
+      let pendingData = { job_uid, offer_code };
 
-    if (name === "extend") {
       try {
-        reqData = { ...pendingData };
-        let { data } = await apiCall.pendingJobExtend(reqData);
-        console.log("This is for extend", data);
-        setPendingJobLoader(false)
+        if (name === "extend") {
+          setPendingJobLoader({ extend: true });
+          reqData = { ...pendingData };
+          // let { data } =
+          await apiCall.pendingJobExtend(reqData);
+          // console.log("This is for extend", data);
+          showSuccessToast("Job has been extended by a week!");
+        } else if (name === "offer") {
+          setPendingJobLoader({ offer: true });
+          reqData = { ...pendingData };
+          // let { data } =
+          await apiCall.pendingJobSendTome(reqData);
+          // console.log("This is for offer", data);
+          showSuccessToast("Offer sent, check your email");
+        } else return;
+
+        setTimeout(() => {
+          setPendingJobLoader({ extend: false, offer: false });
+          onClose();
+        }, 2700);
       } catch (error) {
-        setPendingJobLoader(false)
+        setPendingJobLoader({ extend: false, offer: false });
         throw new Error(error);
       }
-    } else if (name === "offer") {
-      try {
-        reqData = { ...pendingData };
-        let { data } = await apiCall.pendingJobSendTome(reqData);
-        console.log("This is for offer", data);
-        setPendingJobLoader(false)
-      } catch (error) {
-        setPendingJobLoader(false)
-        throw new Error(error);
-      }
-    } else return;
+    },
+    [onClose, apiCall, details]
+  );
 
-    onClose();
-  };
   return (
-    <ModalCom action={onClose} situation={situation}>
+    <ModalCom action={onClose} situation={situation} className="edit-popup">
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
@@ -159,7 +176,13 @@ function PendingJobsPopout({ details, onClose, situation }) {
                 onClick={handlePendingJobsBtn}
                 name="extend"
               >
-                Extend by a week
+                {pendingJobLoader.extend ? (
+                  <div className="w-[136px] flex justify-center items-center h-full">
+                    <LoadingSpinner size={5} color="sky-blue" />
+                  </div>
+                ) : (
+                  "Extend by a week"
+                )}
               </button>
             </div>
 
@@ -169,7 +192,13 @@ function PendingJobsPopout({ details, onClose, situation }) {
                 onClick={handlePendingJobsBtn}
                 name="offer"
               >
-                Send to me
+                {pendingJobLoader.offer ? (
+                  <div className="w-[96px] flex justify-center items-center h-full">
+                    <LoadingSpinner size={5} color="sky-blue" />
+                  </div>
+                ) : (
+                  "Send to me"
+                )}
               </button>
             </div>
 
@@ -200,4 +229,4 @@ function PendingJobsPopout({ details, onClose, situation }) {
   );
 }
 
-export default PendingJobsPopout;
+export default PendingJobsPopout;

src/middleware/AuthRoute.jsx

@@ -12,23 +12,37 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const dispatch = useDispatch();
   const [lastActivityTime, setLastActivityTime] = useState(Date.now());
   const [isLogin, setIsLogin] = useState({ loading: true, status: false });
+  const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const {jobListTable} = useSelector((state) => state.tableReload)
-  
+  const { jobListTable } = useSelector((state) => state.tableReload);
+
   useEffect(() => {
     //Removing Data stored at localStorage after session expires
     const expireSession = () => {
-      localStorage.clear();
+      localStorage.removeItem("uid");
+      localStorage.removeItem("member_id");
+      localStorage.removeItem("session_token");
       navigate("/login", { replace: true }); // redirects user to login page after session expires
     };
 
+    console.log(loadProfileDetails);
     const checkInactivity = setInterval(() => {
-      if (
-        Date.now() - lastActivityTime >
-        process.env.REACT_APP_SESSION_EXPIRE_MINUTES
-      ) {
-        expireSession();
+      let { account_type } = loadProfileDetails;
+      if (account_type === "FAMILY") {
+        if (
+          Date.now() - lastActivityTime >
+          process.env.REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY
+        ) {
+          expireSession();
+        }
+      } else {
+        if (
+          Date.now() - lastActivityTime >
+          process.env.REACT_APP_SESSION_EXPIRE_MINUTES
+        ) {
+          expireSession();
+        }
       }
     }, process.env.REACT_APP_SESSION_EXPIRE_CHECKER); // Checks for inactivity every minute
 
@@ -65,6 +79,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
               setIsLogin({ loading: false, status: false });
               return;
             }
+            setLoadProfileDetails(res.data);
             dispatch(updateUserDetails(res.data));
             setIsLogin({ loading: false, status: true });
           })
@@ -76,22 +91,22 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     }
   }, []);
 
-  useEffect(()=>{
+  useEffect(() => {
     const getMyJobList = async () => {
-      dispatch(updateUserJobList({loading: true, data:[]}))
+      dispatch(updateUserJobList({ loading: true, data: [] }));
       try {
         const res = await apiCall.getMyJobList();
         // setMyJobList({loading: false, data:res.data})
         // setMyJobList(res.data);
-        dispatch(updateUserJobList({loading: false, data:res.data}))
+        dispatch(updateUserJobList({ loading: false, data: res.data }));
       } catch (error) {
-        dispatch(updateUserJobList({loading: false, data:[]}))
+        dispatch(updateUserJobList({ loading: false, data: [] }));
         // setMyJobList({loading: false, data:[]})
         console.log("Error getting mode");
       }
     };
-    getMyJobList()
-  },[jobListTable])
+    getMyJobList();
+  }, [jobListTable]);
 
   useEffect(() => {
     // Getting market data

src/services/UsersService.js

@@ -536,6 +536,22 @@ class usersService {
     return this.postAuxEnd("/sendtaskmessage", postData);
   }
 
+  // FUNCTION TO SEND FILE UPLOAD
+  sendFiles(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 14010,
+      ...reqData,
+    };
+    const formData = new FormData();
+    for (let data in postData) {
+      formData.append(data, postData[data]);
+    }
+    return this.postAuxEnd("/uploads", formData);
+  }
+
   // END POINT TO DELETE  A JOB
   deleteJob(reqData) {
     var postData = {