unbreak API by fixing route import (#228)

query-connector/src/app/DataProvider.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import classNames from "classnames";
+import { createContext, ReactNode, useState } from "react";
+
+export interface DataDisplayInfo {
+  title: string;
+  value?: string | React.JSX.Element | React.JSX.Element[];
+}
+
+/**
+ * Functional component for displaying data.
+ * @param props - Props for the component.
+ * @param props.item - The display data item(s) to be rendered.
+ * @param [props.className] - Additional class name for styling purposes.
+ * @returns - A React element representing the display of data.
+ */
+export const DataDisplay: React.FC<{
+  item: DataDisplayInfo;
+  className?: string;
+}> = ({
+  item,
+  className,
+}: {
+  item: DataDisplayInfo;
+  className?: string;
+}): React.JSX.Element => {
+  return (
+    <div>
+      <div className="grid-row">
+        <div className="data-title" id={item.title}>
+          {item.title}
+        </div>
+        <div
+          className={classNames("grid-col-auto maxw7 text-pre-line", className)}
+        >
+          {item.value}
+        </div>
+      </div>
+      <div className={"section__line_gray"} />
+    </div>
+  );
+};
+
+export interface DataContextValue {
+  data: unknown; // You can define a specific data type here
+  setData: (data: unknown) => void;
+}
+
+export const DataContext = createContext<DataContextValue | undefined>(
+  undefined,
+);
+
+/**
+ *
+ * @param root0 - Children
+ * @param root0.children - Children
+ * @returns - The data provider component.
+ */
+export function DataProvider({ children }: { children: ReactNode }) {
+  const [data, setData] = useState<unknown | null>(null);
+
+  return (
+    <DataContext.Provider value={{ data, setData }}>
+      {children}
+    </DataContext.Provider>
+  );
+}
+
+export default DataProvider;

query-connector/src/app/layout.tsx

@@ -1,8 +1,8 @@
 import "../styles/styles.scss";
 import Header from "./query/components/header/header";
 import Footer from "./query/components/footer/footer";
-import { DataProvider } from "./utils";
 import { SessionProvider } from "next-auth/react";
+import DataProvider from "./DataProvider";
 
 /**
  * Establishes the layout for the application.

query-connector/src/app/query/components/resultsView/tableComponents/Demographics.tsx

@@ -1,6 +1,4 @@
 import { Patient } from "fhir/r4";
-import { DataDisplayInfo } from "@/app/utils";
-import { DataDisplay } from "@/app/utils";
 import * as dateFns from "date-fns";
 import { evaluate } from "fhirpath";
 
@@ -11,6 +9,7 @@ import {
   formatIdentifier,
   formatDate,
 } from "../../../../format-service";
+import { DataDisplay, DataDisplayInfo } from "@/app/DataProvider";
 
 /**
  * Displays the demographic information of a patient.

query-connector/src/app/queryBuilding/querySelection/QuerySelection.tsx

@@ -3,7 +3,6 @@
 import { getCustomQueries } from "@/app/database-service";
 import { CustomUserQuery } from "@/app/query-building";
 import LoadingView from "@/app/query/components/LoadingView";
-import { DataContext } from "@/app/utils";
 import {
   useContext,
   useState,
@@ -17,6 +16,7 @@ import UserQueriesDisplay from "./UserQueriesDisplay";
 import { SelectedQueryDetails, SelectedQueryState } from "./utils";
 import styles from "./querySelection.module.scss";
 import { BuildStep } from "@/app/constants";
+import { DataContext } from "@/app/DataProvider";
 
 type QuerySelectionProps = {
   selectedQuery: SelectedQueryState;

query-connector/src/app/queryBuilding/querySelection/UserQueriesDisplay.tsx

@@ -9,7 +9,6 @@ import { Button, Icon, Table } from "@trussworks/react-uswds";
 import { ModalRef } from "@/app/query/designSystem/modal/Modal";
 import styles from "./querySelection.module.scss";
 import { CustomUserQuery } from "@/app/query-building";
-import { DataContext } from "@/app/utils";
 
 import { BuildStep } from "@/app/constants";
 import {
@@ -22,6 +21,7 @@ import {
   SelectedQueryDetails,
 } from "./utils";
 import LoadingView from "@/app/query/components/LoadingView";
+import { DataContext } from "@/app/DataProvider";
 
 interface UserQueriesDisplayProps {
   queries: CustomUserQuery[];

query-connector/src/app/queryBuilding/querySelection/utils.tsx

@@ -4,8 +4,8 @@ import "react-toastify/dist/ReactToastify.css";
 import { RefObject } from "react";
 import { CustomUserQuery } from "@/app/query-building";
 import { deleteQueryById } from "@/app/database-service";
-import { DataContextValue } from "@/app/utils";
 import { showToastConfirmation } from "@/app/query/designSystem/toast/Toast";
+import { DataContextValue } from "@/app/DataProvider";
 
 /**
  * Handles deleting a user query.

query-connector/src/app/tests/unit/utils.test.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import {
-  DataDisplay,
-  DataDisplayInfo,
   groupConditionConceptsIntoValueSets,
   unnestValueSetsFromQuery,
 } from "../../utils";
@@ -17,6 +15,7 @@ import {
   DEFAULT_CHLAMYDIA_QUERY,
   EXPECTED_CHLAMYDIA_VALUESET_LENGTH,
 } from "./fixtures";
+import { DataDisplayInfo, DataDisplay } from "@/app/DataProvider";
 
 describe("DataDisplay Component", () => {
   it("should render the title and value", () => {

query-connector/src/app/utils.tsx → query-connector/src/app/utils.ts

@@ -1,74 +1,6 @@
-"use client";
-import { createContext, ReactNode, useState } from "react";
-import React from "react";
-import classNames from "classnames";
 import { QueryResultRow } from "pg";
 import { ValueSet } from "./constants";
 
-export interface DataDisplayInfo {
-  title: string;
-  value?: string | React.JSX.Element | React.JSX.Element[];
-}
-
-/**
- * Functional component for displaying data.
- * @param props - Props for the component.
- * @param props.item - The display data item(s) to be rendered.
- * @param [props.className] - Additional class name for styling purposes.
- * @returns - A React element representing the display of data.
- */
-export const DataDisplay: React.FC<{
-  item: DataDisplayInfo;
-  className?: string;
-}> = ({
-  item,
-  className,
-}: {
-  item: DataDisplayInfo;
-  className?: string;
-}): React.JSX.Element => {
-  return (
-    <div>
-      <div className="grid-row">
-        <div className="data-title" id={item.title}>
-          {item.title}
-        </div>
-        <div
-          className={classNames("grid-col-auto maxw7 text-pre-line", className)}
-        >
-          {item.value}
-        </div>
-      </div>
-      <div className={"section__line_gray"} />
-    </div>
-  );
-};
-
-export interface DataContextValue {
-  data: unknown; // You can define a specific data type here
-  setData: (data: unknown) => void;
-}
-
-export const DataContext = createContext<DataContextValue | undefined>(
-  undefined,
-);
-
-/**
- *
- * @param root0 - Children
- * @param root0.children - Children
- * @returns - The data provider component.
- */
-export function DataProvider({ children }: { children: ReactNode }) {
-  const [data, setData] = useState<unknown | null>(null);
-
-  return (
-    <DataContext.Provider value={{ data, setData }}>
-      {children}
-    </DataContext.Provider>
-  );
-}
-
 type QueryTableQueryDataColumn = {
   [condition_name: string]: {
     [valueSetId: string]: ValueSet;