Merge branch 'enable-and-active-jobs' of WrenchBoard/Users-Wrench into master

src/components/AuthPages/Login/index.jsx

@@ -9,7 +9,7 @@ import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 // import { GoogleOAuthProvider } from '@react-oauth/google';
-import { googleLogout, useGoogleLogin } from '@react-oauth/google';
+import { googleLogout, useGoogleLogin } from "@react-oauth/google";
 
 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
@@ -35,7 +35,7 @@ export default function Login() {
   const handleLoginType = ({ target: { name } }) => {
     if (name == "full") {
       setLoginType({ [name]: true, family: false });
-    } else if(name='family') {
+    } else if ((name = "family")) {
       setLoginType({ [name]: false, family: true });
     }
   };
@@ -56,7 +56,7 @@ export default function Login() {
   // FUNCTION TO HANDLE USER LOGIN
   const doLogin = ({ target: { name } }) => {
     setMsgError("");
-    setLoginError(false)
+    setLoginError(false);
     setLoginLoading(true);
     let postData; // Post Data for API
     if (!email || !password) {
@@ -68,7 +68,8 @@ export default function Login() {
       return;
     }
 
-    if (name == "loginfull") { // Post Data Info for normal Login
+    if (name == "loginfull") {
+      // Post Data Info for normal Login
       postData = {
         username: email,
         password: password,
@@ -76,7 +77,8 @@ export default function Login() {
         login_mode: 1100,
         action: 11025,
       };
-    } else if (name == "loginfamily") { // Post Data Info for family Login
+    } else if (name == "loginfamily") {
+      // Post Data Info for family Login
       postData = {
         username: email,
         pin: password,
@@ -84,7 +86,7 @@ export default function Login() {
         login_mode: 1105,
         action: 11025,
       };
-    }else{
+    } else {
       setLoginLoading(false);
       setMsgError("Invalid Login Type. Consider refreshing the page");
       setTimeout(() => {
@@ -92,7 +94,9 @@ export default function Login() {
       }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
       return;
     }
-    userApi.logInUser(postData).then((res) => {
+    userApi
+      .logInUser(postData)
+      .then((res) => {
         if (res.status != 200 || res.data.internal_return < 0) {
           // setMsgError("Wrong, email/password");
           setLoginError(true);
@@ -108,13 +112,15 @@ export default function Login() {
           navigate("/", { replace: true });
           setLoginLoading(false);
         }, 2000);
-      }).catch((error) => {
+      })
+      .catch((error) => {
         setMsgError("Unable to login, try again");
         setLoginLoading(false);
-      }).finally(() => {
+      })
+      .finally(() => {
         setTimeout(() => {
           setLoginError(false);
-          setMsgError('');
+          setMsgError("");
           setLoginLoading(false);
         }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
       });
@@ -132,14 +138,14 @@ export default function Login() {
       // );
       // console.log(userInfo);
     },
-    onError: errorResponse => console.log(errorResponse),
+    onError: (errorResponse) => console.log(errorResponse),
   });
   console.log(process.env.REACT_APP_GOOGLE_CLIENT_ID, process.env.REACT_APP_GOOGLE_REDIRECT_URL)
 
-  useEffect(()=>{
-    setMail('')
-    setPassword('')
-  },[loginType.full, loginType.family])
+  useEffect(() => {
+    setMail("");
+    setPassword("");
+  }, [loginType.full, loginType.family]);
 
   return (
     <>
@@ -198,7 +204,7 @@ export default function Login() {
               {/* for login component */}
               {
                 loginType.full ? (
-                  //user login compoenent
+                  //user login component
                   <div className="p-2 input-area border-2 border-[#4687ba]">
                     <div className="input-item mb-5">
                       <InputCom
@@ -262,7 +268,12 @@ export default function Login() {
                         </button>
                       </div>
                       <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                        <BrandBtn link="#" imgSrc={googleLogo} brand="Google" onClick={googleLogin} />
+                        <BrandBtn
+                          link="#"
+                          imgSrc={googleLogo}
+                          brand="Google"
+                          onClick={googleLogin}
+                        />
                         <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
                       </div>
                       <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">

src/components/MyJobs/index.jsx

@@ -9,7 +9,7 @@ export default function MyJobs(props) {
   const filterHandler = (value) => {
     setValue(value);
   };
-  console.log("AMEYE LOC1", props.MyJobList);
+  
   return (
     <Layout>
       <CommonHead

src/components/jobPopout/JobListPopout.jsx

@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import Detail from './popoutcomponent/Detail'
-import ModalCom from '../Helpers/ModalCom'
-import InputCom from '../Helpers/Inputs/InputCom/index'
+import React, { useState } from "react";
+import Detail from "./popoutcomponent/Detail";
+import ModalCom from "../Helpers/ModalCom";
+import InputCom from "../Helpers/Inputs/InputCom/index";
 
+function JobListPopout({ details, onClose, situation }) {
+  let [inputs, setInputs] = useState({
+    family: "",
+    public: "",
+    individual: "",
+    group: "",
+  });
 
-function JobListPopout({details, onClose, situation}) {
-    let [inputs, setInputs] = useState({
-        public: '',
-        individual: '',
-        group: '',
-    })
-
-    const handleInputChange = ({target:{name, value}}) => {
-        setInputs(prev => ({...prev, [name]:value}))
-    }
+  const handleInputChange = ({ target: { name, value } }) => {
+    setInputs((prev) => ({ ...prev, [name]: value }));
+  };
 
   return (
-    <ModalCom action={onClose} situation={situation}>
-    <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">
+    <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-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
-          {details.title}
+            {details.title}
           </h1>
           <button
             type="button"
@@ -48,130 +48,112 @@ function JobListPopout({details, onClose, situation}) {
             </svg>
           </button>
         </div>
-        <div className='md:flex bg-white rounded-lg shadow-lg'>
-          <div className='p-4 w-full md:w-2/4 md:border-r-2'>
+        <div className="md:flex bg-white rounded-lg shadow-lg">
+          <div className="p-4 w-full md:w-2/4 md:border-r-2">
             {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
-  
+
             {/* INPUT SECTION */}
-            <div className='my-3 md:flex'>
-              <Detail 
-                  label='Description' 
-                  value={details.description} 
-              />
+            <div className="my-3 md:flex">
+              <Detail label="Description" value={details.description} />
             </div>
-  
-            <div className='my-3 md:flex'>
-              <Detail 
-                  label='Price' 
-                  value={`${details.price*0.01} Naira`} 
-              />
+
+            <div className="my-3 md:flex">
+              <Detail label="Price" value={`${details.price * 0.01} Naira`} />
             </div>
-  
-            <div className='my-3 md:flex'>
-              <Detail 
-                  label='Timeline' 
-                  value={`${details.timeline_days} day(s)`}  
+
+            <div className="my-3 md:flex">
+              <Detail
+                label="Timeline"
+                value={`${details.timeline_days} day(s)`}
               />
             </div>
 
-            <div className='my-3 md:flex'>
-              <Detail 
-                  label='Created' 
-                  value={`Dummy, no value found for created!`}
+            <div className="my-3 md:flex">
+              <Detail
+                label="Created"
+                value={`Dummy, no value found for created!`}
               />
             </div>
 
-            <div className='my-3'>
-                <label className='w-full text-slate-900 tracking-wide font-semibold'>Delivery Detail</label>
-                <textarea 
-                    className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`} 
-                    rows='5'
-                    name='details'
-                    style={{resize: 'none'}} 
-                    value={details.job_detail}
-                    onChange={handleInputChange}
-                />
+            <div className="my-3">
+              <label className="w-full text-slate-900 tracking-wide font-semibold">
+                Delivery Detail
+              </label>
+              <textarea
+                className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
+                rows="5"
+                name="details"
+                style={{ resize: "none" }}
+                value={details.job_detail}
+                onChange={handleInputChange}
+              />
             </div>
-  
           </div>
-  
+
           {/* ACTION SECTION */}
-          <div className='p-4 w-full md:w-2/4 h-full'>
+          <div className="p-4 w-full md:w-2/4 h-full">
+            {/* Assign to Family */}
+            <JobFieldInput
+              label="Assign to family"
+              inputName="family"
+              inputHandler={handleInputChange}
+              value={inputs.family}
+              btnText="Assign to family"
+            />
 
-             {/* Offer this job to public input */}
-             <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
-                <InputCom
-                fieldClass="px-6"
-                label="Offer this job to public"
-                labelClass='tracking-wide'
-                type="text"
-                name="public"
-                placeholder=""
-                value={inputs.public}
-                inputHandler={handleInputChange}
-                />
-
-                {/* btn */}
-                <div className='my-1 flex justify-end items-center'>
-                    <button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Show Task to Public</button>
-                </div>
-            </div>
+            {/* Offer this job to public input */}
+            <JobFieldInput
+              label="Offer this job to public"
+              inputName="public"
+              inputHandler={handleInputChange}
+              value={inputs.public}
+              btnText="Show Task to Public"
+            />
 
             {/* Offer this job to individual input */}
-            <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
-                <InputCom
-                fieldClass="px-6"
-                label="Offer this job to individual"
-                labelClass='tracking-wide'
-                type="text"
-                name="individual"
-                placeholder=""
-                value={inputs.individual}
-                inputHandler={handleInputChange}
-                />
-
-                {/* btn */}
-                <div className='my-1 flex justify-end items-center'>
-                    <button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Send Offer to Individual</button>
-                </div>
-            </div>
+            <JobFieldInput
+              label="Offer this job to individual"
+              inputName="individual"
+              inputHandler={handleInputChange}
+              value={inputs.individual}
+              btnText="Send Offer to Individual"
+            />
 
             {/* Offer this job to your group input */}
-            <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
-                <InputCom
-                fieldClass="px-6"
-                label="Offer this job to your Group"
-                labelClass='tracking-wide'
-                type="text"
-                name="group"
-                placeholder=""
-                value={inputs.group}
-                inputHandler={handleInputChange}
-                />
-
-                {/* btn */}
-                <div className='my-1 flex justify-end items-center'>
-                    <button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Send Order to Group</button>
-                </div>
-            </div>
+            <JobFieldInput
+              label="Offer this job to your Group"
+              inputName="group"
+              inputHandler={handleInputChange}
+              value={inputs.group}
+              btnText="Send Order to Group"
+            />
           </div>
           {/* END OF ACTION SECTION */}
-        </div> 
-
-        {/* close button */}
-        {/* <div className="p-6 flex justify-center">
-          <button
-            onClick={onClose}
-            type="button"
-            className=" border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
-          >
-            <span className="text-gradient">Close</span>
-          </button>
-        </div> */}
-        {/* end of close button */}
-    </div>
-  </ModalCom>
-    )
+        </div>
+      </div>
+    </ModalCom>
+  );
 }
 
-export default JobListPopout
+export default JobListPopout;
+
+const JobFieldInput = ({ value, inputHandler, inputName, label, btnText }) => (
+  <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
+    <InputCom
+      fieldClass="px-6"
+      label={label}
+      labelClass="tracking-wide"
+      type="text"
+      name={inputName}
+      placeholder=""
+      value={value}
+      inputHandler={inputHandler}
+    />
+    {/* btn */}
+    <div className="my-1 flex justify-end items-center">
+      <button className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md">
+        {btnText}
+      </button>
+    </div>
+  </div>
+);

src/middleware/AuthRoute.jsx

@@ -78,7 +78,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     const getMarketActiveJobList = async () => {
       try {
         const res = await apiCall.getActiveJobList();
-        console.log('Checking job data from auth', res)
         dispatch(updateJobs(res.data));
       } catch (error) {
         console.log("Error getting mode");