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

src/Components/Resource/BadgesList.tsx

@@ -1,63 +1,25 @@
-import { useState, useEffect } from "react";
-import { getAnyFacility } from "../../Redux/actions";
-import { useDispatch } from "react-redux";
 import { SHIFTING_FILTER_ORDER } from "../../Common/constants";
+import routes from "../../Redux/api";
+import useQuery from "../../Utils/request/useQuery";
+
+function useFacilityQuery(facilityId: string | undefined) {
+  return useQuery(routes.getAnyFacility, {
+    pathParams: { id: String(facilityId) },
+    prefetch: facilityId !== undefined,
+  });
+}
 
 export default function BadgesList(props: any) {
   const { appliedFilters, FilterBadges } = props;
-  const [orginFacilityName, setOrginFacilityName] = useState("");
-  const [approvingFacilityName, setApprovingFacilityName] = useState("");
-  const [assignedFacilityName, setAssignedFacilityName] = useState("");
-  const dispatch: any = useDispatch();
-
-  useEffect(() => {
-    async function fetchData() {
-      if (!appliedFilters.origin_facility) return setOrginFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(appliedFilters.origin_facility, "origin_facility_name")
-      );
-      setOrginFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, appliedFilters.origin_facility]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (!appliedFilters.approving_facility)
-        return setApprovingFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(
-          appliedFilters.approving_facility,
-          "approving_facility_name"
-        )
-      );
-      setApprovingFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, appliedFilters.approving_facility]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (!appliedFilters.assigned_facility) return setAssignedFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(
-          appliedFilters.assigned_facility,
-          "assigned_facility_name"
-        )
-      );
-      setAssignedFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, appliedFilters.assigned_facility]);
+  const originFacility = useFacilityQuery(appliedFilters.origin_facility);
+  const approvingFacility = useFacilityQuery(appliedFilters.approving_facility);
+  const assignedFacility = useFacilityQuery(appliedFilters.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 (
@@ -75,13 +37,25 @@ export default function BadgesList(props: any) {
         }),
         ...dateRange("Modified", "modified_date"),
         ...dateRange("Created", "created_date"),
-        value("Origin facility", "origin_facility", orginFacilityName),
+        value(
+          "Origin facility",
+          "origin_facility",
+          appliedFilters.origin_facility ? originFacility?.data?.name || "" : ""
+        ),
         value(
           "Approving facility",
           "approving_facility",
-          approvingFacilityName
+          appliedFilters.approving_facility
+            ? approvingFacility?.data?.name || ""
+            : ""
+        ),
+        value(
+          "Assigned facility",
+          "assigned_facility",
+          appliedFilters.assigned_facility
+            ? assignedFacility?.data?.name || ""
+            : ""
         ),
-        value("Assigned facility", "assigned_facility", assignedFacilityName),
       ]}
     />
   );

src/Components/Resource/CommentSection.tsx

@@ -1,60 +1,26 @@
-import { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { getResourceComments, addResourceComments } from "../../Redux/actions";
+import { useState } from "react";
 import * as Notification from "../../Utils/Notifications.js";
-import Pagination from "../Common/Pagination";
 import { formatDateTime } from "../../Utils/utils";
 import CircularProgress from "../Common/components/CircularProgress";
 import ButtonV2 from "../Common/components/ButtonV2";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import PaginatedList from "../../CAREUI/misc/PaginatedList";
+import { IComment } from "./models";
+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 CommentSection = (props: { id: string }) => {
   const [commentBox, setCommentBox] = useState("");
-  const [isLoading, setIsLoading] = useState(true);
-
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalCount, setTotalCount] = useState(0);
-  const [offset, setOffset] = useState(0);
-  const limit = 8;
-
-  const handlePagination = (page: number, limit: number) => {
-    const offset = (page - 1) * limit;
-    setCurrentPage(page);
-    setOffset(offset);
-  };
-
-  const fetchData = useCallback(
-    async (status: statusType = { aborted: false }) => {
-      setIsLoading(true);
-      const res = await dispatch(
-        getResourceComments(props.id, { limit, offset })
-      );
-      if (!status.aborted) {
-        if (res && res.data) {
-          setComments(res.data?.results);
-          setTotalCount(res.data.count);
-        }
-        setIsLoading(false);
-      }
-    },
-    [props.id, dispatch, offset]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [fetchData]
+  const { loading, refetch: resourceRefetch } = useQuery(
+    routes.getResourceComments,
+    {
+      pathParams: { id: props.id },
+      query: { limit: 8, offset: 0 },
+    }
   );
 
-  const onSubmitComment = () => {
+  const onSubmitComment = async () => {
     const payload = {
       comment: commentBox,
     };
@@ -64,13 +30,16 @@ const CommentSection = (props: CommentSectionProps) => {
       });
       return;
     }
-    dispatch(addResourceComments(props.id, payload)).then((_: any) => {
-      Notification.Success({ msg: "Comment added successfully" });
-      fetchData();
+    const { res } = await request(routes.addResourceComments, {
+      pathParams: { id: props.id },
+      body: payload,
     });
+    if (res?.ok) {
+      Notification.Success({ msg: "Comment added successfully" });
+      resourceRefetch();
+    }
     setCommentBox("");
   };
-
   return (
     <div className="flex w-full flex-col">
       <TextAreaFormField
@@ -83,47 +52,60 @@ const CommentSection = (props: CommentSectionProps) => {
         <ButtonV2 onClick={onSubmitComment}>Post Your Comment</ButtonV2>
       </div>
       <div className="w-full">
-        {isLoading ? (
+        {loading ? (
           <CircularProgress className="h-12 w-12" />
         ) : (
-          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">
-                  {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) || "U"}
+          <PaginatedList
+            route={routes.getResourceComments}
+            pathParams={{ id: props.id }}
+          >
+            {() => (
+              <div>
+                <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
+                  <span>No comments available</span>
+                </PaginatedList.WhenEmpty>
+                <PaginatedList.WhenLoading>
+                  <CircularProgress className="h-12 w-12" />
+                </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 || "Unknown"}{" "}
-                  {comment.created_by_object?.last_name}
-                </span>
               </div>
-            </div>
-          ))
+            )}
+          </PaginatedList>
         )}
       </div>
-      {totalCount > limit && (
-        <div className="mt-4 flex w-full justify-center">
-          <Pagination
-            cPage={currentPage}
-            defaultPerPage={limit}
-            data={{ totalCount }}
-            onChange={handlePagination}
-          />
-        </div>
-      )}
     </div>
   );
 };
 
 export default CommentSection;
+
+export const Comment = ({
+  comment,
+  created_by_object,
+  modified_date,
+}: IComment) => (
+  <div 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">
+        {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) || "U"}
+      </div>
+      <span className="pl-2 text-sm text-gray-700">
+        {created_by_object?.first_name || "Unknown"}{" "}
+        {created_by_object?.last_name}
+      </span>
+    </div>
+  </div>
+);