From cfed5c9a1e68f56e1436ca0a4ba90cc048b156d9 Mon Sep 17 00:00:00 2001 From: Devdeep Ghosh Date: Tue, 21 Nov 2023 12:47:12 +0530 Subject: [PATCH] replaced useDispatch with useQuery and request in ManageUsers --- src/Components/Users/ManageUsers.tsx | 197 +++++++++++++-------------- src/Redux/api.tsx | 10 +- 2 files changed, 100 insertions(+), 107 deletions(-) diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx index 94791e55ae1..ba61526165f 100644 --- a/src/Components/Users/ManageUsers.tsx +++ b/src/Components/Users/ManageUsers.tsx @@ -1,17 +1,5 @@ import * as Notification from "../../Utils/Notifications.js"; -import { - addUserFacility, - clearHomeFacility, - deleteUser, - deleteUserFacility, - getDistrict, - getUserList, - getUserListFacility, - partialUpdateUser, -} from "../../Redux/actions"; -import { statusType, useAbortableEffect } from "../../Common/utils"; import { lazy, useCallback, useEffect, useState } from "react"; -import { useDispatch } from "react-redux"; import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover"; import ButtonV2, { Submit } from "../Common/components/ButtonV2"; import CareIcon from "../../CAREUI/icons/CareIcon"; @@ -36,6 +24,9 @@ import Page from "../Common/components/Page.js"; import dayjs from "dayjs"; import TextFormField from "../Form/FormFields/TextFormField.js"; import useAuthUser from "../../Common/hooks/useAuthUser.js"; +import routes from "../../Redux/api.js"; +import useQuery from "../../Utils/request/useQuery.js"; +import request from "../../Utils/request/request.js"; const Loading = lazy(() => import("../Common/Loading")); @@ -49,7 +40,6 @@ export default function ManageUsers() { advancedFilter, resultsPerPage, } = useFilters({ limit: 18 }); - const dispatch: any = useDispatch(); const initialData: any[] = []; let manageUsers: any = null; const [users, setUsers] = useState(initialData); @@ -79,59 +69,50 @@ export default function ManageUsers() { const isExtremeSmallScreen = width <= extremeSmallScreenBreakpoint ? true : false; - const fetchData = useCallback( - async (status: statusType) => { - setIsLoading(true); - const params = { - limit: resultsPerPage, - offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage, - username: qParams.username, - first_name: qParams.first_name, - last_name: qParams.last_name, - phone_number: qParams.phone_number, - alt_phone_number: qParams.alt_phone_number, - user_type: qParams.user_type, - district_id: qParams.district_id, - }; - if (qParams.district_id) { - const dis = await dispatch(getDistrict(qParams.district_id)); - if (!status.aborted) { - if (dis && dis.data) { - setDistrictName(dis.data.name); - } - } - } else { - setDistrictName(undefined); - } - const res = await dispatch(getUserList(params)); - if (!status.aborted) { - if (res && res.data) { - setUsers(res.data.results); - setTotalCount(res.data.count); - } - setIsLoading(false); - } + const { + data: userListData, + loading: userListLoading, + refetch: refetchUserList, + } = useQuery(routes.userList, { + query: { + limit: resultsPerPage.toString(), + offset: ( + (qParams.page ? qParams.page - 1 : 0) * resultsPerPage + ).toString(), + username: qParams.username, + first_name: qParams.first_name, + last_name: qParams.last_name, + phone_number: qParams.phone_number, + alt_phone_number: qParams.alt_phone_number, + user_type: qParams.user_type, + district_id: qParams.district_id, }, - [ - resultsPerPage, - qParams.page, - qParams.username, - qParams.first_name, - qParams.last_name, - qParams.phone_number, - qParams.alt_phone_number, - qParams.user_type, - qParams.district_id, - dispatch, - ] - ); + }); - useAbortableEffect( - (status: statusType) => { - fetchData(status); - }, - [fetchData] - ); + const fetchDistrict = useCallback(async () => { + setIsLoading(true); + if (qParams.district_id) { + const { data: districtData } = await request(routes.getDistrict, { + pathParams: { id: qParams.district_id }, + }); + if (districtData) setDistrictName(districtData.name); + else setDistrictName(undefined); + } + setIsLoading(false); + }, [qParams.district_id]); + + useEffect(() => { + setIsLoading(true); + if (userListData && !userListLoading) { + setUsers(userListData.results); + setTotalCount(userListData.count); + } + setIsLoading(false); + }, [userListData, userListLoading]); + + useEffect(() => { + fetchDistrict(); + }, [fetchDistrict]); const addUser = ( { const username = userData.username; - const res = await dispatch(deleteUser(username)); + const { res, data } = await request(routes.deleteUser, { + body: { username }, + }); if (res?.status === 204) { Notification.Success({ msg: "User deleted successfully", }); } else { Notification.Error({ - msg: "Error while deleting User: " + (res?.data?.detail || ""), + msg: "Error while deleting User: " + (data?.detail || ""), }); } setUserData({ show: false, username: "", name: "" }); - fetchData({ aborted: false }); + await fetchDistrict(); + await refetchUserList(); }; const handleDelete = (user: any) => { @@ -463,7 +446,7 @@ export default function ManageUsers() { ); })); - if (isLoading || !users) { + if (isLoading || userListLoading || !users) { manageUsers = ; } else if (users?.length) { manageUsers = ( @@ -540,7 +523,7 @@ export default function ManageUsers() { @@ -596,7 +579,6 @@ export default function ManageUsers() { function UserFacilities(props: { user: any }) { const { user } = props; const username = user.username; - const dispatch: any = useDispatch(); const [facilities, setFacilities] = useState([]); const [isLoading, setIsLoading] = useState(false); const [facility, setFacility] = useState(null); @@ -635,61 +617,64 @@ function UserFacilities(props: { user: any }) { }); }; - const fetchFacilities = async () => { - setIsLoading(true); - const res = await dispatch(getUserListFacility({ username })); - if (res && res.data) { - setFacilities(res.data); - } - setIsLoading(false); - }; + const { + data: userFacilities, + loading: userFacilitiesLoading, + refetch: refetchUserFacilities, + } = useQuery(routes.userListFacility, { + pathParams: { username }, + }); const updateHomeFacility = async (username: string, facility: any) => { setIsLoading(true); - const res = await dispatch( - partialUpdateUser(username, { home_facility: facility.id }) - ); + const { res } = await request(routes.partialUpdateUser, { + pathParams: { username }, + body: { home_facility: facility.id.toString() }, + }); if (res && res.status === 200) user.home_facility_object = facility; - fetchFacilities(); + await refetchUserFacilities(); setIsLoading(false); }; const handleUnlinkFacilitySubmit = async () => { setIsLoading(true); if (unlinkFacilityData.isHomeFacility) { - const res = await dispatch( - clearHomeFacility(unlinkFacilityData.userName) - ); + const { res } = await request(routes.clearHomeFacility, { + pathParams: { username }, + }); if (res && res.status === 204) user.home_facility_object = null; } else { - await dispatch( - deleteUserFacility( - unlinkFacilityData.userName, - String(unlinkFacilityData?.facility?.id) - ) - ); + await request(routes.deleteUserFacility, { + pathParams: { username }, + body: { facility: unlinkFacilityData?.facility?.id?.toString() }, + }); } - fetchFacilities(); + await refetchUserFacilities(); setIsLoading(false); hideUnlinkFacilityModal(); }; const addFacility = async (username: string, facility: any) => { setIsLoading(true); - const res = await dispatch(addUserFacility(username, String(facility.id))); + const { res } = await request(routes.addUserFacility, { + pathParams: { username }, + body: { facility: facility.id.toString() }, + }); if (res?.status !== 201) { Notification.Error({ msg: "Error while linking facility", }); } + await refetchUserFacilities(); setIsLoading(false); setFacility(null); - fetchFacilities(); }; useEffect(() => { - fetchFacilities(); - }, []); + if (userFacilities && !userFacilitiesLoading) { + setFacilities(userFacilities); + } + }, [userFacilities, userFacilitiesLoading]); return (
@@ -723,7 +708,7 @@ function UserFacilities(props: { user: any }) { Add
- {isLoading ? ( + {isLoading || userFacilitiesLoading ? (
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx index a0b86666946..ff9fbf01426 100644 --- a/src/Redux/api.tsx +++ b/src/Redux/api.tsx @@ -158,6 +158,8 @@ const routes = { addUserFacility: { path: "/api/v1/users/{username}/add_facility/", method: "PUT", + TBody: Type<{ facility: string }>(), + TRes: undefined, }, addUserSkill: { @@ -170,11 +172,14 @@ const routes = { deleteUserFacility: { path: "/api/v1/users/{username}/delete_facility/", method: "DELETE", + TBody: Type<{ facility: string }>(), + TRes: undefined, }, clearHomeFacility: { path: "/api/v1/users/{username}/clear_home_facility/", method: "DELETE", + TRes: undefined, }, deleteUserSkill: { @@ -198,11 +203,14 @@ const routes = { path: "/api/v1/users/{username}/", method: "PATCH", TRes: Type<{ [key: string]: object }>(), + TBody: Type<{ [key: string]: string | object | undefined }>(), }, deleteUser: { path: "/api/v1/users", method: "DELETE", + TRes: Type<{ [key: string]: object }>(), + TBody: Type<{ username: string }>(), }, addUser: { @@ -632,7 +640,7 @@ const routes = { getDistrict: { path: "/api/v1/district/{id}/", method: "GET", - TRes: Type>(), + TRes: Type(), }, getDistrictByState: { path: "/api/v1/state/{id}/districts/",