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

Refactor FileBlock, FIleUpload, UserAvatar, UserHome and migrated to TanStack's query #10045

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
+92 −80
Open

Refactor FileBlock, FIleUpload, UserAvatar, UserHome and migrated to TanStack's query #10045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d210a44
Refactor to use React Query for data fetching in FileBlock, FileUploa…
abhimanyurajeesh Jan 18, 2025
9bc53a5
Refactor FileBlock, FileUpload, and UserHome components to improve qu…
abhimanyurajeesh Jan 20, 2025
3cfb5f0
Remove unused queryClient and refetchUserData function in UserHome co…
abhimanyurajeesh Jan 21, 2025
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
16 changes: 10 additions & 6 deletions src/components/Files/FileBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useQuery } from "@tanstack/react-query";
import dayjs from "dayjs";
import { t } from "i18next";

Expand All @@ -12,7 +13,7 @@ import { FileManagerResult } from "@/hooks/useFileManager";
import { FILE_EXTENSIONS } from "@/common/constants";

import routes from "@/Utils/request/api";
import useTanStackQueryInstead from "@/Utils/request/useQuery";
import query from "@/Utils/request/query";

export interface FileBlockProps {
file: FileUploadModel;
Expand All @@ -33,10 +34,13 @@ export default function FileBlock(props: FileBlockProps) {

const filetype = fileManager.getFileType(file);

const fileData = useTanStackQueryInstead(routes.retrieveUpload, {
query: { file_type: fileManager.type, associating_id },
pathParams: { id: file.id || "" },
prefetch: filetype === "AUDIO" && !file.is_archived,
const { data: fileData } = useQuery({
queryKey: ["file", { id: file.id, type: fileManager.type, associating_id }],
queryFn: query(routes.retrieveUpload, {
queryParams: { file_type: fileManager.type, associating_id },
pathParams: { id: file.id || "" },
}),
enabled: filetype === "AUDIO" && !file.is_archived,
});

const icons: Record<keyof typeof FILE_EXTENSIONS | "UNKNOWN", IconName> = {
Expand Down Expand Up @@ -82,7 +86,7 @@ export default function FileBlock(props: FileBlockProps) {
<div className="w-full md:w-[300px]">
<audio
className="max-h-full w-full object-contain"
src={fileData.data?.read_signed_url}
src={fileData?.read_signed_url}
abhimanyurajeesh marked this conversation as resolved.
Show resolved Hide resolved
controls
preload="auto"
controlsList="nodownload"
Expand Down
98 changes: 62 additions & 36 deletions src/components/Files/FileUpload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Loader2 } from "lucide-react";
import { ReactNode, useState } from "react";
import { useTranslation } from "react-i18next";
Expand All @@ -19,7 +20,7 @@ import useFileUpload from "@/hooks/useFileUpload";
import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants";

import routes from "@/Utils/request/api";
import useTanStackQueryInstead from "@/Utils/request/useQuery";
import query from "@/Utils/request/query";

export const LinearProgressWithLabel = (props: { value: number }) => {
return (
Expand Down Expand Up @@ -89,6 +90,7 @@ export const FileUpload = (props: FileUploadProps) => {
const [offset, setOffset] = useState(0);
const [tab, setTab] = useState("UNARCHIVED");
const authUser = useAuthUser();
const queryClient = useQueryClient();

const handlePagination = (page: number, limit: number) => {
const offset = (page - 1) * limit;
Expand Down Expand Up @@ -118,54 +120,78 @@ export const FileUpload = (props: FileUploadProps) => {
CLAIM: claimId,
}[type] || "";

const activeFilesQuery = useTanStackQueryInstead(routes.viewUpload, {
query: {
file_type: type,
associating_id: associatedId,
is_archived: false,
limit: RESULTS_PER_PAGE_LIMIT,
offset: offset,
},
});
const refetchAll = () => {
queryClient.invalidateQueries({
queryKey: ["viewUpload", "active", type, associatedId],
});
queryClient.invalidateQueries({
queryKey: ["viewUpload", "archived", type, associatedId],
});
if (type === "consultation") {
queryClient.invalidateQueries({
queryKey: ["viewUpload", "discharge_summary", associatedId],
});
}
};

const archivedFilesQuery = useTanStackQueryInstead(routes.viewUpload, {
query: {
file_type: type,
associating_id: associatedId,
is_archived: true,
limit: RESULTS_PER_PAGE_LIMIT,
offset: offset,
},
const { data: activeFiles, isLoading: activeFilesLoading } = useQuery({
queryKey: ["viewUpload", "active", type, associatedId, offset],
queryFn: query(routes.viewUpload, {
queryParams: {
file_type: type,
associating_id: associatedId,
is_archived: false,
limit: RESULTS_PER_PAGE_LIMIT,
offset: offset,
},
}),
});

const dischargeSummaryQuery = useTanStackQueryInstead(routes.viewUpload, {
query: {
file_type: "discharge_summary",
associating_id: associatedId,
is_archived: false,
limit: RESULTS_PER_PAGE_LIMIT,
offset: offset,
},
prefetch: type === "consultation",
silent: true,
const { data: archivedFiles, isLoading: archivedFilesLoading } = useQuery({
queryKey: ["viewUpload", "archived", type, associatedId, offset],
queryFn: query(routes.viewUpload, {
queryParams: {
file_type: type,
associating_id: associatedId,
is_archived: true,
limit: RESULTS_PER_PAGE_LIMIT,
offset: offset,
},
}),
});

const { data: dischargeSummary, isLoading: dischargeSummaryLoading } =
useQuery({
queryKey: ["viewUpload", "discharge_summary", associatedId, offset],
queryFn: query(routes.viewUpload, {
queryParams: {
file_type: "discharge_summary",
associating_id: associatedId,
is_archived: false,
limit: RESULTS_PER_PAGE_LIMIT,
offset: offset,
silent: true,
},
}),
enabled: type === "consultation",
});

const queries = {
UNARCHIVED: activeFilesQuery,
ARCHIVED: archivedFilesQuery,
DISCHARGE_SUMMARY: dischargeSummaryQuery,
UNARCHIVED: { data: activeFiles, isLoading: activeFilesLoading },
ARCHIVED: { data: archivedFiles, isLoading: archivedFilesLoading },
DISCHARGE_SUMMARY: {
data: dischargeSummary,
isLoading: dischargeSummaryLoading,
},
};

const refetchAll = async () =>
Promise.all(Object.values(queries).map((q) => q.refetch()));
const loading = Object.values(queries).some((q) => q.loading);

const loading = Object.values(queries).some((q) => q.isLoading);
const fileQuery = queries[tab as keyof typeof queries];

const tabs = [
{ text: "Active Files", value: "UNARCHIVED" },
{ text: "Archived Files", value: "ARCHIVED" },
...(dischargeSummaryQuery.data?.results?.length
...(dischargeSummary?.results?.length
? [
{
text: "Discharge Summary",
Expand Down
13 changes: 7 additions & 6 deletions src/components/Users/UserAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import careConfig from "@careConfig";
import { useQueryClient } from "@tanstack/react-query";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
Expand All @@ -15,9 +16,9 @@ import useAuthUser from "@/hooks/useAuthUser";

import { showAvatarEdit } from "@/Utils/permissions";
import routes from "@/Utils/request/api";
import query from "@/Utils/request/query";
import request from "@/Utils/request/request";
import uploadFile from "@/Utils/request/uploadFile";
import useTanStackQueryInstead from "@/Utils/request/useQuery";
import { getAuthorizationHeader } from "@/Utils/request/utils";
import { formatDisplayName, sleep } from "@/Utils/utils";

Expand All @@ -27,14 +28,14 @@ export default function UserAvatar({ username }: { username: string }) {
const authUser = useAuthUser();
const queryClient = useQueryClient();

const { data: userData, loading: isLoading } = useTanStackQueryInstead(
routes.getUserDetails,
{
const { data: userData, isLoading } = useQuery({
queryKey: ["getUserDetails", username],
queryFn: query(routes.getUserDetails, {
pathParams: {
username: username,
},
},
);
}),
});

if (isLoading || !userData) {
return <Loading />;
Expand Down
45 changes: 13 additions & 32 deletions src/components/Users/UserHome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Link, navigate } from "raviger";
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Link } from "raviger";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";

import Loading from "@/components/Common/Loading";
import Page from "@/components/Common/Page";
Expand All @@ -14,9 +13,8 @@ import UserSummaryTab from "@/components/Users/UserSummary";
import useAuthUser from "@/hooks/useAuthUser";

import routes from "@/Utils/request/api";
import useTanStackQueryInstead from "@/Utils/request/useQuery";
import query from "@/Utils/request/query";
import { classNames, formatName, keysOf } from "@/Utils/utils";
import { UserBase } from "@/types/user/user";

export interface UserHomeProps {
username?: string;
Expand All @@ -31,35 +29,23 @@ export interface TabChildProp {
export default function UserHome(props: UserHomeProps) {
const { tab } = props;
let { username } = props;
const [userData, setUserData] = useState<UserBase>();
const { t } = useTranslation();
const authUser = useAuthUser();

if (!username) {
username = authUser.username;
}
const loggedInUser = username === authUser.username;

const { loading, refetch: refetchUserDetails } = useTanStackQueryInstead(
routes.getUserDetails,
{
pathParams: {
username: username,
},
onResponse: ({ res, data, error }) => {
if (res?.status === 200 && data) {
setUserData(data);
} else if (res?.status === 400) {
navigate("/users");
} else if (error) {
toast.error(
t("error_fetching_user_details") + (error?.message || ""),
);
}
},
},
);
const { data: userData, isLoading } = useQuery({
queryKey: ["getUserDetails", username],
queryFn: query(routes.getUserDetails, {
pathParams: { username },
}),
enabled: Boolean(username),
});

if (loading || !userData) {
if (isLoading || !userData) {
return <Loading />;
}

Expand Down Expand Up @@ -142,12 +128,7 @@ export default function UserHome(props: UserHomeProps) {
</div>
</div>
</div>
<SelectedTab
userData={userData}
username={username}
{...props}
refetchUserData={refetchUserDetails}
/>
<SelectedTab userData={userData} username={username} {...props} />
</>
Comment on lines -145 to +131
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you should be deleting the prop too from here and update all tabs to not call that anymore and instead use invalidate queries.

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

which is this file, is this userColumns?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yup

}
</Page>
Expand Down
Loading