WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

refactored some components and seperated their API calls

Browse Source
This commit was merged in pull request #681.
This commit is contained in:
victorAnumudu
2024-03-27 23:17:58 +01:00
parent 23443a4677
commit 36d8c70fd9
13 changed files with 255 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/Tabs/FamilyAccount.jsx
+5 -5
View File
@@ -3,7 +3,7 @@ import QRCode from "react-qr-code";
import { useSelector } from "react-redux";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, ref) => {
const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint}, ref) => {
const { userDetails } = useSelector((state) => state.userDetails);
return (
<div
@@ -16,13 +16,13 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
<h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
Username:{" "}
<span className="ml-2 normal-case">
{familyData?.username ? familyData?.username : "please wait..."}
{familyData?.data?.username ? familyData?.data?.username : "please wait..."}
</span>
</h2>
<h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
Pin:{" "}
<span className="ml-2 normal-case">
{familyData?.pin ? familyData?.pin : "please wait..."}
{familyData?.data?.pin ? familyData?.data?.pin : "please wait..."}
</span>
</h2>
</div>
@@ -35,7 +35,7 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
<p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
Scan the code from mobile app
</p>
{loader ?
{familyData.loading ?
<div className="w-full">
<LoadingSpinner size='8' color='sky-blue' />
</div>
@@ -44,7 +44,7 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
size={256}
style={{ height: "auto", maxWidth: "100%", width: "100%" }}
// value={`https://www.google.com`}
value={`${userDetails?.uid}@${familyData?.username}@${familyData?.uid}`}
value={`${userDetails?.uid}@${familyData?.data?.username}@${familyData?.data?.uid}`}
viewBox={`0 0 256 256`}
/>
}
src/components/FamilyAcc/Tabs/FamilyNewPending.jsx
+14 -7
View File
@@ -2,13 +2,14 @@ import { useMemo, useState } from "react";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
import { PaginatedList, handlePagingFunc } from "../../Pagination";
import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
export default function FamilyPending({ familyData, image_link, loader }) {
export default function FamilyPending({ familyData }) {
let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
let filteredFamilyData = useMemo(
() => familyData?.filter((data) => data.family_uid !== ""),
[familyData]
() => familyData?.data?.result_list?.filter((data) => data.family_uid !== ""),
[familyData?.data?.result_list]
);
const [currentPage, setCurrentPage] = useState(0);
@@ -25,13 +26,18 @@ export default function FamilyPending({ familyData, image_link, loader }) {
handlePagingFunc(e, setCurrentPage);
};
console.log(image_link);
return (
<div
className={`update-table w-full p-3 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px]`}
>
{familyData && (
{familyData.loading ?
(<div className="w-full h-full flex justify-center items-center">
<LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
</div>
):
<>
{familyData?.data?.result_list && (
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
@@ -45,7 +51,7 @@ export default function FamilyPending({ familyData, image_link, loader }) {
value?.currency_code,
value?.currency
);
let image = `${image_link}${localStorage.getItem(
let image = `${familyData?.data?.session_image_server}${localStorage.getItem(
"session_token"
)}/job/${value.job_uid}`;
return (
@@ -137,7 +143,8 @@ export default function FamilyPending({ familyData, image_link, loader }) {
{/* END OF PAGINATION BUTTON */}
</div>
)}
</>
}
{/* Active Job Popout */}
{jobPopout.show && (
<PendingJobsPopout
src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx
+9 -11
View File
@@ -9,17 +9,15 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
export default function FamilyNewTasks({
familyData,
className,
loader,
action,
image_link,
}) {
let navigate = useNavigate();
let { pathname } = useLocation();
// ...
let filteredFamilyData = useMemo(
() => familyData?.filter((data) => data.family_uid !== ""),
[familyData]
() => familyData?.data?.result_list?.filter((data) => data.family_uid !== ""),
[familyData?.data?.result_list]
);
const [currentPage, setCurrentPage] = useState(0);
@@ -36,22 +34,22 @@ export default function FamilyNewTasks({
return (
<div
className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] overflow-hidden rounded-2xl section-shadow p-3 ${
familyData?.length <= 0 && "flex items-center justify-center"
familyData?.data?.result_list?.length <= 0 && "flex items-center justify-center"
}`}
>
{loader ? (
<div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
<LoadingSpinner size={16} color="sky-blue" />
{familyData.loading ? (
<div className="w-full h-full flex justify-center items-center">
<LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
</div>
) : (
<>
{familyData && (
{familyData?.data?.result_list && (
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
{
<>
{familyData?.length <= 0 ? (
{familyData?.data?.result_list?.length <= 0 ? (
<tr>
<td
colSpan="2"
@@ -76,7 +74,7 @@ export default function FamilyNewTasks({
value?.currency_code,
value?.currency
);
let image = `${image_link}${localStorage.getItem(
let image = `${familyData?.data?.result_list}${localStorage.getItem(
"session_token"
)}/job/${value.job_uid}`;
return (
src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx
+8 -10
View File
@@ -8,8 +8,6 @@ import Icons from "../../Helpers/Icons";
const FamilyNewWaitlist = ({
familyData,
className,
accountDetails,
loader,
setUpdatePage
}) => {
const [popUp, setPopUp] = useState({ show: false, data: {} });
@@ -22,7 +20,7 @@ const FamilyNewWaitlist = ({
const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
const indexOfFirstItem = currentPage;
const indexOfLastItem = currentPage + itemsPerPage;
const currentTask = familyData?.slice(
const currentTask = familyData?.data?.result_list?.slice(
indexOfFirstItem,
indexOfLastItem
);
@@ -53,13 +51,13 @@ const FamilyNewWaitlist = ({
className || ""
}`}
>
{loader ? (
<div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
<LoadingSpinner size={16} color="sky-blue" />
{familyData.loading ? (
<div className="w-full h-full flex justify-center items-center">
<LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
</div>
) : (
<>
{familyData && (
{familyData?.data?.result_list && (
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
@@ -69,7 +67,7 @@ const FamilyNewWaitlist = ({
value?.banner || "default.jpg"
}`);
// console.log("VALUE", value);
// let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
// let image = `${familyData?.data?.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
return (
<tr
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
@@ -121,8 +119,8 @@ const FamilyNewWaitlist = ({
<PaginatedList
onClick={handlePagination}
prev={currentPage === 0}
next={currentPage + itemsPerPage >= familyData?.length}
data={familyData}
next={currentPage + itemsPerPage >= familyData?.data?.result_list?.length}
data={familyData?.data?.result_list}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
src/components/FamilyAcc/Tabs/FamilyPending.jsx
+12 -3
View File
@@ -3,6 +3,7 @@ import localImgLoad from "../../../lib/localImgLoad";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
import { PaginatedList, handlePagingFunc } from "../../Pagination";
import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
export default function FamilyPending({
familyData,
@@ -15,10 +16,10 @@ export default function FamilyPending({
let filteredFamilyData = useMemo(
() =>
familyData?.result_list?.filter(
familyData?.data?.result_list?.filter(
(data) => data?.family_uid === accountDetails?.family_uid
),
[accountDetails?.family_uid, familyData?.result_list]
[accountDetails?.family_uid, familyData?.data?.result_list]
);
const [currentPage, setCurrentPage] = useState(0);
@@ -41,6 +42,12 @@ export default function FamilyPending({
className || ""
}`}
>
{familyData.loading ?
(<div className="w-full h-full flex justify-center items-center">
<LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
</div>
):
<>
{filteredFamilyData && (
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
@@ -55,7 +62,7 @@ export default function FamilyPending({
value?.currency_code,
value?.currency
);
let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
let image = `${familyData.data.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
return (
<tr
key={index}
@@ -145,6 +152,8 @@ export default function FamilyPending({
{/* END OF PAGINATION BUTTON */}
</div>
)}
</>
}
{/* Active Job Popout */}
{jobPopout.show && (
src/components/FamilyAcc/Tabs/FamilyTasks.jsx
+13 -14
View File
@@ -10,7 +10,6 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
export default function FamilyTasks({
familyData,
className,
loader,
accountDetails,
}) {
let navigate = useNavigate();
@@ -19,17 +18,17 @@ export default function FamilyTasks({
// ...
const filteredFamilyData = useMemo(
() =>
familyData?.result_list?.filter(
familyData?.data?.result_list?.filter(
(data) => data?.family_uid === accountDetails?.family_uid
),
[familyData, accountDetails]
[familyData?.data, accountDetails]
);
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem =
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentTask = familyData?.result_list.slice(
const currentTask = familyData?.data?.result_list?.slice(
indexOfFirstItem,
indexOfLastItem
);
@@ -43,21 +42,21 @@ export default function FamilyTasks({
className || ""
}`}
>
{loader ? (
<div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
<LoadingSpinner size={16} color="sky-blue" />
{familyData.loading ? (
<div className="w-full h-full flex justify-center items-center">
<LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
</div>
) : (
<>
{familyData && familyData?.result_list && (
{familyData?.data && familyData?.data?.result_list && (
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
{
<>
{familyData &&
familyData?.result_list &&
familyData.result_list.length > 0 ? (
{familyData?.data &&
familyData?.data?.result_list &&
familyData?.data.result_list.length > 0 ? (
currentTask.map((value, index) => {
// find due date
const dueDate = value?.delivery_date.split(" ")[0];
@@ -67,7 +66,7 @@ export default function FamilyTasks({
value?.currency_code,
value?.currency
);
let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
let image = `${familyData?.data?.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
return (
<tr
key={index}
@@ -149,11 +148,11 @@ export default function FamilyTasks({
prev={currentPage == 0 ? true : false}
next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
familyData?.result_list.length
familyData?.data?.result_list.length
? true
: false
}
data={familyData?.result_list}
data={familyData?.data?.result_list}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
+7 -8
View File
@@ -5,7 +5,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
const FamilyWaitlist = memo(
({ familyData, className, accountDetails, loader, setUpdatePage }) => {
({ familyData, className, accountDetails, setUpdatePage }) => {
const [popUp, setPopUp] = useState({ show: false, data: {} });
const [continueTaskPopup, setContinueTaskPopup] = useState({
show: false,
@@ -13,10 +13,10 @@ const FamilyWaitlist = memo(
});
const filteredFamilyData = useMemo(
() =>
familyData?.result_list?.filter(
familyData?.data?.result_list?.filter(
(data) => data?.family_uid === accountDetails?.family_uid
),
[familyData, accountDetails]
[familyData.data, accountDetails]
);
const [currentPage, setCurrentPage] = useState(0);
@@ -52,9 +52,9 @@ const FamilyWaitlist = memo(
className || ""
}`}
>
{loader ? (
<div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
<LoadingSpinner size={16} color="sky-blue" />
{familyData.loading ? (
<div className="w-full h-full flex justify-center items-center">
<LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
</div>
) : (
<>
@@ -67,8 +67,7 @@ const FamilyWaitlist = memo(
const selectedImage = require(`../../../assets/images/family/${
value?.banner || "default.jpg"
}`);
console.log('VALUE', value)
// let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
// let image = `${familyData.data.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
return (
<tr
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
src/components/FamilyAcc/Tabs/FamilyWallet.jsx
-2
View File
@@ -17,8 +17,6 @@ function FamilyWallet({familyData}) {
setFamilyWallet({loading:true, data: []})
apiUrl.getKidWallets({family_uid:familyData?.uid}).then(res => {
setFamilyWallet({loading:false, data: res?.data?.result_list || []})
console.log('familyData', familyData, res?.data?.result_list)
}).catch(error => {
setFamilyWallet({loading:false, data: []})
})