refactor: Your Page Code

src/components/YourPage/UpdateButton.jsx

@@ -0,0 +1,14 @@
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+const UpdateButton = ({ onClick, loading }) => (
+  <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"}
+  </button>
+);
+
+export default UpdateButton;

src/components/YourPage/YourPageForm.jsx

@@ -0,0 +1,42 @@
+import InputCom from "../Helpers/Inputs/InputCom/index";
+import UpdateButton from "./UpdateButton";
+
+const YourPageForm = ({ values, onChange, onSubmit, loading }) => (
+  <div className="ml-16 mb-2 flex flex-col gap-3">
+    <div className="field w-full">
+      <InputCom
+        fieldClass="px-4 transfer-field"
+        parentClass="flex items-center gap-1 justify-between"
+        labelClass="flex-[0.2] mb-0 font-semibold"
+        inputClass="flex-[0.8] transfer-field"
+        inputBg="bg-slate-100"
+        label="Introduction: "
+        type="text"
+        name="intro"
+        value={values.intro}
+        inputHandler={onChange}
+      />
+    </div>
+
+    <div className="field w-full mb-6 flex gap-1 justify-between">
+      <label className="text-[#181c32] dark:text-white text-[13.975px] font-semibold flex flex-[0.2] mt-2.5">
+        Brief Details:
+      </label>
+      <textarea
+        style={{ resize: "none" }}
+        className="text-base px-4 py-2 rounded-md min-h-[100px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none flex-[0.8]"
+        name="description"
+        cols="30"
+        rows="2"
+        value={values.description}
+        onChange={onChange}
+      />
+    </div>
+    <div className="w-full flex justify-end mb-2">
+      <UpdateButton onClick={onSubmit} loading={loading} />
+    </div>
+    <hr />
+  </div>
+);
+
+export default YourPageForm;

src/components/YourPage/index.jsx

@@ -1,8 +1,51 @@
-import React from "react";
+import React, { useState } from "react";
 import Layout from "../Partials/Layout";
-import { InputCom } from "../AddJob/settings";
+import usersService from "../../services/UsersService";
+import YourPageForm from "./YourPageForm";
 
 const YourPage = () => {
+  const [pageValues, setPageValues] = useState({
+    intro: "",
+    description: "",
+  });
+
+  const [response, setResponse] = useState({
+    loading: false,
+    data: {},
+    error: "",
+    msg: "",
+  });
+
+  const handleChange = (event) => {
+    let { name, value } = event.target;
+    setPageValues((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const updateYourPageDetails = async () => {
+    try {
+      setResponse({ loading: true, error: "", msg: "" });
+
+      let api = new usersService();
+      const res = await api.MyPageIntro(pageValues);
+
+      setResponse({
+        loading: false,
+        data: res.data,
+        msg: "Page updated successfully",
+      });
+
+      // Clear form after successful update
+      setPageValues({ intro: "", description: "" });
+    } catch (error) {
+      setResponse({
+        loading: false,
+        data: {},
+        error: "Error updating page",
+        msg: "",
+      });
+    }
+  };
+
   return (
     <Layout>
       <div className="notification-page w-full mb-10">
@@ -12,43 +55,12 @@ const YourPage = () => {
               My page
             </h1>
             <hr />
-            <div className="ml-4">
+            <YourPageForm
-              <div className="field w-full">
+              values={pageValues}
-                <InputCom
+              onChange={handleChange}
-                  fieldClass="px-4 transfer-field"
+              onSubmit={updateYourPageDetails}
-                  parentClass="flex items-center gap-1 justify-between"
+              loading={response.loading}
-                  labelClass="flex-[0.2] mb-0"
+            />
-                  inputClass="flex-[0.8] transfer-field"
-                  label="Introduction: "
-                  type="text"
-                  name="fee"
-                  value=""
-                />
-              </div>
-
-              <div className="field w-full mb-6 flex gap-1 justify-between">
-                <label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
-                  Brief Details:
-                </label>
-                <textarea
-                  style={{ resize: "none" }}
-                  className="text-base px-4 py-2 rounded-md min-h-[100px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none flex-[0.8]"
-                  name="comment"
-                  cols="30"
-                  rows="2"
-                />
-              </div>
-              <div className="w-full flex justify-end mb-2">
-                <button
-                  type="submit"
-                  // disabled={props.isSubmitting}
-                  className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-full"
-                >
-                  Continue
-                </button>
-              </div>
-            </div>
-            <hr />
           </div>
         </div>
       </div>