Replaced useDispatch w. useQuery/request: Shifting (src/Components/Shifting/**)

src/CAREUI/misc/PaginatedList.tsx

@@ -33,7 +33,10 @@ function useContextualized<TItem>() {
 interface Props<TItem> extends QueryOptions<PaginatedResponse<TItem>> {
   route: QueryRoute<PaginatedResponse<TItem>>;
   perPage?: number;
-  children: (ctx: PaginatedListContext<TItem>) => JSX.Element | JSX.Element[];
+  children: (
+    ctx: PaginatedListContext<TItem>,
+    query: ReturnType<typeof useQuery<PaginatedResponse<TItem>>>
+  ) => JSX.Element | JSX.Element[];
 }
 
 export default function PaginatedList<TItem extends object>({
@@ -59,7 +62,7 @@ export default function PaginatedList<TItem extends object>({
       value={{ ...query, items, perPage, currentPage, setPage }}
     >
       <context.Consumer>
-        {(ctx) => children(ctx as PaginatedListContext<TItem>)}
+        {(ctx) => children(ctx as PaginatedListContext<TItem>, query)}
       </context.Consumer>
     </context.Provider>
   );

src/Components/Common/FacilitySelect.tsx

@@ -6,7 +6,7 @@ import { FacilityModel } from "../Facility/models";
 
 interface FacilitySelectProps {
   name: string;
-  exclude_user: string;
+  exclude_user?: string;
   errors?: string | undefined;
   className?: string;
   searchAll?: boolean;

src/Components/Facility/models.tsx

@@ -52,10 +52,10 @@ export interface FacilityModel {
   ward_object?: WardModel;
   modified_date?: string;
   created_date?: string;
-  state: number;
-  district: number;
-  local_body: number;
-  ward: number;
+  state?: number;
+  district?: number;
+  local_body?: number;
+  ward?: number;
 }
 
 export interface CapacityModal {

src/Components/Resource/BadgesList.tsx

@@ -2,10 +2,10 @@ import { SHIFTING_FILTER_ORDER } from "../../Common/constants";
 import routes from "../../Redux/api";
 import useQuery from "../../Utils/request/useQuery";
 
-function useFacilityQuery(facilityId: string | undefined) {
+export function useFacilityQuery(facilityId: string | undefined) {
   return useQuery(routes.getAnyFacility, {
-    pathParams: { id: String(facilityId) },
-    prefetch: facilityId !== undefined,
+    pathParams: { id: facilityId as string },
+    prefetch: !!facilityId,
   });
 }
 

src/Components/Resource/CommentSection.tsx

@@ -16,7 +16,6 @@ const CommentSection = (props: { id: string }) => {
     routes.getResourceComments,
     {
       pathParams: { id: props.id },
-      query: { limit: 8, offset: 0 },
     }
   );
 

src/Components/Resource/ResourceBoard.tsx

@@ -8,8 +8,9 @@ import { ExportButton } from "../Common/Export";
 import dayjs from "../../Utils/dayjs";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
-
-const limit = 14;
+import { PaginatedResponse } from "../../Utils/request/types";
+import { IResource } from "./models";
+import request from "../../Utils/request/request";
 
 interface boardProps {
   board: string;
@@ -153,8 +154,7 @@ export default function ResourceBoard({
   filterProp,
   formatFilter,
 }: boardProps) {
-  const [currentPage, setCurrentPage] = useState(1);
-  const [isLoading, setIsLoading] = useState({ board: false, more: false });
+  const [isLoading, setIsLoading] = useState({ board: "BOARD", more: false });
   const [{ isOver }, drop] = useDrop(() => ({
     accept: "resource-card",
     drop: (item: any) => {
@@ -165,24 +165,10 @@ export default function ResourceBoard({
     collect: (monitor) => ({ isOver: !!monitor.isOver() }),
   }));
   const [offset, setOffSet] = useState(0);
-
-  const { data, refetch } = useQuery(routes.listResourceRequests, {
-    query: formatFilter({
-      ...filterProp,
-      status: board,
-      offset: offset,
-    }),
-    onResponse: ({ res, data }) => {
-      if (res && data) {
-        setCurrentPage(1);
-      }
-      setIsLoading((loading) => reduceLoading("COMPLETE", loading));
-    },
-  });
+  const [data, setData] = useState<PaginatedResponse<IResource>>();
 
   useEffect(() => {
     setIsLoading((loading) => reduceLoading("BOARD", loading));
-    refetch();
   }, [
     board,
     filterProp.facility,
@@ -197,25 +183,50 @@ export default function ResourceBoard({
     filterProp.ordering,
   ]);
 
-  const handlePagination = (page: number, limit: number) => {
-    const offset = (page - 1) * limit;
-    setOffSet(offset);
-    setCurrentPage(page);
+  useQuery(routes.listResourceRequests, {
+    query: formatFilter({
+      ...filterProp,
+      status: board,
+    }),
+    onResponse: ({ res, data: listResourceData }) => {
+      if (res?.ok && listResourceData) {
+        setData(listResourceData);
+      }
+      setIsLoading((loading) => reduceLoading("COMPLETE", loading));
+    },
+  });
+
+  const handlePagination = async () => {
     setIsLoading((loading) => reduceLoading("MORE", loading));
-    refetch();
+    setOffSet(offset + 14);
+    const { res, data: newPageData } = await request(
+      routes.listResourceRequests,
+      {
+        query: formatFilter({
+          ...filterProp,
+          status: board,
+          offset: offset,
+        }),
+      }
+    );
+    if (res?.ok && newPageData) {
+      setData((prev) =>
+        prev
+          ? { ...prev, results: [...prev.results, ...newPageData.results] }
+          : newPageData
+      );
+    }
     setIsLoading((loading) => reduceLoading("COMPLETE", loading));
   };
 
   const boardFilter = (filter: string) => {
-    return (
-      data &&
-      data?.results
-        .filter(({ status }) => status === filter)
-        .map((resource: any) => (
-          <ResourceCard key={`resource_${resource.id}`} resource={resource} />
-        ))
-    );
+    return data?.results
+      .filter(({ status }) => status === filter)
+      .map((resource: any) => (
+        <ResourceCard key={`resource_${resource.id}`} resource={resource} />
+      ));
   };
+
   return (
     <div
       ref={drop}
@@ -272,7 +283,7 @@ export default function ResourceBoard({
             </div>
           ) : (
             <button
-              onClick={(_) => handlePagination(currentPage + 1, limit)}
+              onClick={(_) => handlePagination()}
               className="mx-auto my-4 rounded-md bg-gray-100 p-2 px-4 hover:bg-white"
             >
               More...

src/Components/Shifting/BadgesList.tsx

@@ -1,80 +1,39 @@
-import { getAnyFacility, getUserList } from "../../Redux/actions";
-import { useEffect, useState } from "react";
-
 import { SHIFTING_FILTER_ORDER } from "../../Common/constants";
-import { useDispatch } from "react-redux";
+import { useFacilityQuery } from "../Resource/BadgesList";
 import { useTranslation } from "react-i18next";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import { UserModel } from "../Users/models";
+
+export function formatFacilityBadgeValue(user: UserModel | undefined) {
+  return user ? `${user.first_name} ${user.last_name}` : "";
+}
 
 export default function BadgesList(props: any) {
   const { qParams, FilterBadges } = props;
-  const [assignedUsername, setAssignedUsername] = useState("");
-  const [assignedFacilityName, setAssignedFacilityName] = useState("");
-  const [originFacilityName, setOriginFacilityName] = useState("");
-  const [approvingFacilityName, setApprovingFacilityName] = useState("");
-  const dispatch: any = useDispatch();
+
   const { t } = useTranslation();
 
   const booleanFilterOptions = {
     trueValue: t("yes"),
     falseValue: t("no"),
   };
 
-  useEffect(() => {
-    async function fetchData() {
-      if (!qParams.assigned_to) return setAssignedUsername("");
-      const res = await dispatch(
-        getUserList({ id: qParams.assigned_to }, "assigned_user_name")
-      );
-      const { first_name, last_name } = res?.data?.results[0] || {};
-      setAssignedUsername(`${first_name} ${last_name}`);
-    }
-    fetchData();
-  }, [dispatch, qParams.assigned_to]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (!qParams.origin_facility) return setOriginFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(qParams.origin_facility, "origin_facility_name")
-      );
-      setOriginFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, qParams.origin_facility]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (!qParams.shifting_approving_facility)
-        return setApprovingFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(
-          qParams.shifting_approving_facility,
-          "shifting_approving_facility_name"
-        )
-      );
-      setApprovingFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, qParams.shifting_approving_facility]);
+  const { data: assignedUser } = useQuery(routes.userList, {
+    query: { id: qParams.assigned_to },
+    prefetch: !!qParams.assigned_to,
+  });
+  const originFacility = useFacilityQuery(qParams.origin_facility);
+  const approvingFacility = useFacilityQuery(
+    qParams.shifting_approving_facility
+  );
+  const assignedFacility = useFacilityQuery(qParams.assigned_facility);
 
-  useEffect(() => {
-    async function fetchData() {
-      if (!qParams.assigned_facility) return setAssignedFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(qParams.assigned_facility, "assigned_facility_name")
-      );
-      setAssignedFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, qParams.assigned_facility]);
   const getDescShiftingFilterOrder = (ordering: any) => {
-    let desc = "";
-    SHIFTING_FILTER_ORDER.map((item: any) => {
-      if (item.text === ordering) {
-        desc = item.desc;
-      }
-    });
-    return desc;
+    const foundItem = SHIFTING_FILTER_ORDER.find(
+      (item) => item.text === ordering
+    );
+    return foundItem ? foundItem.desc : "";
   };
 
   return (
@@ -91,17 +50,29 @@ export default function BadgesList(props: any) {
         ...dateRange(t("modified"), "modified_date"),
         badge(t("disease_status"), "disease_status"),
         badge(t("breathlessness_level"), "breathlessness_level"),
-        value(t("assigned_to"), "assigned_to", assignedUsername),
+        value(
+          t("assigned_to"),
+          "assigned_to",
+          qParams.assigned_to
+            ? formatFacilityBadgeValue(assignedUser?.results[0])
+            : ""
+        ),
         value(
           t("assigned_facility"),
           "assigned_facility",
-          assignedFacilityName
+          qParams.assigned_facility ? assignedFacility?.data?.name || "" : ""
+        ),
+        value(
+          t("origin_facility"),
+          "origin_facility",
+          qParams.origin_facility ? originFacility?.data?.name || "" : ""
         ),
-        value(t("origin_facility"), "origin_facility", originFacilityName),
         value(
           t("shifting_approval_facility"),
           "shifting_approving_facility",
-          approvingFacilityName
+          qParams.shifting_approving_facility
+            ? approvingFacility?.data?.name || ""
+            : ""
         ),
         value(
           t("ordering"),