Added Image Path for server image

src/components/Settings/index.jsx

@@ -6,8 +6,6 @@ import React, {
   useState,
 } from "react";
 import { useSelector } from "react-redux";
-import cover from "../../assets/images/profile-info-cover.png";
-import profile from "../../assets/images/profile.jpg";
 import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";
 import Layout from "../Partials/Layout";
@@ -26,161 +24,8 @@ import RecipientAccountTab from "./Tabs/RecipientAccountTab";
 export default function Settings({ faq }) {
   const apiCall = new usersService();
   const { userDetails } = useSelector((state) => state?.userDetails);
-  const [profileImg, setProfileImg] = useState(
-    userDetails?.profile_pic_url ? userDetails.profile_pic_url : profile
-  );
-  let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
-  const [coverImg, setCoverImg] = useState(cover);
   const [reloadCardList, setReloadCardList] = useState(false); // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
 
-  // profile img
-  const profileImgInput = useRef(null);
-  const browseProfileImg = () => {
-    profileImgInput.current.click();
-  };
-  const profileImgChangHandler = (e) => {
-    // if (e.target.value !== "") {
-    //   const imgReader = new FileReader();
-    //   imgReader.onload = (event) => {
-    //     setProfileImg(event.target.result);
-    //   };
-    //   imgReader.readAsDataURL(e.target.files[0]);
-    // }
-    setUploadStatus({loading: false, status: false, message:''})
-    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"] // ARRAY OF SUPPORTED FORMATS
-    let uploadedFile = e.target.files[0] //UPLOADED FILE
-
-    if(!acceptedFormat.includes(uploadedFile?.type?.split("/")[1]?.toLowerCase())){ //CHECKING FOR CORRECT UPLOAD FORMAT
-      let msg = 'Please select '
-      for(let i=0; i<=acceptedFormat.length-1; i++){
-        if(i == acceptedFormat.length-1){
-          msg+=`or ${acceptedFormat[i]}`
-        }else{
-          msg+=`${acceptedFormat[i]}, `
-        }
-      }
-      setUploadStatus({loading: false, status: false, message:msg})
-      return setTimeout(()=>{
-        profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
-    }
-
-    if(uploadedFile.size > 5*1048576){ // CHECKING FOR CORRECT FILE SIZE
-      setUploadStatus({loading: false, status: false, message:'File must not exceed 5MB'})
-      return setTimeout(()=>{
-        profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
-    }
-
-    if (e.target.value !== "") {
-      const imgReader = new FileReader();
-      imgReader.onload = (event) => {
-        let reqData = { // PAYLOAD FOR API CALL
-          file_name: uploadedFile?.name,
-          file_size: uploadedFile?.size,
-          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
-          file_data: event?.target?.result,
-          msg_type: 'FILE',
-          action: 'WRENCHBOARD_PICTURE_PROFILE',
-          // action: 11307
-        }
-        setUploadStatus({loading: true, status: false, message:'Loading...'})
-        apiCall.sendFiles(reqData).then(res=>{
-          if(res.status != 200 || res.data.internal_return < 0){
-            return setUploadStatus({loading: false, status: false, message: 'Something went wrong, try again'})
-          }
-          setUploadStatus({loading: false, status: true, message: 'Uploaded successfully'})
-          setProfileImg(event.target.result);
-        }).catch(error=>{
-          setUploadStatus({loading: false, status: false, message: 'Network error, try again'})
-        }).finally(()=>{
-          setTimeout(()=>{
-            setUploadStatus({loading: false, status: false, message: ''})
-          },5000)
-        })
-      };
-      imgReader.readAsDataURL(e.target.files[0]);
-    }
-  };
-  // cover img
-  const coverImgInput = useRef(null);
-  const browseCoverImg = () => {
-    coverImgInput.current.click();
-  };
-  const coverImgChangHandler = (e) => {
-    if (e.target.value !== "") {
-      const imgReader = new FileReader();
-      imgReader.onload = (event) => {
-        setCoverImg(event.target.result);
-      };
-      imgReader.readAsDataURL(e.target.files[0]);
-    }
-  };
-
-  // Tabs Handling
-  const tabs = [
-    {
-      id: 1,
-      name: "personal",
-      title: "Edit Profile",
-      iconName: "people-hover",
-    },
-    {
-      id: 2,
-      name: "payment",
-      title: "Payment Cards",
-      iconName: "bank-card",
-    },
-    {
-      id: 3,
-      name: "recipients-account",
-      title: "Recipients Account",
-      iconName: "bank-card",
-    },
-    {
-      id: 4,
-      name: "notification",
-      title: "Notification Setting",
-      iconName: "notification-setting",
-    },
-    {
-      id: 5,
-      name: "login_activity",
-      title: "Login Activity",
-      iconName: "login-activity",
-    },
-    {
-      id: 6,
-      name: "password",
-      title: "Change Password",
-      iconName: "password-hover",
-    },
-    {
-      id: 7,
-      name: "faq",
-      title: "FAQ",
-      iconName: "block-question",
-    },
-    {
-      id: 8,
-      name: "privacy",
-      title: "Privacy Policy",
-      iconName: "page-right",
-    },
-    {
-      id: 9,
-      name: "terms",
-      title: "Terms and Conditions",
-      iconName: "page-right",
-    },
-  ];
-  const [tab, setTab] = useState(tabs[0].name);
-  const tabHandler = (value) => {
-    setTab(value);
-  };
-
   // Recipient Account
   const [recipientAccount, setRecipientAccount] = useState({
     state: false,
@@ -223,6 +68,120 @@ export default function Settings({ faq }) {
     getRecipientAccount();
   }, [reloadCardList]);
 
+  // Tabs Handling
+  const tabs = [
+    {
+      id: 1,
+      name: "personal",
+      title: "Edit Profile",
+      iconName: "people-hover",
+    },
+    {
+      id: 2,
+      name: "payment",
+      title: "Payment Cards",
+      iconName: "bank-card",
+    },
+    {
+      id: 3,
+      name: "recipients_account",
+      title: "Recipients Account",
+      iconName: "bank-card",
+    },
+    {
+      id: 4,
+      name: "notification",
+      title: "Notification Setting",
+      iconName: "notification-setting",
+    },
+    {
+      id: 5,
+      name: "login_activity",
+      title: "Login Activity",
+      iconName: "login-activity",
+    },
+    {
+      id: 6,
+      name: "password",
+      title: "Change Password",
+      iconName: "password-hover",
+    },
+    {
+      id: 7,
+      name: "faq",
+      title: "FAQ",
+      iconName: "block-question",
+    },
+    {
+      id: 8,
+      name: "privacy",
+      title: "Privacy Policy",
+      iconName: "page-right",
+    },
+    {
+      id: 9,
+      name: "terms",
+      title: "Terms and Conditions",
+      iconName: "page-right",
+    },
+  ];
+
+  const [tab, setTab] = useState(() => {
+    // Retrieve the active tab from local storage or use the default tab
+    return localStorage.getItem("activeTab") || tabs[0].name;
+  });
+
+  const tabHandler = (value) => {
+    setTab(value);
+  };
+
+  // Update local storage when the tab changes
+  useEffect(() => {
+    localStorage.setItem("activeTab", tab);
+  }, [tab]);
+
+  const tabComponents = {
+    personal: (
+      <div className="tab-item">
+        <PersonalInfoTab />
+      </div>
+    ),
+    payment: (
+      <div className="tab-item">
+        <PaymentMathodsTab />
+      </div>
+    ),
+    recipients_account: (
+      <div className="tab-item">
+        <RecipientAccountTab
+          recipientAccount={recipientAccount}
+          setRecipientAccount={setRecipientAccount}
+          setReloadCardList={setReloadCardList}
+        />
+      </div>
+    ),
+    notification: (
+      <div className="tab-item">
+        <NotificationSettingTab />
+      </div>
+    ),
+    login_activity: <LoginActivityTab />,
+    password: <ChangePasswordTab />,
+    faq: <FaqTab datas={faq} />,
+    privacy: <PrivacyPolicyTab />,
+    terms: <TermsConditionTab />,
+  };
+
+  // Default tab component
+  const defaultTabComponent = (
+    <div className="tab-item">
+      <PersonalInfoTab />
+    </div>
+  );
+
+  // Selected tab component based on the current 'tab'
+  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
+
   return (
     <>
       <Layout>
@@ -263,45 +222,7 @@ export default function Settings({ faq }) {
                 </div>
                 <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
                 <div className="content-body-items flex-1">
-                  {tab === "personal" && (
-                    <div className="tab-item">
-                      <PersonalInfoTab
-                        profileImg={profileImg}
-                        coverImg={coverImg}
-                        browseProfileImg={browseProfileImg}
-                        profileImgInput={profileImgInput}
-                        profileImgChangHandler={profileImgChangHandler}
-                        coverImgChangHandler={coverImgChangHandler}
-                        browseCoverImg={browseCoverImg}
-                        coverImgInput={coverImgInput}
-                        uploadStatus={uploadStatus}
-                      />
-                    </div>
-                  )}
-                  {tab === "payment" && (
-                    <div className="tab-item">
-                      <PaymentMathodsTab />
-                    </div>
-                  )}
-                  {tab === "recipients-account" && (
-                    <div className="tab-item">
-                      <RecipientAccountTab
-                        recipientAccount={recipientAccount}
-                        setRecipientAccount={setRecipientAccount}
-                        setReloadCardList={setReloadCardList}
-                      />
-                    </div>
-                  )}
-                  {tab === "notification" && (
-                    <div className="tab-item">
-                      <NotificationSettingTab />
-                    </div>
-                  )}
-                  {tab === "login_activity" && <LoginActivityTab />}
-                  {tab === "password" && <ChangePasswordTab />}
-                  {tab === "faq" && <FaqTab datas={faq} />}
-                  {tab === "privacy" && <PrivacyPolicyTab />}
-                  {tab === "terms" && <TermsConditionTab />}
+                  {selectedTabComponent}
                 </div>
               </div>
             </div>