Clean up and auto refresh

src/components/YourPage/LoadedPage.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import GetMyPageLoad from "./getMyPageLoad";
+
+
+const LoadedPage = ({reloader}) => {
+  const { loading, data, error } = GetMyPageLoad(reloader);
+
+  return (
+    <div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto">
+      {loading ? (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">...</h1>
+          <p>...</p>
+        </>
+      ) : error ? (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">Unable to load</h1>
+        </>
+      ) : (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">
+            {!data.intro ? "Introduction" : data.intro}
+          </h1>
+          <p>{!data.description ? "Brief Details" : data.description}</p>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default LoadedPage;

src/components/YourPage/UpdateButton.jsx

@@ -1,13 +1,19 @@
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-const UpdateButton = ({ onClick, loading }) => (
+const UpdateButton = ({ onClick, loading, msg }) => (
   <button
     type="submit"
     onClick={onClick}
     disabled={loading}
     className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-full"
   >
-    {loading ? <LoadingSpinner size="6" color="sky-blue" /> : "Update"}
+    {loading ? (
+      <LoadingSpinner size="6" color="sky-blue" />
+    ) : msg !== "" ? (
+      msg
+    ) : (
+      "Update"
+    )}
   </button>
 );
 

src/components/YourPage/YourPageForm.jsx

@@ -1,7 +1,7 @@
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import UpdateButton from "./UpdateButton";
 
-const YourPageForm = ({ values, onChange, onSubmit, loading }) => (
+const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
   <div className="ml-16 my-2 flex flex-col gap-3">
     <div className="field w-full">
       <InputCom
@@ -33,7 +33,7 @@ const YourPageForm = ({ values, onChange, onSubmit, loading }) => (
       />
     </div>
     <div className="w-full flex justify-end mb-2">
-      <UpdateButton onClick={onSubmit} loading={loading} />
+      <UpdateButton onClick={onSubmit} loading={loading} msg={msg} />
     </div>
     <hr />
   </div>

src/components/YourPage/getMyPageLoad.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import usersService from "../../services/UsersService";
+
+
+const GetMyPageLoad = (reloader) => {
+  const api = new usersService();
+
+    const [response, setResponse] = useState({
+      loading: true,
+      data: null,
+      error: null,
+    });
+  
+    useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const res = await api.MyPageLoad();
+
+          setResponse({ loading: false, data: res.data, error: null });
+        } catch (error) {
+          setResponse({ loading: false, data: null, error: error.message });
+        }
+      };
+  
+      fetchData();
+    }, [reloader]);
+  
+    return response;
+  };
+  
+  export default GetMyPageLoad;

src/components/YourPage/index.jsx

@@ -1,27 +1,67 @@
 import React, { useState } from "react";
-import Layout from "../Partials/Layout";
 import usersService from "../../services/UsersService";
+import Layout from "../Partials/Layout";
+import LoadedPage from "./LoadedPage";
 import YourPageForm from "./YourPageForm";
+// import { updateYourPage } from "./updateYourPage";
 
 const YourPage = () => {
-  const [pageValues, setPageValues] = useState({
+  const [pageValues, setPageValues] = useState(pageInitialValues);
-    intro: "",
+  const [response, setResponse] = useState(responseInitialValues);
-    description: "",
+  const [reloader, setReloader] = useState(false);
-  });
 
-  const [response, setResponse] = useState({
+  const handleChange = ({ target: { name, value } }) =>
-    loading: false,
-    data: {},
-    error: "",
-    msg: "",
-  });
-
-  const handleChange = (event) => {
-    let { name, value } = event.target;
     setPageValues((prev) => ({ ...prev, [name]: value }));
-  };
 
-  const updateYourPageDetails = async () => {
+  const updateYourPageDetails = updateYourPage(
+    pageValues,
+    setResponse,
+    setPageValues,
+    setReloader
+  );
+
+  return (
+    <Layout>
+      <div className="notification-page w-full mb-10">
+        <div className="notification-wrapper w-full">
+          <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[650px]">
+            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide mb-2">
+              My page
+            </h1>
+            <hr />
+            <YourPageForm
+              values={pageValues}
+              onChange={handleChange}
+              onSubmit={updateYourPageDetails}
+              loading={response.loading}
+              msg={response.msg}
+            />
+            <LoadedPage reloader={reloader} />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default YourPage;
+
+const pageInitialValues = {
+  intro: "",
+  description: "",
+};
+
+const responseInitialValues = {
+  loading: false,
+  data: {},
+  error: "",
+  msg: "",
+};
+
+function updateYourPage(pageValues, setResponse, setPageValues, setReloader) {
+  return async () => {
+    if (!pageValues.intro || !pageValues.description) return;
+
     try {
       setResponse({ loading: true, error: "", msg: "" });
 
@@ -32,14 +72,19 @@ const YourPage = () => {
         setResponse({
           loading: false,
           data: res.data,
-          msg: "Page updated successfully",
+          msg: "Update Complete",
         });
 
+        setReloader((prev) => !prev);
+      }, 1000);
+
+      setTimeout(() => {
+        setResponse({ msg: "" });
         // Clear form after successful update
         setPageValues({ intro: "", description: "" });
-      }, 2000);
+      }, 3000);
     } catch (error) {
-      setResponse({
+      return setResponse({
         loading: false,
         data: {},
         error: "Error updating page",
@@ -47,27 +92,4 @@ const YourPage = () => {
       });
     }
   };
-
+}
-  return (
-    <Layout>
-      <div className="notification-page w-full mb-10">
-        <div className="notification-wrapper w-full">
-          <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px]">
-            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide mb-2">
-              My page
-            </h1>
-            <hr />
-            <YourPageForm
-              values={pageValues}
-              onChange={handleChange}
-              onSubmit={updateYourPageDetails}
-              loading={response.loading}
-            />
-          </div>
-        </div>
-      </div>
-    </Layout>
-  );
-};
-
-export default YourPage;

src/components/jobPopout/EditJobPopout.jsx

@@ -208,12 +208,6 @@ const EditJobPopOut = ({
     }
   };
 
-  // Check if the user is using iOS
-  const isIOS = /MacIntel|MacPPC/.test(navigator.platform) && !window.MSStream;
-
-  // Check if the user is using Windows
-  const isWindows = /Windows/.test(navigator.userAgent);
-
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">

src/components/jobPopout/JobListPopout.jsx

@@ -250,8 +250,8 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white dark:bg-dark-white rounded-lg shadow-lg">
+        <div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
-          <div className="p-4 w-full md:w-2/4 md:border-r-2">
+          <div className="p-4 pb-3 w-full md:border-r-2">
             {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
 
             {/* INPUT SECTION */}
@@ -277,7 +277,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 />
             </div>
 
-            <div className="my-3">
+            <div className="">
               <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
                 Delivery Detail
               </label>
@@ -293,155 +293,163 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-2/4 h-full">
+          <div className="p-4 w-ful flex flex-col justify-between">
-            <div className="grid grid-cols-3 mt-4">
+            <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">Send this Task to:</h1>
-              {tabs.map(item => (
+            <div className="flex flex-col grow">
-                <button 
+              <div className="grid grid-cols-3 mt-4">
-                  // className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
+                {tabs.map(item => (
-                  className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${selectedTab == item ? 'bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold' : 'bg-white text-[#000]'}`}
+                  <button 
-                  value={item} 
+                    // className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
-                  name={item}
+                    className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${selectedTab == item ? 'bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold' : 'bg-white text-[#000]'}`}
-                  onClick={()=>setSelectedTab(item)}
+                    value={item} 
+                    name={item}
+                    onClick={()=>setSelectedTab(item)}
+                  >
+                    <div className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${selectedTab == item ? 'border-white bg-emerald-500' : 'border-red-50 dark:border-[#D85A5A] bg-white'}`}></div>
+                    {item[0].toUpperCase() + item.slice(1)}
+                  </button>
+                ))}
+              </div>
+              <div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
+                {selectedTab == 'family' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.family}
+                  onSubmit={jobFieldHandler}
                 >
-                  <div className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${selectedTab == item ? 'border-white bg-emerald-500' : 'border-red-50 dark:border-[#D85A5A] bg-white'}`}></div>
+                  {(props) => {
-                  {item[0].toUpperCase() + item.slice(1)}
+                    return (
-                </button>
+                      <Form className="hidden">
-              ))}
+                        {/* Assign to Family */}
+                        <JobFieldInput
+                          label="Assign to family"
+                          select={true}
+                          inputName="family"
+                          value={props?.values.family}
+                          data={familyList}
+                          btnText="Assign to family"
+                          optionText="Select Family"
+                          loader={loader?.jobFields?.family}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values?.family === "" && (
+                            <span>{errMsg?.jobFields?.family}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+                
+                {selectedTab == 'public' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.public}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to public input */}
+                        <JobFieldInput
+                          label="Offer this job to public"
+                          select={true}
+                          inputName="public"
+                          value={props?.values.public}
+                          data={publicArray}
+                          btnText="Show Task to Public"
+                          optionText="Select Duration"
+                          loader={loader?.jobFields?.public}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.public === "" && (
+                            <span>{errMsg?.jobFields?.public}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+
+                {selectedTab == 'individual' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.individual}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to individual input */}
+                        <JobFieldInput
+                          label="Offer this job to individual"
+                          input={true}
+                          inputName="individual"
+                          value={props?.values.individual}
+                          placeholder="Enter email of individual"
+                          inputHandler={props?.handleChange}
+                          btnText="Send Offer to Individual"
+                          loader={loader?.jobFields?.individual}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.individual === "" && (
+                            <span>{errMsg?.jobFields?.individual}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+                
+                {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
+                {selectedTab == 'group' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.group}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to your group input */}
+                        <JobFieldInput
+                          label="Offer this job to your Group"
+                          select={true}
+                          inputName="group"
+                          value={props?.values.group}
+                          btnText="Send Order to Group"
+                          optionText="Select Group"
+                          loader={loader?.jobFields?.group}
+                          errorHandler={errorHandler}
+                          data={groupList}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.group === "" && (
+                            <span>{errMsg?.jobFields?.group}</span>
+                          )}
+                        </p>
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+              </div>
             </div>
 
-            {selectedTab == 'family' &&
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.family}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4 hidden">
-                    {/* Assign to Family */}
-                    <JobFieldInput
-                      label="Assign to family"
-                      select={true}
-                      inputName="family"
-                      value={props?.values.family}
-                      data={familyList}
-                      btnText="Assign to family"
-                      optionText="Select Family"
-                      loader={loader?.jobFields?.family}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values?.family === "" && (
-                        <span>{errMsg?.jobFields?.family}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
-            }
-            
-            {selectedTab == 'public' &&
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.public}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to public input */}
-                    <JobFieldInput
-                      label="Offer this job to public"
-                      select={true}
-                      inputName="public"
-                      value={props?.values.public}
-                      data={publicArray}
-                      btnText="Show Task to Public"
-                      optionText="Select Duration"
-                      loader={loader?.jobFields?.public}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.public === "" && (
-                        <span>{errMsg?.jobFields?.public}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
-            }
-
-            {selectedTab == 'individual' &&
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.individual}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to individual input */}
-                    <JobFieldInput
-                      label="Offer this job to individual"
-                      input={true}
-                      inputName="individual"
-                      value={props?.values.individual}
-                      placeholder="Enter email of individual"
-                      inputHandler={props?.handleChange}
-                      btnText="Send Offer to Individual"
-                      loader={loader?.jobFields?.individual}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.individual === "" && (
-                        <span>{errMsg?.jobFields?.individual}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
-            }
-            
-            {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
-            {selectedTab == 'group' &&
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.group}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to your group input */}
-                    <JobFieldInput
-                      label="Offer this job to your Group"
-                      select={true}
-                      inputName="group"
-                      value={props?.values.group}
-                      btnText="Send Order to Group"
-                      optionText="Select Group"
-                      loader={loader?.jobFields?.group}
-                      errorHandler={errorHandler}
-                      data={groupList}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.group === "" && (
-                        <span>{errMsg?.jobFields?.group}</span>
-                      )}
-                    </p>
-                  </Form>
-                );
-              }}
-            </Formik>
-            }
-
             {requestStatus.message &&
               <p className={`mt-4 w-full text-lg ${requestStatus.status ? 'text-emerald-600' : 'text-red-600'}`}>{requestStatus.message}</p>
             }
@@ -473,7 +481,7 @@ const JobFieldInput = ({
   data,
 }) => {
   return (
-    <div className="field w-full p-3 mb-2 bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
+    <div className="field w-full h-full px-3 pt-5 pb-3 flex flex-col justify-between gap-4">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
@@ -561,6 +569,7 @@ const JobFieldInput = ({
           value={value}
           inputHandler={inputHandler}
           inputBg="bg-white"
+          parentClass={`${parentClass}`}
         />
       )}
 

src/services/UsersService.js

@@ -15,6 +15,16 @@ class usersService {
     return this.postAuxEnd("/mypageintro", postData);
   }
 
+  MyPageLoad() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11070
+    };
+    return this.postAuxEnd("/mypageload", postData);
+  }
+
   CreateUser(reqData) {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/createuser", reqData);