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/FamilyTableNew.jsx
+78 -128
View File
@@ -13,59 +13,42 @@ const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending"));
export default function FamilyTableNew() {
const { parentFamilyTaskList } = useSelector((state) => state.tableReload);
console.log('parentFamilyTaskList', parentFamilyTaskList)
const { jobListTable, pendingListTable, parentFamilyTaskList } = useSelector((state) => state.tableReload); // TABLE RELOAD TRIGGERS
let { pathname } = useLocation();
// Initial state for family details
const initialDetailState = {
loading: true,
data: null,
link: "",
loading: false,
data: [],
};
const [assignTaskChecker, setAssignTaskChecker] = useState(false);
// console.log('accountDetails',accountDetails)
// State for family details, tasks, waitlist, and pending
const [details, setDetails] = useState({
familyDetails: { ...initialDetailState },
familyTasks: { ...initialDetailState },
familyWaitList: { ...initialDetailState },
familyPending: { ...initialDetailState },
});
let [familyTasks, setFamilyTasks] = useState({...initialDetailState})
// Function to reset family details, tasks, waitlist, and pending
const resetDetails = () => {
setDetails({
familyDetails: { ...initialDetailState },
familyTasks: { ...initialDetailState },
familyWaitList: { ...initialDetailState },
familyPending: { ...initialDetailState },
});
};
let [familyPending, setFamilyPending] = useState({...initialDetailState})
let [familyWaitList, setFamilyWaitList] = useState({...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 list of created jobs by FULL USER
const [jobList, setJobList] = useState({ loading: false, data: [] });
// State for active task
// State for active/selected job
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);
const [assignTaskPopout, setAssignTaskPopout] = useState(false);
// 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);
const familyAssignPopUpHandler = () => {
setAssignTaskPopout((prev) => !prev);
};
// Array of tab names
@@ -87,26 +70,19 @@ export default function FamilyTableNew() {
const tabComponents = {
Tasks: (
<FamilyTasks
image_link={details.familyTasks.link}
loader={details.familyTasks.loading}
familyData={details.familyTasks.data}
action={familyPopUpHandler}
setAssignTaskChecker={setAssignTaskChecker}
familyData={familyTasks}
action={familyAssignPopUpHandler}
/>
),
Waiting: (
<FamilyWaitlist
image_link={details.familyWaitList.link}
familyData={details.familyWaitList.data}
loader={details.familyWaitList.loading}
familyData={familyWaitList}
setUpdatePage={setUpdatePage}
/>
),
Pending: (
<FamilyPending
image_link={details.familyPending.link}
familyData={details.familyPending.data}
loader={details.familyPending.loading}
familyData={familyPending}
/>
),
};
@@ -116,83 +92,66 @@ export default function FamilyTableNew() {
// Selected tab component based on the current 'tab'
const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
// Effect to manage family details and related data
// Effect to manage active family task details
useEffect(() => {
const manageFamily = async () => {
const manageTasks = async () => {
setFamilyTasks({loading:true, data: []})
try {
// resetDetails();
// setDetails({
// familyTasks: { loading: true },
// familyWaitList: { loading: true },
// familyPending: { loading: true },
// });
// const { family_uid } = accountDetails;
// const reqData = { family_uid };
const [familyTasksData, familyWaitingRes, familyPendingRes] =
await Promise.all([
apiCall.getMyActiveJobList(),
apiCall.ManageFamilyNewWaitlist(),
apiCall.ManageFamilyPending(),
]);
let tasksData = familyTasksData?.data?.result_list;
let _familyWaitData = familyWaitingRes?.data?.result_list;
let familyPendingData = familyPendingRes?.data?.result_list;
// Getting the image server link
let imageServerLink = familyWaitingRes.data?.session_image_server;
// Function to check for errors in data
const checkDataError = (data) => data?.internal_return < 0;
if (
checkDataError(tasksData) ||
checkDataError(_familyWaitData) ||
checkDataError(familyPendingData)
) {
return;
const response = await apiCall.getMyActiveJobList()
if(response.status != 200 || !response?.data){
return setFamilyTasks({loading:false, data: []})
}
setDetails({
familyTasks: {
loading: false,
data: tasksData,
link: imageServerLink,
},
familyWaitList: {
loading: false,
data: _familyWaitData,
link: imageServerLink,
},
familyPending: {
loading: false,
data: familyPendingData,
link: imageServerLink,
},
});
setFamilyTasks({loading:false, data: response?.data})
} catch (error) {
// resetDetails();
setDetails({
familyDetails: { ...initialDetailState, loading: false, },
familyTasks: { ...initialDetailState, loading: false, },
familyWaitList: { ...initialDetailState, loading: false,},
familyPending: { ...initialDetailState, loading: false, },
})
setErrMsg("An error occurred");
throw new Error(error);
setFamilyTasks({loading:false, data: []})
}
};
// Invoke the manageFamily function when the component mounts
manageFamily();
manageTasks();
}, [updatePage, parentFamilyTaskList]);
// Effect to manage family tasks
// Effect to manage family wait task details
useEffect(() => {
const manageFamilyWaitlist = async () => {
setFamilyWaitList({loading:true, data: []})
try {
const response = await apiCall.ManageFamilyWaitlist()
if(response.status != 200 || !response?.data){
return setFamilyWaitList({loading:false, data: []})
}
setFamilyWaitList({loading:false, data: response?.data})
} catch (error) {
throw new Error(error);
setFamilyWaitList({loading:false, data: []})
}
};
// Invoke the manageFamily function when the component mounts
manageFamilyWaitlist();
}, [updatePage]);
// Effect to manage family pending task details
useEffect(() => {
const manageFamilyPending = async () => {
setFamilyPending({loading:true, data: []})
try {
const response = await apiCall.ManageFamilyPending()
if(response.status != 200 || !response?.data){
return setFamilyPending({loading:false, data: []})
}
setFamilyPending({loading:false, data: response?.data})
} catch (error) {
throw new Error(error);
setFamilyPending({loading:false, data: []})
}
};
// Invoke the manageFamily function when the component mounts
manageFamilyPending();
}, [updatePage, pendingListTable]);
// Effect to get all parent job list
useEffect(() => {
let checkFamilyTask = true;
const reqData = {
limit: 30,
offset: 0,
@@ -200,12 +159,11 @@ export default function FamilyTableNew() {
action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
};
if (checkFamilyTask) {
setFamilyTask({ loading: true });
setJobList({ loading: true });
apiCall
.getMyJobList(reqData)
.then((res) => {
setFamilyTask({ loading: false, data: res?.data?.result_list });
setJobList({ loading: false, data: res?.data?.result_list });
if (res?.data?.result_list?.length) {
setActiveTask((prev) => ({
...prev,
@@ -214,15 +172,9 @@ export default function FamilyTableNew() {
}
})
.catch((err) => {
setFamilyTask({ loading: false, data: [] });
setJobList({ loading: false, data: [] });
console.log("Error", err);
});
}
// Cleanup function to prevent memory leaks
return () => {
checkFamilyTask = false;
};
}, []);
// console.log(updatePage);
@@ -260,7 +212,7 @@ export default function FamilyTableNew() {
</ul>
<button
type="button"
onClick={familyPopUpHandler}
onClick={familyAssignPopUpHandler}
className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Add task
@@ -282,20 +234,18 @@ export default function FamilyTableNew() {
</Suspense>
</div>
{familyTaskPopout && (
{assignTaskPopout && (
<AssignTaskPopout
action={familyPopUpHandler}
situation={familyTaskPopout}
familyTask={familyTask}
setFamilyTask={setFamilyTask}
action={familyAssignPopUpHandler}
situation={assignTaskPopout}
jobList={jobList}
setActiveTask={setActiveTask}
activeTask={activeTask}
familyDetailsData={''}
setUpdatePage={setUpdatePage}
// updateFamilyPendingTable={updateFamilyPendingTable}
pathname={pathname}
assignTaskChecker={assignTaskChecker}
/>
)}
</div>
);
}