Merge branch 'edit-job' of WrenchBoard/Users-Wrench into master

src/components/FamilyAcc/FamilyTable.jsx

@@ -4,7 +4,6 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function FamilyTable({ className, familyList, loader }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
-
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
   return (
     <div
@@ -13,12 +12,12 @@ export default function FamilyTable({ className, familyList, loader }) {
       }`}
     >
       <div className="relative w-full overflow-x-auto sm:rounded-lg">
-          {loader ? (
+        {loader ? (
-            <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
+          <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
-           <LoadingSpinner size='16' color='sky-blue' />
+            <LoadingSpinner size="16" color="sky-blue" />
-            </div>
+          </div>
-          ) : (
+        ) : (
-        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
+          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
             <>
               <thead className="sticky top-0">
                 <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
@@ -31,55 +30,65 @@ export default function FamilyTable({ className, familyList, loader }) {
               <tbody className="overflow-y-scroll h-auto">
                 <>
                   {familyList?.length > 0 ? (
-                    familyList?.map(({ firstname, lastname, age }, idx) => (
+                    familyList?.map(
-                      <tr
+                      (
-                        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                        { firstname, lastname, age, added, last_login },
-                        key={idx}
+                        idx
-                      >
+                      ) => {
-                        <td className=" py-4">
+                        let addedDate = added?.split(" ")[0];
-                          <div className="flex space-x-2 items-center">
+                        return (
-                            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                          <tr
-                              <img
+                            className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
-                                src={dataImage1}
+                            key={idx}
-                                alt="data"
-                                className="w-full h-full"
-                              />
-                            </div>
-                            <div className="flex flex-col">
-                              <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                                {`${firstname} ${lastname} (${age})`}
-                              </h1>
-                              <span className="text-sm text-thin-light-gray">
-                                Added{" "}
-                                <span className="text-purple">10-10-2029</span>
-                              </span>
-                            </div>
-                          </div>
-                        </td>
-                        <td className="text-center py-4 px-2">
-                          <div className="flex space-x-1 items-center justify-center">
-                            <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                              10-10-2019
-                            </span>
-                          </div>
-                        </td>
-                        <td className="text-center py-4 px-2">
-                          <div className="flex space-x-1 items-center justify-center">
-                            <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                              100
-                            </span>
-                          </div>
-                        </td>
-                        <td className="text-right py-4 px-2">
-                          <button
-                            type="button"
-                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           >
-                            Manage
+                            <td className=" py-4">
-                          </button>
+                              <div className="flex space-x-2 items-center">
-                        </td>
+                                <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                      </tr>
+                                  <img
-                    ))
+                                    src={dataImage1}
+                                    alt="data"
+                                    className="w-full h-full"
+                                  />
+                                </div>
+                                <div className="flex flex-col">
+                                  <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                    {`${firstname} ${lastname} (${age})`}
+                                  </h1>
+                                  <span className="text-sm text-thin-light-gray">
+                                    Added:{" "}
+                                    <span className="text-purple ml-1">
+                                      {addedDate}
+                                    </span>
+                                  </span>
+                                </div>
+                              </div>
+                            </td>
+                            <td className="text-center py-4 px-2">
+                              <div className="flex space-x-1 items-center justify-center">
+                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                                  {last_login}
+                                </span>
+                              </div>
+                            </td>
+                            <td className="text-center py-4 px-2">
+                              <div className="flex space-x-1 items-center justify-center">
+                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                                  100
+                                </span>
+                              </div>
+                            </td>
+                            <td className="text-right py-4 px-2 flex items-center justify-center">
+                              <button
+                                type="button"
+                                className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                              >
+                                Manage
+                              </button>
+                            </td>
+                          </tr>
+                        );
+                      }
+                    )
                   ) : (
                     <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                       <td className="p-2" colSpan="4">
@@ -90,8 +99,8 @@ export default function FamilyTable({ className, familyList, loader }) {
                 </>
               </tbody>
             </>
-        </table>
+          </table>
-          )}
+        )}
       </div>
     </div>
   );

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -82,7 +82,7 @@ export default function InputCom({
           name={name}
           minLength={minLengthValidation()}
           maxLength={maxLengthValidation()}
-          pattern={() => inputPatterns}
+          // pattern={inputPatterns()}
           ref={inputRef}
           readOnly={disable}
           onBlur={blurHandler}

src/components/MyJobs/MyJobTable.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
 import dataImage3 from "../../assets/images/data-table-user-3.png";
@@ -10,8 +10,42 @@ import DeleteJobPopout from "../jobPopout/DeleteJobPopout";
 import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import EditJobPopOut from "../jobPopout/EditJobPopout";
+import usersService from "../../services/UsersService";
+import { useSelector } from "react-redux";
 
 export default function MyJobTable({ MyJobList, className }) {
+  const [myCountry, setCountries] = useState("");
+  const {
+    userDetails: { country },
+  } = useSelector((state) => state?.userDetails);
+
+  const userApi = useMemo(() => new usersService(), []);
+
+  // Get Country Api
+  const getCountryList = useCallback(async () => {
+    const res = await userApi.getSignupCountryData();
+
+    try {
+      if (res.status === 200) {
+        const {
+          data: { signup_country },
+        } = await res;
+        console.log(signup_country);
+        let checkCountry = signup_country
+          ?.filter((item) => item[0] == country)
+          ?.map((item, idx) => item[1])
+          .join("");
+        setCountries(checkCountry);
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  }, [userApi, country]);
+
+  useEffect(() => {
+    getCountryList();
+  }, [getCountryList]);
+
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
 
@@ -209,6 +243,7 @@ export default function MyJobTable({ MyJobList, className }) {
             });
           }}
           situation={editJob.show}
+          country={myCountry}
         />
       )}
     </div>

src/components/jobPopout/EditJobPopout.jsx

@@ -1,11 +1,13 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ModalCom from "../Helpers/ModalCom";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import usersService from "../../services/UsersService";
+import { useNavigate } from "react-router-dom";
 
-const EditJobPopOut = ({ details, onClose, situation }) => {
+const EditJobPopOut = ({ details, onClose, situation, country }) => {
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
     status: false,
@@ -41,7 +43,7 @@ const EditJobPopOut = ({ details, onClose, situation }) => {
 
   let initialValues = {
     // initial values for formik
-    country: details?.country,
+    country: country,
     price: details?.price,
     title: details?.title,
     description: details?.description,
@@ -49,7 +51,34 @@ const EditJobPopOut = ({ details, onClose, situation }) => {
     timeline_days: details?.timeline_days,
   };
 
-  console.log(details);
+  const jobApi = useMemo(() => new usersService(), []);
+  const navigate = useNavigate();
+
+  const handleEditJob = useCallback(
+    async (values) => {
+      setRequestStatus({ loading: true, message: "" });
+      let reqData = {
+        job_id: details.job_id,
+        job_uid: details.job_uid,
+        ...values,
+      };
+      try {
+        let res = await jobApi.jobManagerUpdateJob(reqData);
+        let { data } = await res;
+        if (data?.internal_return < 0) return;
+        setRequestStatus({ loading: false, message: null });
+        setTimeout(() => {
+          navigate("/myjobs", { replace: true });
+          onClose();
+        }, 1000);
+      } catch (error) {
+        setRequestStatus({ loading: false, message: error });
+        throw new Error(error);
+      }
+    },
+    [jobApi, navigate, onClose, details]
+  );
+
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
       <div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
@@ -87,6 +116,7 @@ const EditJobPopOut = ({ details, onClose, situation }) => {
           <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
+            onSubmit={handleEditJob}
           >
             {(props) => (
               <Form className="w-full">
@@ -94,26 +124,19 @@ const EditJobPopOut = ({ details, onClose, situation }) => {
                   <div className="fields w-full">
                     <div className="xl:flex xl:space-x-7 mb-6">
                       <div className="field w-full mb-6 xl:mb-0">
-                        <label
+                        <InputCom
-                          htmlFor="country"
+                          fieldClass="px-6 cursor-default"
-                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                          label="Country"
-                        >
+                          labelClass="tracking-wide"
-                          Country
+                          inputBg="bg-slate-100"
-                        </label>
+                          inputClass="input-curve lg border border-light-purple"
-                        <select
+                          type="text"
-                          id="country"
                           name="country"
                           value={props.values.country}
-                          className={`input-field py-2 px-6 mt-3 rounded-[50px] placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                          inputHandler={props.handleChange}
-                          onChange={props.handleChange}
+                          blurHandler={props.handleBlur}
-                          onBlur={props.handleBlur}
+                          disable={true}
-                          disabled
+                        />
-                        >
-                          <option
-                            className="text-slate-500 text-lg"
-                            value={props.values.country}
-                          />
-                        </select>
                         {props.errors.country && props.touched.country && (
                           <p className="text-sm text-red-500">
                             {props.errors.country}

src/services/UsersService.js

@@ -461,6 +461,18 @@ class usersService {
         return this.postAuxEnd("/jobmanagercreatejob", postData);
     }
 
+    jobManagerUpdateJob(reqData) {
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            job_id: localStorage.getItem("job_id"),
+            action: 13010,
+            ...reqData
+        };
+        return this.postAuxEnd("/jobmanagerupdatejob", postData);
+    }
+
     // END POINT TO DELETE  A JOB
     deleteJob(reqData) {
         var postData = {