diff --git a/public/locale/en.json b/public/locale/en.json index f7dfa3bb5b7..10486c83b99 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -976,6 +976,7 @@ "error_fetching_slots_data": "Error while fetching slots data", "error_fetching_user_data": "Error while fetching user data", "error_fetching_user_details": "Error while fetching user details: ", + "error_loading_questionnaire_response": "Error loading questionnaire response", "error_sending_otp": "Error while sending OTP, Please try again later", "error_updating_encounter": "Error to Updating Encounter", "error_verifying_otp": "Error while verifying OTP, Please request a new OTP", diff --git a/src/components/Facility/ConsultationDetails/QuestionnaireResponseView.tsx b/src/components/Facility/ConsultationDetails/QuestionnaireResponseView.tsx index 679b8c21b24..73cf60a63fe 100644 --- a/src/components/Facility/ConsultationDetails/QuestionnaireResponseView.tsx +++ b/src/components/Facility/ConsultationDetails/QuestionnaireResponseView.tsx @@ -1,3 +1,4 @@ +import { useQuery } from "@tanstack/react-query"; import { useTranslation } from "react-i18next"; import CareIcon from "@/CAREUI/icons/CareIcon"; @@ -9,28 +10,27 @@ import { Skeleton } from "@/components/ui/skeleton"; import Page from "@/components/Common/Page"; import routes from "@/Utils/request/api"; -import useQuery from "@/Utils/request/useQuery"; +import query from "@/Utils/request/query"; import { formatDateTime } from "@/Utils/utils"; import { QuestionnaireResponse as Response } from "@/types/questionnaire/form"; import { Question } from "@/types/questionnaire/question"; export default function QuestionnaireResponseView({ responseId, - patientId, }: { responseId: string; patientId: string; }) { const { t } = useTranslation(); - const { data: formResponse, loading } = useQuery( - routes.getQuestionnaireResponse, - { + const { data: formResponse, isLoading } = useQuery({ + queryKey: ["getQuestionnaireResponse", patientId, responseId], + queryFn: query(routes.getQuestionnaireResponse, { pathParams: { patientId, responseId }, - }, - ); + }), + }); - if (loading) { + if (isLoading) { return (
diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx index 5e49cca2579..28a1cbb0049 100644 --- a/src/components/Questionnaire/QuestionnaireEditor.tsx +++ b/src/components/Questionnaire/QuestionnaireEditor.tsx @@ -1,5 +1,5 @@ import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd"; -import { useMutation } from "@tanstack/react-query"; +import { useMutation, useQuery } from "@tanstack/react-query"; import { useNavigate } from "raviger"; import { useEffect, useState } from "react"; import { toast } from "sonner"; @@ -29,7 +29,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Textarea } from "@/components/ui/textarea"; import mutate from "@/Utils/request/mutate"; -import useQuery from "@/Utils/request/useQuery"; +import query from "@/Utils/request/query"; import { AnswerOption, EnableWhen, @@ -60,10 +60,13 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) { const { data: initialQuestionnaire, - loading, + isLoading, error, - } = useQuery(questionnaireApi.detail, { - pathParams: { id }, + } = useQuery({ + queryKey: ["questionnaireDetail", id], + queryFn: query(questionnaireApi.detail, { + pathParams: { id }, + }), }); const { mutate: updateQuestionnaire, isPending } = useMutation({ @@ -87,7 +90,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) { } }, [initialQuestionnaire]); - if (loading) return ; + if (isLoading) return ; if (error) { return ( diff --git a/src/components/Questionnaire/QuestionnaireForm.tsx b/src/components/Questionnaire/QuestionnaireForm.tsx index a3408990e37..a5b89383b8e 100644 --- a/src/components/Questionnaire/QuestionnaireForm.tsx +++ b/src/components/Questionnaire/QuestionnaireForm.tsx @@ -1,4 +1,4 @@ -import { useMutation } from "@tanstack/react-query"; +import { useMutation, useQuery } from "@tanstack/react-query"; import { t } from "i18next"; import { useNavigationPrompt } from "raviger"; import { useEffect, useState } from "react"; @@ -16,7 +16,7 @@ import Loading from "@/components/Common/Loading"; import { PLUGIN_Component } from "@/PluginEngine"; import routes from "@/Utils/request/api"; import mutate from "@/Utils/request/mutate"; -import useQuery from "@/Utils/request/useQuery"; +import query from "@/Utils/request/query"; import { DetailedValidationError, QuestionValidationError, @@ -74,11 +74,14 @@ export function QuestionnaireForm({ const { data: questionnaireData, - loading: isQuestionnaireLoading, + isLoading: isQuestionnaireLoading, error: questionnaireError, - } = useQuery(questionnaireApi.detail, { - pathParams: { id: questionnaireSlug ?? "" }, - prefetch: !!questionnaireSlug && !FIXED_QUESTIONNAIRES[questionnaireSlug], + } = useQuery({ + queryKey: ["questionnaireDetail", questionnaireSlug], + queryFn: query(questionnaireApi.detail, { + pathParams: { id: questionnaireSlug ?? "" }, + }), + enabled: !!questionnaireSlug && !FIXED_QUESTIONNAIRES[questionnaireSlug], }); const { mutate: submitBatch, isPending } = useMutation({ diff --git a/src/components/Questionnaire/index.tsx b/src/components/Questionnaire/index.tsx index 8a1f0dea4f5..a1843a4ccda 100644 --- a/src/components/Questionnaire/index.tsx +++ b/src/components/Questionnaire/index.tsx @@ -1,9 +1,10 @@ +import { useQuery } from "@tanstack/react-query"; import { useNavigate } from "raviger"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; -import useQuery from "@/Utils/request/useQuery"; +import query from "@/Utils/request/query"; import { QuestionnaireDetail } from "@/types/questionnaire/questionnaire"; import questionnaireApi from "@/types/questionnaire/questionnaireApi"; @@ -11,9 +12,12 @@ import Loading from "../Common/Loading"; export function QuestionnaireList() { const navigate = useNavigate(); - const { data: response, loading } = useQuery(questionnaireApi.list); + const { data: response, isLoading } = useQuery({ + queryKey: ["questionnaires"], + queryFn: query(questionnaireApi.list), + }); - if (loading) { + if (isLoading) { return ; } diff --git a/src/hooks/useQuestionnaireOptions.ts b/src/hooks/useQuestionnaireOptions.ts index 73a0724865e..1b0852109bb 100644 --- a/src/hooks/useQuestionnaireOptions.ts +++ b/src/hooks/useQuestionnaireOptions.ts @@ -17,7 +17,7 @@ const DEFAULT_OPTIONS: EditQuestionnaireOption[] = [ export default function useQuestionnaireOptions(slug: string) { const { data } = useQuery({ - queryKey: ["questionnaire", slug] as const, + queryKey: ["questionnaires", slug] as const, queryFn: query(questionnaireApi.list, { queryParams: { tag_slug: slug,