From 7020e6d4dc18327b7f824798b66ca3d02a3face6 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 6 Nov 2023 04:10:03 +0100 Subject: [PATCH 1/2] added family profile image upload --- src/components/FamilyAcc/FamilyManageTabs.jsx | 88 ++++++++++++++++--- src/components/FamilyAcc/Tabs/ProfileInfo.jsx | 6 ++ 2 files changed, 81 insertions(+), 13 deletions(-) diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx index ddd8e35..4779f30 100644 --- a/src/components/FamilyAcc/FamilyManageTabs.jsx +++ b/src/components/FamilyAcc/FamilyManageTabs.jsx @@ -66,6 +66,8 @@ export default function FamilyManageTabs({ // State for family task popout const [familyTaskPopout, setFamilyTaskPopout] = useState(false); + let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS + // State for profile image const [profileImg, setProfileImg] = useState(profile); @@ -90,24 +92,83 @@ export default function FamilyManageTabs({ * Checks if the selected file exceeds the maximum file size limit and displays an alert if it does. * If the file is within the size limit, it reads the file using the FileReader API and sets the profile image state with the result. */ - const profileImgChangeHandler = (e) => { - const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB + // const profileImgChangeHandler = (e) => { + // const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB - const file = e.target.files[0]; - if (file && file.size > MAX_FILE_SIZE) { - alert("File size exceeds the limit."); - return; + // const file = e.target.files[0]; + // if (file && file.size > MAX_FILE_SIZE) { + // alert("File size exceeds the limit."); + // return; + // } + + // if (file) { + // const imgReader = new FileReader(); + // imgReader.onload = () => { + // const imageDataUrl = imgReader.result; + + // // Set the profile image + // setProfileImg(imageDataUrl); + // }; + // imgReader.readAsDataURL(file); + // } + // }; + + const profileImgChangeHandler = (e) => { + 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 (file) { - const imgReader = new FileReader(); - imgReader.onload = () => { - const imageDataUrl = imgReader.result; + 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) + } - // Set the profile image - setProfileImg(imageDataUrl); + 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(file); + imgReader.readAsDataURL(e.target.files[0]); } }; @@ -298,6 +359,7 @@ export default function FamilyManageTabs({ profileImgChangeHandler={profileImgChangeHandler} browseProfileImg={browseProfileImg} accountDetails={accountDetails} + uploadStatus={uploadStatus} />
+ {/* DISPLAYS PROFILE UPLOADING STATUS */} +
+ {uploadStatus.message && !uploadStatus.loading &&

{uploadStatus.message}

} + {uploadStatus.loading &&

{uploadStatus.message}

} +

{accountDetails?.firstname} From 4f0d432176a8c73a2ebbc0a4cae5466ec8dfd7b8 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 6 Nov 2023 12:42:10 +0100 Subject: [PATCH 2/2] family profile image upload API added --- src/components/FamilyAcc/FamilyManageTabs.jsx | 19 +++++++------------ src/components/FamilyAcc/FamilyTable.jsx | 14 +++++++++----- src/components/FamilyAcc/index.jsx | 9 +++++---- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx index 4779f30..2287516 100644 --- a/src/components/FamilyAcc/FamilyManageTabs.jsx +++ b/src/components/FamilyAcc/FamilyManageTabs.jsx @@ -33,7 +33,7 @@ export default function FamilyManageTabs({ loading: false, data: null, }; - +console.log('accountDetails',accountDetails) // State for family details, tasks, waitlist, and pending const [details, setDetails] = useState({ familyDetails: { ...initialDetailState }, @@ -69,7 +69,7 @@ export default function FamilyManageTabs({ let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS // State for profile image - const [profileImg, setProfileImg] = useState(profile); + const [profileImg, setProfileImg] = useState(accountDetails.image ? accountDetails.image : profile); // Ref for profile image input const profileImgInput = useRef(null); @@ -118,15 +118,9 @@ export default function FamilyManageTabs({ 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]}, ` - } - } + const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase(); + 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 @@ -146,12 +140,13 @@ export default function FamilyManageTabs({ const imgReader = new FileReader(); imgReader.onload = (event) => { let reqData = { // PAYLOAD FOR API CALL + family_uid: accountDetails?.family_uid, 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 + action: 111305 } setUploadStatus({loading: true, status: false, message:'Loading...'}) apiCall.sendFiles(reqData).then(res=>{ diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx index 29835cb..35a94ef 100644 --- a/src/components/FamilyAcc/FamilyTable.jsx +++ b/src/components/FamilyAcc/FamilyTable.jsx @@ -19,6 +19,7 @@ export default function FamilyTable({ familyList, loader, popUpHandler, + imageServer }) { const navigate = useNavigate(); const [currentPage, setCurrentPage] = useState(0); @@ -54,12 +55,14 @@ export default function FamilyTable({ banner, enable_traking, profile_picture, + imageServer }) => { // Check for valid dates const addedDate = added ? added.split(" ")[0] : "N/A"; const loginDate = last_login ? formatDateString(last_login) : "N/A"; const key = `family-${family_uid}`; // Assign a unique key - + const image = localStorage.getItem('session_token') ? `${imageServer}${localStorage.getItem('session_token')}/family/${family_uid}` : '' + const trackingStatus = enable_traking === "0" ? "Stopped" @@ -76,8 +79,8 @@ export default function FamilyTable({
{`Avatar @@ -133,6 +136,7 @@ export default function FamilyTable({ task_count, family_uid, banner, + image }) } type="button" @@ -182,7 +186,7 @@ export default function FamilyTable({ {currentFamilyList?.map((familyMember, index) => { - return ; + return ; })} @@ -213,7 +217,7 @@ export default function FamilyTable({ = familyList.length} + next={currentPage + itemsPerPage >= familyList?.length} data={familyList} start={indexOfFirstItem} stop={indexOfLastItem} diff --git a/src/components/FamilyAcc/index.jsx b/src/components/FamilyAcc/index.jsx index 9c73585..22d9d7d 100644 --- a/src/components/FamilyAcc/index.jsx +++ b/src/components/FamilyAcc/index.jsx @@ -17,7 +17,7 @@ export default function FamilyAcc() { // State to store the selected year and month const [selectedYear, setSelectedYear] = useState(""); const [selectedMonth, setSelectedMonth] = useState(""); - const [familyList, setFamilyList] = useState([]); + const [familyList, setFamilyList] = useState({}); const [loader, setLoader] = useState(false); const [popUp, setPopUp] = useState(false); const [listReload, setListReload] = useState(false); @@ -115,8 +115,8 @@ export default function FamilyAcc() { const res = await apiCall.familyListings(reqData); const { data } = res; if (data?.internal_return >= 0 && data?.status === "OK") { - const { result_list } = data; - setFamilyList(result_list); + const { result_list, session_image_server } = data; + setFamilyList({result_list, session_image_server}); setLoader(false); } else { return; @@ -172,9 +172,10 @@ export default function FamilyAcc() {
}>