Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 18 commits into from
Oct 31, 2023
Merged

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
7767a1a
replaced useDispatch in src/resource with useQuery and request
konavivekramakrishna Oct 17, 2023
47daa24
removed unused actions
konavivekramakrishna Oct 17, 2023
5c7f715
fix loading
konavivekramakrishna Oct 17, 2023
af4abc7
Merge branch 'develop' into fix#6443
konavivekramakrishna Oct 19, 2023
c3f4c77
removed interface import
konavivekramakrishna Oct 19, 2023
59ea9f5
rm limit and offset
konavivekramakrishna Oct 19, 2023
2d4385b
Merge branch 'coronasafe:develop' into fix#6443
konavivekramakrishna Oct 19, 2023
1499bd6
Merge branch 'develop' into fix#6443
konavivekramakrishna Oct 20, 2023
ecd5aef
fixed useQuery Hooks
konavivekramakrishna Oct 22, 2023
aef48bc
checking cypress failure
konavivekramakrishna Oct 23, 2023
721fc66
changed function name
konavivekramakrishna Oct 24, 2023
df999e3
Merge branch 'develop' into fix#6443
konavivekramakrishna Oct 25, 2023
cbd67b4
removed external_id from models
konavivekramakrishna Oct 26, 2023
136f375
fix naming
konavivekramakrishna Oct 26, 2023
3dc2e60
Merge branch 'develop' into fix#6443
konavivekramakrishna Oct 26, 2023
22ba6b3
fix listfilter
konavivekramakrishna Oct 29, 2023
0f0724a
fixed the condition in badgeList
konavivekramakrishna Oct 29, 2023
f4b61c2
Merge branch 'develop' into fix#6443
konavivekramakrishna Oct 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 31 additions & 50 deletions src/Components/Resource/BadgesList.tsx
View file
Open in desktop
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);

konavivekramakrishna marked this conversation as resolved.
Show resolved Hide resolved
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 };
}

konavivekramakrishna marked this conversation as resolved.
Show resolved Hide resolved
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
),
konavivekramakrishna marked this conversation as resolved.
Show resolved Hide resolved
value(
"Approving facility",
"approving_facility",
approvingFacilityName
approvingFacilityData?.data?.name
),
konavivekramakrishna marked this conversation as resolved.
Show resolved Hide resolved
value(
"Assigned facility",
"assigned_facility",
assignedFacilityData?.data?.name
),
konavivekramakrishna marked this conversation as resolved.
Show resolved Hide resolved
value("Assigned facility", "assigned_facility", assignedFacilityName),
]}
/>
);
Expand Down
151 changes: 68 additions & 83 deletions src/Components/Resource/CommentSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,27 @@
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,
};
Expand All @@ -64,10 +31,15 @@ const CommentSection = (props: CommentSectionProps) => {
});
return;
}
dispatch(addResourceComments(props.id, payload)).then((_: any) => {
Notification.Success({ msg: "Comment added successfully" });
fetchData();

const { res, data } = await request(routes.addResourceComments, {
pathParams: { id: props.id },
body: payload,
});
if (res && data) {
Notification.Success({ msg: "Comment added successfully" });
konavivekramakrishna marked this conversation as resolved.
Show resolved Hide resolved
resourceRefetch();
}
setCommentBox("");
};

Expand All @@ -83,47 +55,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>
);
Loading
Loading