victorAnumudu
433 lines
15 KiB
React
433 lines
15 KiB
React
import React, {
|
|
Suspense,
|
|
lazy,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
} from "react";
|
|
import { useReactToPrint } from "react-to-print";
|
|
import profile from "../../assets/images/icons/family.svg";
|
|
import localImgLoad from "../../lib/localImgLoad";
|
|
import usersService from "../../services/UsersService";
|
|
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
|
import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
|
|
import FamilyWallet from "./Tabs/FamilyWallet";
|
|
|
|
// Lazy Imports for components
|
|
const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
|
|
const FamilyAccount = lazy(() => import("./Tabs/FamilyAccount"));
|
|
const FamilyProfile = lazy(() => import("./Tabs/FamilyProfile"));
|
|
const FamilyTasks = lazy(() => import("./Tabs/FamilyTasks"));
|
|
const ProfileInfo = lazy(() => import("./Tabs/ProfileInfo"));
|
|
const FamilyPending = lazy(() => import("./Tabs/FamilyPending"));
|
|
|
|
export default function FamilyManageTabs({
|
|
className,
|
|
accountDetails,
|
|
listReload,
|
|
loader,
|
|
}) {
|
|
// Initial state for family details
|
|
const initialDetailState = {
|
|
loading: false,
|
|
data: null,
|
|
};
|
|
// console.log('accountDetails',accountDetails)
|
|
// State for family details, tasks, waitlist, and pending
|
|
const [details, setDetails] = useState({
|
|
familyDetails: { ...initialDetailState },
|
|
familyTasks: { ...initialDetailState },
|
|
familyWaitList: { ...initialDetailState },
|
|
familyPending: { ...initialDetailState },
|
|
});
|
|
|
|
// Function to reset family details, tasks, waitlist, and pending
|
|
const resetDetails = () => {
|
|
setDetails({
|
|
familyDetails: { ...initialDetailState },
|
|
familyTasks: { ...initialDetailState },
|
|
familyWaitList: { ...initialDetailState },
|
|
familyPending: { ...initialDetailState },
|
|
});
|
|
};
|
|
|
|
const [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page
|
|
|
|
// State for family task data
|
|
const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
|
|
|
|
// State for active task
|
|
const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
|
|
|
|
// State for error messages
|
|
const [errMsg, setErrMsg] = useState("");
|
|
|
|
// 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(accountDetails.image ? accountDetails.image : profile);
|
|
|
|
// Ref for profile image input
|
|
const profileImgInput = useRef(null);
|
|
|
|
// Create an instance of the usersService class
|
|
const apiCall = useMemo(() => new usersService(), []);
|
|
|
|
// Function to handle toggling the family task popout
|
|
const familyPopUpHandler = () => {
|
|
setFamilyTaskPopout((prev) => !prev);
|
|
};
|
|
|
|
// Function to trigger a click on the hidden profile image input
|
|
const browseProfileImg = () => {
|
|
profileImgInput.current.click();
|
|
};
|
|
|
|
/**
|
|
* Handles the change event of the profile image input field.
|
|
* 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) => {
|
|
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
|
|
|
|
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
|
|
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 base64Img = imgReader.result.split(",")[1];
|
|
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: base64Img,
|
|
msg_type: 'FILE',
|
|
action: 11305
|
|
}
|
|
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]);
|
|
}
|
|
};
|
|
|
|
// Ref for the account section
|
|
const accountRef = useRef();
|
|
|
|
// React-to-Print hook for handling printing
|
|
const useHandlePrint = useReactToPrint({
|
|
content: () => accountRef.current,
|
|
});
|
|
|
|
// Array of tab names
|
|
const tabs = [
|
|
{ id: 1, name: "Tasks" },
|
|
{ id: 2, name: "Waiting" },
|
|
{ id: 3, name: "Pending" },
|
|
];
|
|
|
|
// State for the currently selected tab
|
|
const [tab, setTab] = useState(tabs[0].name);
|
|
|
|
// Function to handle tab changes
|
|
const tabHandler = (value) => {
|
|
setTab(value);
|
|
};
|
|
|
|
// Object that maps tab names to their corresponding components
|
|
const tabComponents = {
|
|
Tasks: (
|
|
<FamilyTasks
|
|
className={className}
|
|
loader={details.familyTasks.loading}
|
|
familyData={details.familyTasks.data}
|
|
accountDetails={accountDetails}
|
|
/>
|
|
),
|
|
Waiting: (
|
|
<FamilyWaitlist
|
|
familyData={details.familyWaitList.data}
|
|
accountDetails={accountDetails}
|
|
loader={details.familyWaitList.loading}
|
|
/>
|
|
),
|
|
Pending: (
|
|
<FamilyPending
|
|
familyData={details.familyPending.data}
|
|
accountDetails={accountDetails}
|
|
loader={details.familyPending.loading}
|
|
/>
|
|
),
|
|
Account: (
|
|
<FamilyAccount
|
|
familyData={details.familyDetails.data}
|
|
myRef={accountRef}
|
|
loader={details.familyDetails.loading}
|
|
handlePrint={useHandlePrint}
|
|
/>
|
|
),
|
|
Profile: <FamilyProfile familyData={details.familyDetails.data} />,
|
|
wallet: <FamilyWallet familyData={details.familyDetails.data} />,
|
|
};
|
|
|
|
// Default tab component
|
|
const defaultTabComponent = (
|
|
<FamilyTasks
|
|
className={className}
|
|
loader={details.familyTasks.loading}
|
|
familyData={details.familyTasks.data}
|
|
accountDetails={accountDetails}
|
|
/>
|
|
);
|
|
|
|
// Selected tab component based on the current 'tab'
|
|
const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
|
|
|
|
// Effect to manage family details and related data
|
|
useEffect(() => {
|
|
const manageFamily = async () => {
|
|
try {
|
|
resetDetails();
|
|
|
|
setDetails({
|
|
familyDetails: { loading: true },
|
|
familyTasks: { loading: true },
|
|
familyWaitList: { loading: true },
|
|
familyPending: { loading: true },
|
|
});
|
|
|
|
const { family_uid } = accountDetails;
|
|
const reqData = { family_uid };
|
|
|
|
const [familyRes, tasksRes, familyWaitRes, familyPending] =
|
|
await Promise.all([
|
|
apiCall.ManageFamily(reqData),
|
|
apiCall.ManageTasks(reqData),
|
|
apiCall.ManageFamilyWaitlist(),
|
|
apiCall.ManageFamilyPending(),
|
|
]);
|
|
|
|
const familyData = familyRes.data;
|
|
const tasksData = tasksRes.data;
|
|
const familyWaitData = familyWaitRes.data;
|
|
const familyPendingData = familyPending.data;
|
|
|
|
// Function to check for errors in data
|
|
const checkDataError = (data) => data?.internal_return < 0;
|
|
|
|
if (
|
|
checkDataError(familyData) ||
|
|
checkDataError(tasksData) ||
|
|
checkDataError(familyWaitData) ||
|
|
checkDataError(familyPendingData)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
setDetails({
|
|
familyDetails: { loading: false, data: familyData },
|
|
familyTasks: { loading: false, data: tasksData },
|
|
familyWaitList: { loading: false, data: familyWaitData },
|
|
familyPending: { loading: false, data: familyPendingData },
|
|
});
|
|
} catch (error) {
|
|
resetDetails();
|
|
setErrMsg("An error occurred");
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
// Invoke the manageFamily function when the component mounts
|
|
manageFamily();
|
|
}, [updatePage]);
|
|
|
|
// Effect to manage family tasks
|
|
useEffect(() => {
|
|
let checkFamilyTask = true;
|
|
const reqData = {
|
|
limit: 30,
|
|
offset: 0,
|
|
job_type: "FAMILY",
|
|
action: 13005,
|
|
};
|
|
|
|
if (checkFamilyTask) {
|
|
setFamilyTask({ loading: true });
|
|
apiCall
|
|
.getMyJobList(reqData)
|
|
.then((res) => {
|
|
setFamilyTask({ loading: false, data: res?.data?.result_list });
|
|
if (res?.data?.result_list?.length) {
|
|
setActiveTask((prev) => ({
|
|
...prev,
|
|
data: res?.data?.result_list[0],
|
|
}));
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
setFamilyTask({ loading: false, data: [] });
|
|
console.log("Error", err);
|
|
});
|
|
}
|
|
|
|
// Cleanup function to prevent memory leaks
|
|
return () => {
|
|
checkFamilyTask = false;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
|
|
className || ""
|
|
}`}
|
|
>
|
|
<div className="relative w-full sm:rounded-lg overflow-x-auto">
|
|
<Suspense
|
|
fallback={
|
|
<div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
|
|
<LoadingSpinner size="16" color="sky-blue" />
|
|
</div>
|
|
}
|
|
>
|
|
<div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[575px]">
|
|
<div className="border-r border-[#E3E4FE] dark:border-[#a7a9b533] p-6 h-full flex flex-col justify-between">
|
|
<ProfileInfo
|
|
profileImg={profileImg}
|
|
profileImgInput={profileImgInput}
|
|
profileImgChangeHandler={profileImgChangeHandler}
|
|
browseProfileImg={browseProfileImg}
|
|
accountDetails={accountDetails}
|
|
uploadStatus={uploadStatus}
|
|
/>
|
|
<div className="mt-4 flex flex-col justify-center items-center gap-2 lg:flex-row lg:justify-center lg:items-center xl:flex-col xl:justify-center xl:items-center 2xl:flex-row 2xl:justify-center 2xl:items-center 2xl:gap-[2px]">
|
|
<button
|
|
onClick={() => tabHandler("Account")}
|
|
className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
|
|
>
|
|
<img
|
|
src={localImgLoad("images/icons/account.svg")}
|
|
className="max-w-[30px]"
|
|
alt="Settings-Icon"
|
|
/>
|
|
<p className="text-[16px] text-sky-blue">Acc.</p>
|
|
</button>
|
|
<button
|
|
onClick={() => tabHandler("Profile")}
|
|
className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
|
|
>
|
|
<img
|
|
src={localImgLoad("images/icons/profile.svg")}
|
|
className="max-w-[30px]"
|
|
alt="Settings-Icon"
|
|
/>
|
|
<p className="text-[16px] text-sky-blue">Profile</p>
|
|
</button>
|
|
<button
|
|
onClick={() => tabHandler("wallet")}
|
|
className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
|
|
>
|
|
<img
|
|
src={localImgLoad("images/icons/wallet.svg")}
|
|
className="max-w-[30px]"
|
|
alt="Settings-Icon"
|
|
/>
|
|
<p className="text-[16px] text-sky-blue">Wallet</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-3 h-full w-full">
|
|
<div className="flex flex-col w-full">
|
|
<div className="w-full pr-8 flex items-center gap-1 border-b border-b-[#FAFAF]">
|
|
<ul className="flex gap-2 items-center w-full">
|
|
{tabs.map(({ name, id }) => (
|
|
<li
|
|
onClick={() => tabHandler(name)}
|
|
className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
|
|
tab === name
|
|
? "text-purple border-r"
|
|
: "text-thin-light-gray"
|
|
}`}
|
|
key={id}
|
|
>
|
|
<h1>{name}</h1>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<button
|
|
type="button"
|
|
onClick={familyPopUpHandler}
|
|
className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
>
|
|
Add task
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-[0.9] h-full">
|
|
<div className="h-full relative overflow-y-auto">
|
|
<Suspense
|
|
fallback={<LoadingSpinner size="16" color="sky-blue" />}
|
|
>
|
|
{selectedTabComponent}
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Suspense>
|
|
</div>
|
|
|
|
{familyTaskPopout && (
|
|
<AssignTaskPopout
|
|
action={familyPopUpHandler}
|
|
situation={familyTaskPopout}
|
|
familyTask={familyTask}
|
|
setFamilyTask={setFamilyTask}
|
|
setActiveTask={setActiveTask}
|
|
activeTask={activeTask}
|
|
familyDetailsData={details.familyDetails.data}
|
|
setUpdatePage={setUpdatePage}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|