refactor hook for reuse

query-connector/src/app/query/SelectQuery.tsx

@@ -1,6 +1,11 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { FHIR_SERVERS, USE_CASES, ValueSet } from "../constants";
+import {
+  FHIR_SERVERS,
+  USE_CASES,
+  UseCaseToQueryName,
+  ValueSet,
+} from "../constants";
 import CustomizeQuery from "./components/CustomizeQuery";
 import SelectSavedQuery from "./components/selectQuery/SelectSavedQuery";
 
@@ -71,12 +76,21 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
     // avoid name-change race conditions
     let isSubscribed = true;
 
-    fetchUseCaseValueSets(
-      selectedQuery,
-      setQueryValueSets,
-      isSubscribed,
-      setLoadingQueryValueSets,
-    ).catch(console.error);
+    const fetchDataAndUpdateState = async () => {
+      if (selectedQuery) {
+        const queryName = UseCaseToQueryName[selectedQuery as USE_CASES];
+        const valueSets = await fetchUseCaseValueSets(queryName);
+
+        // Only update if the fetch hasn't altered state yet
+        if (isSubscribed) {
+          setQueryValueSets(valueSets);
+        }
+      }
+    };
+
+    setLoadingQueryValueSets(true);
+    fetchDataAndUpdateState().catch(console.error);
+    setLoadingQueryValueSets(false);
 
     // Destructor hook to prevent future state updates
     return () => {

query-connector/src/app/query/components/selectQuery/queryHooks.ts

@@ -15,31 +15,15 @@ import { Patient } from "fhir/r4";
 type SetStateCallback<T> = React.Dispatch<React.SetStateAction<T>>;
 
 /**
- * Query to grab valuesets based on use case
- * @param selectedQuery - Query use case that's been selected
- * @param valueSetStateCallback - state update function to set the valuesets
- * @param isSubscribed - state destructor hook to prevent race conditions
- * @param setIsLoading - update function to control loading UI
+ * Fetch to grab valuesets based the name of the query
+ * @param queryName - name of the query to grab associated ValueSets for
+ * @returns The valuesets from the specified query name
  */
-export async function fetchUseCaseValueSets(
-  selectedQuery: USE_CASES,
-  valueSetStateCallback: SetStateCallback<ValueSet[]>,
-  isSubscribed: boolean,
-  setIsLoading: (isLoading: boolean) => void,
-) {
-  if (selectedQuery) {
-    const queryName = UseCaseToQueryName[selectedQuery as USE_CASES];
+export async function fetchUseCaseValueSets(queryName: string) {
+  const queryResults = await getSavedQueryByName(queryName);
+  const valueSets = await mapQueryRowsToValueSets(queryResults);
 
-    setIsLoading(true);
-    const queryResults = await getSavedQueryByName(queryName);
-    const valueSets = await mapQueryRowsToValueSets(queryResults);
-
-    // Only update if the fetch hasn't altered state yet
-    if (isSubscribed) {
-      valueSetStateCallback(valueSets);
-    }
-    setIsLoading(false);
-  }
+  return valueSets;
 }
 
 /**

query-connector/src/app/queryBuilding/page.tsx

@@ -2,11 +2,8 @@
 import { Button, Fieldset, Label, TextInput } from "@trussworks/react-uswds";
 import { useState } from "react";
 import styles from "./query.module.scss";
-import {
-  getSavedQueryByName,
-  insertUserQuery,
-  mapQueryRowsToValueSets,
-} from "../database-service";
+import { insertUserQuery } from "../database-service";
+import { fetchUseCaseValueSets } from "../query/components/selectQuery/queryHooks";
 /**
  * Query building page that allows users to build their own queries from the
  * existing library of valuesets
@@ -19,10 +16,9 @@ export default function QueryBuilding() {
     if (queryName) {
       // TODO: remove this temporary hardcode once we have the valueset selection
       // implemented
-      const queryResults = await getSavedQueryByName(
+      const valueSets = await fetchUseCaseValueSets(
         "Chlamydia trachomatis infection (disorder)",
       );
-      const valueSets = await mapQueryRowsToValueSets(queryResults);
 
       const queryBuildingInput = {
         queryName: queryName,