replaced useDispatch in Shifting

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/CommentSection.tsx

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

src/Components/Shifting/BadgesList.tsx

@@ -1,80 +1,41 @@
-import { getAnyFacility, getUserList } from "../../Redux/actions";
-import { useEffect, useState } from "react";
-
 import { SHIFTING_FILTER_ORDER } from "../../Common/constants";
-import { useDispatch } from "react-redux";
+
 import { useTranslation } from "react-i18next";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+
+function useFacilityQuery(facilityId: string | undefined) {
+  return useQuery(routes.getAnyFacility, {
+    pathParams: { id: String(facilityId) },
+    prefetch: facilityId !== undefined,
+  });
+}
 
 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 ? true : false,
+  });
+  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 +52,31 @@ 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
+            ? `${assignedUser?.results[0].first_name || ""} ${
+                assignedUser?.results[0].last_name || ""
+              }`
+            : ""
+        ),
         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"),

src/Components/Shifting/CommentsSection.tsx

@@ -1,46 +1,27 @@
-import { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { getShiftComments, addShiftComments } from "../../Redux/actions";
+import { useState } from "react";
 import CircularProgress from "../Common/components/CircularProgress";
 import * as Notification from "../../Utils/Notifications.js";
 import { formatDateTime } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
 import ButtonV2 from "../Common/components/ButtonV2";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import { IComment } from "../Resource/models";
+import PaginatedList from "../../CAREUI/misc/PaginatedList";
+import request from "../../Utils/request/request";
 
 interface CommentSectionProps {
   id: string;
 }
 const CommentSection = (props: CommentSectionProps) => {
-  const dispatch: any = useDispatch();
-  const initialData: any = [];
-  const [comments, setComments] = useState(initialData);
   const [commentBox, setCommentBox] = useState("");
-  const [isLoading, setIsLoading] = useState(true);
   const { t } = useTranslation();
 
-  const fetchData = useCallback(
-    async (status: statusType = { aborted: false }) => {
-      setIsLoading(true);
-      const res = await dispatch(getShiftComments(props.id));
-      if (!status.aborted) {
-        if (res && res.data) {
-          setComments(res.data?.results);
-        }
-        setIsLoading(false);
-      }
-    },
-    [props.id, dispatch]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [fetchData]
-  );
+  const { loading, refetch: fetchData } = useQuery(routes.getShiftComments, {
+    pathParams: { id: props.id },
+  });
 
-  const onSubmitComment = () => {
+  const onSubmitComment = async () => {
     const payload = {
       comment: commentBox,
     };
@@ -50,11 +31,15 @@ const CommentSection = (props: CommentSectionProps) => {
       });
       return;
     }
-    dispatch(addShiftComments(props.id, payload)).then((_: any) => {
+    const { res } = await request(routes.addShiftComments, {
+      pathParams: { id: props.id },
+      body: payload,
+    });
+    if (res?.ok) {
       Notification.Success({ msg: t("comment_added_successfully") });
       fetchData();
       setCommentBox("");
-    });
+    }
   };
 
   return (
@@ -73,40 +58,67 @@ const CommentSection = (props: CommentSectionProps) => {
         </ButtonV2>
       </div>
       <div className=" w-full">
-        {isLoading ? (
+        {loading ? (
           <CircularProgress />
         ) : (
-          comments.map((comment: any) => (
-            <div
-              key={comment.id}
-              className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
-            >
-              <div className="flex  w-full ">
-                <p className="text-justify">{comment.comment}</p>
-              </div>
-              <div className="mt-3">
-                <span className="text-xs text-gray-500">
-                  {comment.modified_date
-                    ? formatDateTime(comment.modified_date)
-                    : "-"}
-                </span>
-              </div>
-              <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
-                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
-                  {comment.created_by_object?.first_name?.charAt(0) ||
-                    t("unknown")}
+          <PaginatedList
+            route={routes.getShiftComments}
+            pathParams={{ id: props.id }}
+          >
+            {() => (
+              <div>
+                <PaginatedList.WhenEmpty>
+                  <span>No comments available</span>
+                </PaginatedList.WhenEmpty>
+                <PaginatedList.WhenLoading>
+                  <CircularProgress />
+                </PaginatedList.WhenLoading>
+                <PaginatedList.Items<IComment>>
+                  {(item) => <Comment {...item} />}
+                </PaginatedList.Items>
+                <div className="flex w-full items-center justify-center">
+                  <PaginatedList.Paginator hideIfSinglePage />
                 </div>
-                <span className="pl-2 text-sm text-gray-700">
-                  {comment.created_by_object?.first_name || t("unknown")}{" "}
-                  {comment.created_by_object?.last_name}
-                </span>
               </div>
-            </div>
-          ))
+            )}
+          </PaginatedList>
         )}
       </div>
     </div>
   );
 };
 
 export default CommentSection;
+
+export const Comment = ({
+  id,
+  comment,
+  created_by_object,
+  modified_date,
+}: IComment) => {
+  const { t } = useTranslation();
+  return (
+    <div
+      key={id}
+      className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
+    >
+      <div className="flex  w-full ">
+        <p className="text-justify">{comment}</p>
+      </div>
+      <div className="mt-3">
+        <span className="text-xs text-gray-500">
+          {modified_date ? formatDateTime(modified_date) : "-"}
+        </span>
+      </div>
+      <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
+          {created_by_object?.first_name?.charAt(0) || t("unknown")}
+        </div>
+        <span className="pl-2 text-sm text-gray-700">
+          {created_by_object?.first_name || t("unknown")}{" "}
+          {created_by_object?.last_name}
+        </span>
+      </div>
+    </div>
+  );
+};