Populate encounter edit options based on questionnaire tags

src/components/Patient/PatientInfoCard.tsx

@@ -30,6 +30,8 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 
+import useQuestionnaireOptions from "@/hooks/useQuestionnaireOptions";
+
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import { formatDateTime, formatPatientAge } from "@/Utils/utils";
@@ -38,21 +40,6 @@ import { Patient } from "@/types/emr/newPatient";
 
 import ManageEncounterOrganizations from "./ManageEncounterOrganizations";
 
-const QUESTIONNAIRE_OPTIONS = [
-  {
-    slug: "encounter",
-    title: "Update Encounter",
-  },
-  {
-    slug: "community-nurse",
-    title: "Community Nurse Form",
-  },
-  {
-    slug: "recommend_discharge_v2",
-    title: "Recommend Discharge",
-  },
-] as const;
-
 export interface PatientInfoCardProps {
   patient: Patient;
   encounter: Encounter;
@@ -63,6 +50,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
   const { patient, encounter } = props;
   const { t } = useTranslation();
   const queryClient = useQueryClient();
+  const questionnaireOptions = useQuestionnaireOptions(["encounter_actions"]);
 
   const { mutate: updateEncounter } = useMutation({
     mutationFn: mutate(routes.encounter.update, {
@@ -327,7 +315,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                  {QUESTIONNAIRE_OPTIONS.map((option) => (
+                  {questionnaireOptions.map((option) => (
                     <DropdownMenuItem key={option.slug} asChild>
                       <Link
                         href={`/facility/${encounter.facility.id}/patient/${patient.id}/encounter/${encounter.id}/questionnaire/${option.slug}`}

src/hooks/useQuestionnaireOptions.ts

@@ -0,0 +1,42 @@
+import { useQueries } from "@tanstack/react-query";
+
+import query from "@/Utils/request/query";
+import questionnaireApi from "@/types/questionnaire/questionnaireApi";
+
+interface EditQuestionnaireOption {
+  slug: string;
+  title: string;
+}
+
+const DEFAULT_OPTIONS: EditQuestionnaireOption[] = [
+  {
+    slug: "encounter",
+    title: "Update Encounter",
+  },
+];
+
+export default function useQuestionnaireOptions(slugs: string[]) {
+  const queries = useQueries({
+    queries: slugs.map((slug) => ({
+      queryKey: ["questionnaire", slug] as const,
+      queryFn: query(questionnaireApi.list, {
+        queryParams: {
+          tag_slug: slug,
+        },
+      }),
+    })),
+  });
+
+  const allQuestionnaireOptions = queries.reduce((acc, queryResult) => {
+    if (queryResult.data?.results) {
+      const newOptions = queryResult.data.results.map((q) => ({
+        slug: q.slug,
+        title: q.title,
+      }));
+      return [...acc, ...newOptions];
+    }
+    return acc;
+  }, [] as Array<EditQuestionnaireOption>);
+
+  return [...DEFAULT_OPTIONS, ...allQuestionnaireOptions];
+}