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/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);