Skip to content

Commit

Permalink
replaced useDispatch in src/resource with useQuery and request
Browse files Browse the repository at this point in the history
  • Loading branch information
@konavivekramakrishna
konavivekramakrishna committed Oct 17, 2023
1 parent 8ad1353 commit 7767a1a
Show file tree
Hide file tree
Showing 8 changed files with 273 additions and 299 deletions.
81 changes: 31 additions & 50 deletions src/Components/Resource/BadgesList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,33 @@
import { useState, useEffect } from "react";
import { getAnyFacility } from "../../Redux/actions";
import { useDispatch } from "react-redux";
/* eslint-disable react-hooks/rules-of-hooks */
import { SHIFTING_FILTER_ORDER } from "../../Common/constants";
import routes from "../../Redux/api";
import useQuery from "../../Utils/request/useQuery";

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]);
const originFacilityData =
appliedFilters.origin_facility &&
useQueryHook(appliedFilters.origin_facility);
const approvingFacilityData =
appliedFilters.approving_facility &&
useQueryHook(appliedFilters.approving_facility);
const assignedFacilityData =
appliedFilters.assigned_facility &&
useQueryHook(appliedFilters.assigned_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]);
function useQueryHook(facilityId: any) {
const { data } = useQuery(routes.getAnyFacility, {
pathParams: { id: facilityId },
});
return { data };
}

const getDescShiftingFilterOrder = (ordering: any) => {
let desc = "";
SHIFTING_FILTER_ORDER.map((item: any) => {
SHIFTING_FILTER_ORDER.forEach((item) => {
if (item.text === ordering) {
desc = item.desc;
desc = item.desc!;
}
});
return desc;
Expand All @@ -75,13 +48,21 @@ 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",
originFacilityData?.data?.name
),
value(
"Approving facility",
"approving_facility",
approvingFacilityName
approvingFacilityData?.data?.name
),
value(
"Assigned facility",
"assigned_facility",
assignedFacilityData?.data?.name
),
value("Assigned facility", "assigned_facility", assignedFacilityName),
]}
/>
);
Expand Down
139 changes: 62 additions & 77 deletions src/Components/Resource/CommentSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,28 @@
import { useCallback, useState } from "react";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { statusType, useAbortableEffect } from "../../Common/utils";
import { getResourceComments, addResourceComments } from "../../Redux/actions";
import { addResourceComments } from "../../Redux/actions";
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";

interface CommentSectionProps {
id: string;
}
const CommentSection = (props: CommentSectionProps) => {
const CommentSection = (props: { id: string }) => {
const dispatch: any = useDispatch();
const initialData: any = [];
const [comments, setComments] = useState(initialData);
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 offset = 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, offset },
}
);

const onSubmitComment = () => {
Expand All @@ -66,7 +37,7 @@ const CommentSection = (props: CommentSectionProps) => {
}
dispatch(addResourceComments(props.id, payload)).then((_: any) => {
Notification.Success({ msg: "Comment added successfully" });
fetchData();
resourceRefetch();
});
setCommentBox("");
};
Expand All @@ -83,47 +54,61 @@ 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 }}
query={{ limit, offset }}
>
{() => (
<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>
);
Loading

0 comments on commit 7767a1a

Please sign in to comment.