made family page to reload after adding a task

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -51,6 +51,8 @@ export default function FamilyManageTabs({
     });
   };
 
+  const [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page
+
   // State for family task data
   const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
 
@@ -220,7 +222,7 @@ export default function FamilyManageTabs({
 
     // Invoke the manageFamily function when the component mounts
     manageFamily();
-  }, []);
+  }, [updatePage]);
 
   // Effect to manage family tasks
   useEffect(() => {
@@ -356,6 +358,7 @@ export default function FamilyManageTabs({
           setActiveTask={setActiveTask}
           activeTask={activeTask}
           familyDetailsData={details.familyDetails.data}
+          setUpdatePage={setUpdatePage}
         />
       )}
     </div>

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -15,6 +15,7 @@ const AssignTaskPopout = React.memo(
     familyTask,
     activeTask,
     setActiveTask,
+    setUpdatePage
   }) => {
     const apiCall = new usersService();
 
@@ -143,6 +144,7 @@ const AssignTaskPopout = React.memo(
             status: true,
             message: "action successful",
           });
+          setUpdatePage(prev => !prev) // Updates family task page by calling the useeffect hook
           setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
             action(); // FUNCTION THAT CLOSES THE MODAL BOX

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -51,7 +51,6 @@ export default function PersonalInfoTab({
   coverImgInput,
   browseCoverImg,
   coverImgChangHandler,
-  uploadStatus
 }) {
   let { userDetails } = useSelector((state) => state.userDetails);
 
@@ -362,7 +361,7 @@ export default function PersonalInfoTab({
                     {/* inputs ends here */}
                   </div>
                 </div>
-                {/* {process.env.REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE != 0 && */}
+                {process.env.REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE != 0 &&
                   <div className="w-[232px] mb-10">
                     <div className="update-profile w-full mb-9">
                       <h1 className="text-xl tracking-wide font-bold text-dark-gray dark:text-white flex items-center mb-2">
@@ -418,11 +417,9 @@ export default function PersonalInfoTab({
                           </div>
                         </div>
                       </div>
-                      {uploadStatus.message && !uploadStatus.loading && <p className={`text-center ${uploadStatus.status ? 'text-green-500':'text-red-500'}`}>{uploadStatus.message}</p>}
-                      {uploadStatus.loading && <p className="text-center">{uploadStatus.message}</p>}
                     </div>
                   </div>
-                {/* } */}
+                }
               </div>
 
               <div className="content-footer w-full">

src/components/Settings/index.jsx

@@ -24,12 +24,10 @@ import {
 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
 
@@ -38,68 +36,12 @@ export default function Settings({ faq }) {
   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)
-        })
+        setProfileImg(event.target.result);
       };
       imgReader.readAsDataURL(e.target.files[0]);
     }
@@ -119,6 +61,7 @@ export default function Settings({ faq }) {
     }
   };
 
+  const apiCall = useMemo(() => new usersService(), []);
   // Tabs Handling
   const tabs = [
     {
@@ -170,7 +113,7 @@ export default function Settings({ faq }) {
       iconName: "page-right",
     },
     {
-      id: 9,
+      id: 8,
       name: "terms",
       title: "Terms and Conditions",
       iconName: "page-right",
@@ -274,7 +217,6 @@ export default function Settings({ faq }) {
                         coverImgChangHandler={coverImgChangHandler}
                         browseCoverImg={browseCoverImg}
                         coverImgInput={coverImgInput}
-                        uploadStatus={uploadStatus}
                       />
                     </div>
                   )}