changed timeout duration

src/components/Settings/Tabs/PersonalInfoTab.jsx

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