From fe270b7431e940be954619747719fd6980922006 Mon Sep 17 00:00:00 2001 From: Ebube Date: Sat, 20 May 2023 22:24:38 +0100 Subject: [PATCH 1/3] first stage of layout --- src/components/FamilyAcc/FamilyManage.jsx | 335 ++++-------------- src/components/FamilyAcc/FamilyManageTabs.jsx | 168 +++++++-- src/components/FamilyAcc/FamilyTable.jsx | 127 +++---- 3 files changed, 290 insertions(+), 340 deletions(-) diff --git a/src/components/FamilyAcc/FamilyManage.jsx b/src/components/FamilyAcc/FamilyManage.jsx index da6fb22..0fb297e 100644 --- a/src/components/FamilyAcc/FamilyManage.jsx +++ b/src/components/FamilyAcc/FamilyManage.jsx @@ -5,281 +5,96 @@ import FamilyTable from "./FamilyTable"; import SiteService from "../../services/SiteService"; import ModalCom from "../Helpers/ModalCom"; import FamilyManageTabs from "./FamilyManageTabs"; +import { useLocation } from "react-router-dom"; export default function FamilyManage() { - const [selectTab, setValue] = useState("today"); - const [selectedAge, setSelectedAge] = useState(undefined); - const [familyList, setFamilyList] = useState([]); - const [loader, setLoader] = useState(false); - const [popUp, setPopUp] = useState(false); - const [listReload, setListReload] = useState(false); - const [msgErr, setMsgErr] = useState(""); - const [formData, setFormData] = useState({ - first_name: "", - last_name: "", - }); + const [selectTab, setValue] = useState("today"); + const [selectedAge, setSelectedAge] = useState(undefined); + const [familyList, setFamilyList] = useState([]); + const [loader, setLoader] = useState(false); + const [popUp, setPopUp] = useState(false); + const [listReload, setListReload] = useState(false); + const [msgErr, setMsgErr] = useState(""); + const [formData, setFormData] = useState({ + first_name: "", + last_name: "", + }); - const apiCall = useMemo(() => new SiteService(), []); + let location = useLocation(); + let accountDetails = location?.state - // This is to make sure it's called once and used everywhere - let memberId = localStorage.getItem("member_id"); - let uid = localStorage.getItem("uid"); - let sessionId = localStorage.getItem("session_token"); + const apiCall = useMemo(() => new SiteService(), []); - const popUpHandler = () => { - setPopUp((prev) => !prev); - }; + // This is to make sure it's called once and used everywhere + let memberId = localStorage.getItem("member_id"); + let uid = localStorage.getItem("uid"); + let sessionId = localStorage.getItem("session_token"); - // tab handler - const filterHandler = (value) => { - setValue(value); - }; + const popUpHandler = () => { + setPopUp((prev) => !prev); + }; - // For the age drop down - let startAge = 5; - let endAge = 16; - // creates an array of age values ranging from 16 to 70 - const ageRange = Array.from( - { length: endAge - startAge + 1 }, - (_, index) => startAge + index - ); - // age handler - const handleAgeSelect = (event) => { - setSelectedAge(parseInt(event.target.value)); - }; - // Input handler - const handleInputChange = (event) => { - const { name, value } = event?.target; - setFormData({ ...formData, [name]: value }); - }; + // tab handler + const filterHandler = (value) => { + setValue(value); + }; - // Add member - const addMember = async () => { - const { first_name, last_name } = formData; - setLoader(true); - try { - if (first_name !== "" && last_name !== "") { - let reqData = { - member_id: memberId, - uid: uid, - session_id: sessionId, - firstname: first_name, - lastname: last_name, - age: selectedAge, - }; + // member listing + const memberList = useCallback(async () => { + setLoader(true); + try { + let reqData = { + member_id: memberId, + uid: uid, + session_id: sessionId, + limit: 20, + offset: 0, + action: 22010, + }; - let res = await apiCall.addFamily(reqData); - const { data } = res; + let res = await apiCall.familyListings(reqData); + const { data } = res; + if (data?.internal_return >= 0 && data?.status == "OK") { + let { result_list } = data; + setFamilyList(result_list); + setLoader(false); + } else return; + } catch (error) { + setLoader(false); + throw new Error(error); + } + }, [apiCall, memberId, sessionId, uid]); - if (data?.internal_return > 0 && data?.status == "OK") { - setLoader(false); - setListReload((prev) => !prev); - } else { - setLoader(false); - setMsgErr("Sorry, something went wrong"); - } - } else { - setLoader(false); - setMsgErr("Please fill in the fields"); - } - } catch (error) { - setLoader(false); - setMsgErr("An error occurred"); - throw new Error(error); - } finally { - setTimeout(() => { - setMsgErr(null); - }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)); - setFormData({ - first_name: "", - last_name: "", - }); - } - }; + useEffect(() => { + memberList(); + }, [listReload, memberList]); - // member listing - const memberList = useCallback(async () => { - setLoader(true); - try { - let reqData = { - member_id: memberId, - uid: uid, - session_id: sessionId, - limit: 20, - offset: 0, - action: 22010, - }; - - let res = await apiCall.familyListings(reqData); - const { data } = res; - if (data?.internal_return >= 0 && data?.status == "OK") { - let { result_list } = data; - setFamilyList(result_list); - setLoader(false); - } else return; - } catch (error) { - setLoader(false); - throw new Error(error); - } - }, [apiCall, memberId, sessionId, uid]); - - useEffect(() => { - memberList(); - }, [listReload, memberList]); - - return ( - - {/**/} -
-
- {/* heading */} -
-
-

+ return ( + + {/**/} +
+
+ {/* heading */} +
+
+

Manage Family -

-
-
-
filterHandler("today")} - className="relative" - >
-
-
- -
+

- - - ); -} - -const FamilyForm = ({ - value: { first_name, last_name }, - ageValue, - inputHandler, - ageHandler, - ageRange, - msgErr, - loader, - onClick, - popUpHandler, - }) => { - return ( -
-
-

- Add Members -

- +
+
filterHandler("today")} + className="relative" + >
-
- - -
- {/* Age dropdown */} -
- -
-
- -
-
- {msgErr && ( -
- {msgErr} -
- )} -
-
- -
-
- +
+
- ); -}; - -const CloseIcon = () => ( - - - - -); +
+ + ); +} \ No newline at end of file diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx index e05a43b..6de5c56 100644 --- a/src/components/FamilyAcc/FamilyManageTabs.jsx +++ b/src/components/FamilyAcc/FamilyManageTabs.jsx @@ -1,24 +1,152 @@ -import React, { useState } from "react"; +import React, { useRef, useState } from "react"; import LoadingSpinner from "../Spinners/LoadingSpinner"; +import cover from "../../assets/images/profile-info-cover.png"; +import profile from "../../assets/images/profile-info-profile.png"; -export default function FamilyManageTabs({ className, familyList, loader }) { - return ( -
-
- {loader ? ( -
- -
- ) : ( - - -
- )} +export default function FamilyManageTabs({ + className, + accountDetails, + loader, +}) { + const tabs = [ + { + id: 1, + name: "Tasks", + }, + { + id: 2, + name: "Account", + }, + { + id: 3, + name: "Profile", + }, + ]; + const [tab, setTab] = useState(tabs[0].name); + const tabHandler = (value) => { + setTab(value); + }; + const [profileImg, setProfileImg] = useState(profile); + // 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]); + } + }; + return ( +
+
+ {loader ? ( +
+ +
+ ) : ( +
+
+
-
- ); +
+
+
    + {tabs.map(({ name, id }) => ( +
  • tabHandler(name)} + className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${ + tab === name + ? "text-purple border-r" + : " text-thin-light-gray" + }`} + key={id} + > +

    {name}

    +
    • + ))} +
+
{/* Your content here */}
+
+
+
+ )} +
+
+ ); +} + +function ProfileInfo({ + profileImg, + profileImgInput, + profileImgChangHandler, + browseProfileImg, + accountDetails, +}) { + let { firstname, lastname, age } = accountDetails; + return ( +
+
+
+ + profileImgChangHandler(e)} + type="file" + className="hidden" + /> +
+ + + + +
+
+
+
+

+ {firstname} +

+

+ {lastname} +

+

+ {age} +

+
+
+ ); } diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx index 0753d12..94fd883 100644 --- a/src/components/FamilyAcc/FamilyTable.jsx +++ b/src/components/FamilyAcc/FamilyTable.jsx @@ -1,12 +1,13 @@ import React, { useState } from "react"; import dataImage1 from "../../assets/images/data-table-user-1.png"; import LoadingSpinner from "../Spinners/LoadingSpinner"; -import { useNavigate, useLocation } from "react-router-dom"; +import { useNavigate, useLocation, Link } from "react-router-dom"; export default function FamilyTable({ className, familyList, loader }) { const filterCategories = ["All Categories", "Explore", "Featured"]; const [selectedCategory, setCategory] = useState(filterCategories[0]); const navigate = useNavigate(); + // let location = useLocation(); return (
<> {familyList?.length > 0 ? ( - familyList?.map( - ( - { firstname, lastname, age, added, last_login }, - idx - ) => { - let addedDate = added?.split(" ")[0]; - return ( - - -
-
- data -
-
-

- {`${firstname} ${lastname} (${age})`} -

- - Added:{" "} - - {addedDate} - + familyList?.map((props, idx) => { + let { + firstname, + lastname, + age, + added, + last_login, + task_count, + uid, + } = props; + let addedDate = added?.split(" ")[0]; + return ( + + +
+
+ data +
+
+

+ {`${firstname} ${lastname} (${age})`} +

+ + Added:{" "} + + {addedDate} -
-
- - -
- - {last_login}
- - -
- - 100 - -
- - - - - - ); - } - ) +
+ + +
+ + {last_login} + +
+ + +
+ + {task_count} + +
+ + + + + + ); + }) ) : ( From 3b877aafd02499dc964693e1bd4e530de588a0ea Mon Sep 17 00:00:00 2001 From: Ebube Date: Sun, 21 May 2023 18:22:16 +0100 Subject: [PATCH 2/3] nothing serious --- src/components/MyPendingJobs/index.jsx | 56 +++++++++++++------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/components/MyPendingJobs/index.jsx b/src/components/MyPendingJobs/index.jsx index b8470ea..3c40e12 100644 --- a/src/components/MyPendingJobs/index.jsx +++ b/src/components/MyPendingJobs/index.jsx @@ -5,37 +5,37 @@ import CommonHead from "../UserHeader/CommonHead"; import MyPendingJobTable from "./MyPendingJobTable"; export default function MyPendingJobs(props) { - const [selectTab, setValue] = useState("today"); - const filterHandler = (value) => { - setValue(value); - }; - console.log("AMEYE LOC1", props.MyJobList); - return ( - - -
-
- {/* heading */} -
-
-

+ const [selectTab, setValue] = useState("today"); + const filterHandler = (value) => { + setValue(value); + }; + console.log("AMEYE LOC1", props.MyJobList); + return ( + + +
+
+ {/* heading */} +
+
+

Pending Job(s) - -

-
-
-
filterHandler("today")} className="relative"> - -
-
-
- -
+

- - ); +
+
filterHandler("today")} + className="relative" + >
+
+
+ +
+
+ + ); } From 87d1bbafeff67f5107c3e5bb4271b398a530f26d Mon Sep 17 00:00:00 2001 From: Ebube Date: Sun, 21 May 2023 18:49:34 +0100 Subject: [PATCH 3/3] first part --- src/components/FamilyAcc/FamilyManage.jsx | 2 ++ src/components/FamilyAcc/FamilyTable.jsx | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/FamilyAcc/FamilyManage.jsx b/src/components/FamilyAcc/FamilyManage.jsx index 0fb297e..bc4c47e 100644 --- a/src/components/FamilyAcc/FamilyManage.jsx +++ b/src/components/FamilyAcc/FamilyManage.jsx @@ -69,6 +69,8 @@ export default function FamilyManage() { memberList(); }, [listReload, memberList]); +// console.log('Ebueb', familyList) + return ( {/**/} diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx index 94fd883..9c40177 100644 --- a/src/components/FamilyAcc/FamilyTable.jsx +++ b/src/components/FamilyAcc/FamilyTable.jsx @@ -44,6 +44,7 @@ export default function FamilyTable({ className, familyList, loader }) { uid, } = props; let addedDate = added?.split(" ")[0]; + let LoginDate = last_login?.split(" ")[0]; return (
- {last_login} + {LoginDate}