change functionality req from ssr to csr

components/dashboard/userAccount/detailUser/index.js

@@ -13,6 +13,7 @@ import FamilyHistory from "./familyHistory";
 import Relatives from "./relatives";
 import { dieses } from "./information/dieses";
 import Cookies from "js-cookie";
+import { getParsedUserInfo } from "@/helper";
 
 function DetailUser({
   user,
@@ -45,9 +46,7 @@ function DetailUser({
   };
 
   useEffect(() => {
-    const user = Cookies.get("userInfo");
+    const parsedUserInfo = getParsedUserInfo();
-    const parsedUserInfo = user && JSON.parse(user);
-    console.log(parsedUserInfo);
 
     if (parsedUserInfo) {
       request
@@ -63,7 +62,6 @@ function DetailUser({
       // handle Error
     }
   }, []);
-  console.log(information);
 
   if (!dataUser) {
     initialData.other = [

components/dashboard/userAccount/detailUser/information/Content.js

@@ -1,6 +1,4 @@
 function Content({ isConfirmed, children, title, error }) {
-  console.log(error);
-
   return (
     <div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[3px] md:gap-[7px] lg:gap-[9px]">
       <div className="flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]">

components/dashboard/userAccount/detailUser/information/DateBirthday.js

@@ -60,7 +60,7 @@ function DateBirthday({ data, changeData, error }) {
         <DatePicker
           locale="fa"
           onChange={(e) => {
-            changeData(convertToJalali(e._d), "value", "birthday");
+            changeData(convertToJalali(e._d), "birthday");
             handleClose();
           }}
         />

components/dashboard/userAccount/detailUser/information/Form.js

@@ -1,3 +1,4 @@
+import { getParsedUserInfo } from "@/helper";
 import Content from "./Content";
 import DateBirthday from "./DateBirthday";
 import AutoSelector from "./component/AutoSelector";
@@ -22,6 +23,8 @@ function Form({
   const findVal = (list, name) =>
     data && list && list.length && list.find((g) => g.id === data[name]);
   console.log(errors);
+  const parsedUserInfo = getParsedUserInfo();
+  console.log(parsedUserInfo);
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-[24px] gap-y-[10px]">
@@ -72,7 +75,7 @@ function Form({
         <AutoSelector
           error={errors?.gender}
           updateData={(name, data) =>
-            changeData(data === "زن" ? "female" : "male", "value", name)
+            changeData(data === "زن" ? "female" : "male", name)
           }
           value={findVal(gender, "gender")}
           label="جنسیت"
@@ -101,7 +104,7 @@ function Form({
       <Content title="نوع بیمه">
         <AutoSelector
           updateData={(name, val) => {
-            changeData([Number(val.id)], "value", name);
+            changeData([Number(val.id)], name);
           }}
           // value={findVal(insurance, "basic_insurance", true)?.name}
           value={insurance?.find(
@@ -133,11 +136,7 @@ function Form({
         <AutoSelector
           error={errors?.blood_type}
           updateData={(name, value) =>
-            changeData(
+            changeData(blood_group.find((g) => g.label === value).id, name)
-              blood_group.find((g) => g.label === value).id,
-              "value",
-              name
-            )
           }
           value={findVal(blood_group, "blood_type")}
           label="گروه خونی"
@@ -149,7 +148,7 @@ function Form({
         <AutoSelector
           error={errors?.marital_status}
           updateData={(name, value) =>
-            changeData(value === "متاهل" ? "married" : "single", "value", name)
+            changeData(value === "متاهل" ? "married" : "single", name)
           }
           value={findVal(marital_status, "marital_status")}
           label="وضعیت تاهل"
@@ -173,7 +172,6 @@ function Form({
           updateData={(name, value) =>
             changeData(
               education.find((g) => g.label === value).id,
-              "value",
               name
             )
           }
@@ -187,7 +185,7 @@ function Form({
         <AutoSelector
           error={errors?.job}
           updateData={(name, value) =>
-            changeData(value === "آزاد" ? "azad" : "dolati", "value", name)
+            changeData(value === "آزاد" ? "azad" : "dolati", name)
           }
           value={findVal(job, "job")}
           label="شغل"

components/dashboard/userAccount/detailUser/information/component/Field.js

@@ -29,7 +29,7 @@ function Field({
           isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
         }`}
         onChange={(e) => {
-          changeData(e.target.value, "value", name);
+          changeData(e.target.value, name);
         }}
         sx={{
           // border: "1px solid red !important",

components/dashboard/userAccount/detailUser/information/index.js

@@ -20,7 +20,7 @@ function Information({
   const [disable, setDisable] = useState(true);
   const [insurance, setInsurance] = useState();
   const [loading, setLoading] = useState(false);
-  const [errors, setErrors] = useState();
+  const [errors, setErrors] = useState({});
 
   useEffect(() => {
     request.getInsuranceType().then((res) => {
@@ -31,12 +31,19 @@ function Information({
     // .catch((err) => {});
   }, []);
 
-  const changeData = (value, type, name) => {
+  const changeData = (value, name) => {
     setInformation({
       ...information,
       [name]: value,
     });
+    if (errors && errors[name]) {
+      setErrors({
+        ...errors,
+        [name]: false,
+      });
+    }
   };
+  console.log(information);
 
   const validationInfo = () => {};
 
@@ -44,9 +51,11 @@ function Information({
     setLoading(true);
     console.log(prevInfo);
     console.log(prevInfo ? true : false);
+    console.log(information);
+
     if (!validationInfo())
       request[prevInfo ? "patchUserProfile" : "postUserProfile"](
-        data,
+        information,
         prevInfo ? prevInfo.uuid : Cookies.get("uuid")
       )
         .then((res) => {
@@ -83,6 +92,7 @@ function Information({
         variant="contained"
         onClick={sendReq}
         loading={loading}
+        disabled={Object.values(errors).find((error) => error)}
         className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
                  !rounded-[4px] !text-[14px] md:!text-[16px] !font-medium
                 !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]

helper/index.js

@@ -1,6 +1,7 @@
 import moment from "jalali-moment";
 import { toast } from "react-toastify";
 import specialties from "@/data/specialties.json";
+import Cookies from "js-cookie";
 
 export const numberToArStyle = (num) => num?.toLocaleString("ar-AE") || "";
 
@@ -194,3 +195,9 @@ export function hasDataChanged(previousData, newData) {
   const newDataString = JSON.stringify(newData, Object.keys(newData).sort());
   return oldDataString !== newDataString;
 }
+
+export const getParsedUserInfo = () => {
+  const user = Cookies.get("userInfo");
+  const parsedUserInfo = user && JSON.parse(user);
+  return parsedUserInfo;
+};