diff --git a/src/components/Partials/Header.jsx b/src/components/Partials/Header.jsx index 66c5f42..e9be0b3 100644 --- a/src/components/Partials/Header.jsx +++ b/src/components/Partials/Header.jsx @@ -36,6 +36,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) { const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE + const image = `${userDetails.session_image_server}${localStorage.getItem( + "session_token" + )}/profile/${userDetails.uid}`; + const handlerBalance = () => { setbalanceValue.toggle(); if (notificationDropdown) { @@ -91,7 +95,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) { // User Profile let { firstname, lastname, email, profile_pic_url } = userDetails; let userEmail = email?.split("@")[0]; - const userProfileImage = profile_pic_url || DEFAULT_PROFILE_IMAGE; + const userProfileImage = image || DEFAULT_PROFILE_IMAGE; return ( <> diff --git a/src/components/Settings/Tabs/PersonalInfoTab.jsx b/src/components/Settings/Tabs/PersonalInfoTab.jsx index 021751c..9d5dafa 100644 --- a/src/components/Settings/Tabs/PersonalInfoTab.jsx +++ b/src/components/Settings/Tabs/PersonalInfoTab.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import usersService from "../../../services/UsersService"; @@ -6,6 +6,9 @@ import Icons from "../../Helpers/Icons"; import InputCom from "../../Helpers/Inputs/InputCom"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; +import cover from "../../../assets/images/profile-info-cover.png"; +import profileImage from "../../../assets/images/profile.jpg"; + import { Form, Formik } from "formik"; import * as Yup from "yup"; @@ -43,18 +46,13 @@ export default function PersonalInfoTab({ frstNmeHndlr, lstNmeHndlr, dscrphn, - profileImg, - coverImg, - profileImgInput, - browseProfileImg, - profileImgChangHandler, - coverImgInput, - browseCoverImg, - coverImgChangHandler, - uploadStatus }) { let { userDetails } = useSelector((state) => state.userDetails); + const image = `${userDetails.session_image_server}${localStorage.getItem( + "session_token" + )}/profile/${userDetails.uid}`; + const apiCall = new usersService(); let navigate = useNavigate(); @@ -85,6 +83,123 @@ export default function PersonalInfoTab({ status: false, }); + const [profileImg, setProfileImg] = useState( + userDetails?.session_image_server ? image : profileImage + ); + + let [uploadStatus, setUploadStatus] = useState({ + loading: false, + status: false, + message: "", + }); // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS + + const [coverImg, setCoverImg] = useState(cover); + + // profile img + const profileImgInput = useRef(null); + const browseProfileImg = () => { + profileImgInput.current.click(); + }; + + const profileImgChangHandler = (e) => { + setUploadStatus({ loading: false, status: false, message: "" }); + const acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"]; // ARRAY OF SUPPORTED FORMATS + const uploadedFile = e.target.files[0]; //UPLOADED FILE + + const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase(); + const MAX_FILE_SIZE = 5 * 1048576; // 5MB + + if (!acceptedFormat.includes(fileFormat)) { + //CHECKING FOR CORRECT UPLOAD FORMAT + const msg = `Please select ${acceptedFormat + .slice(0, -1) + .join(", ")} or ${acceptedFormat.slice(-1)}`; + 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 > MAX_FILE_SIZE) { + // 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: 11300, + }; + 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(uploadedFile); + } + }; + + // 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]); + } + }; + const handleUpdateUser = (values, helpers) => { setRequestState({ message: "", loading: true, status: false }); @@ -363,65 +478,77 @@ export default function PersonalInfoTab({ {/* {process.env.REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE != 0 && */} -
-
-

- Update Profile - - - -

-

- Profile of at least Size - - 300x300 - - . Gifs work too. - - Max 5mb - - . -

-
-
- profile - profileImgChangHandler(e)} - type="file" - className="hidden" - /> -
+
+

+ Update Profile + + + +

+

+ Profile of at least Size + + 200x200 + + . Gifs work too. + + Max 5mb + + . +

+
+
+ profile + profileImgChangHandler(e)} + type="file" + className="hidden" + /> +
+ - - - - -
+ + +
- {uploadStatus.message && !uploadStatus.loading &&

{uploadStatus.message}

} - {uploadStatus.loading &&

{uploadStatus.message}

}
+ {uploadStatus.message && !uploadStatus.loading && ( +

+ {uploadStatus.message} +

+ )} + {uploadStatus.loading && ( +

{uploadStatus.message}

+ )}
+
{/* } */}
diff --git a/src/components/Settings/index.jsx b/src/components/Settings/index.jsx index 3038f7e..9969b9e 100644 --- a/src/components/Settings/index.jsx +++ b/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: ( +
+ +
+ ), + payment: ( +
+ +
+ ), + recipients_account: ( +
+ +
+ ), + notification: ( +
+ +
+ ), + login_activity: , + password: , + faq: , + privacy: , + terms: , + }; + + // Default tab component + const defaultTabComponent = ( +
+ +
+ ); + + // Selected tab component based on the current 'tab' + const selectedTabComponent = tabComponents[tab] || defaultTabComponent; + return ( <> @@ -263,45 +222,7 @@ export default function Settings({ faq }) {
- {tab === "personal" && ( -
- -
- )} - {tab === "payment" && ( -
- -
- )} - {tab === "recipients-account" && ( -
- -
- )} - {tab === "notification" && ( -
- -
- )} - {tab === "login_activity" && } - {tab === "password" && } - {tab === "faq" && } - {tab === "privacy" && } - {tab === "terms" && } + {selectedTabComponent}
diff --git a/src/services/UsersService.js b/src/services/UsersService.js index 0eeb773..159b0e9 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -838,11 +838,11 @@ class usersService { action: 14010, ...reqData, }; + const formData = new FormData(); for (let data in postData) { formData.append(data, postData[data]); } - // return this.postAuxEnd("/uploads", formData); return this.postAuxEnd("/uploads", postData); }