From fb7f67c6ba28f6473586b139c10499e8c413b6f3 Mon Sep 17 00:00:00 2001
From: Bob Zhao <bob@skylight.digital>
Date: Mon, 21 Oct 2024 10:29:25 -0400
Subject: [PATCH] fix site container issue

---
 .../src/app/query/components/ResultsView.tsx  |   2 +-
 .../src/app/query/components/SearchForm.tsx   |   2 +-
 query-connector/src/app/query/page.tsx        | 114 ++++++++----------
 query-connector/src/styles/custom-styles.scss |  59 ++++-----
 4 files changed, 79 insertions(+), 98 deletions(-)

diff --git a/query-connector/src/app/query/components/ResultsView.tsx b/query-connector/src/app/query/components/ResultsView.tsx
index fe138dba..518e3172 100644
--- a/query-connector/src/app/query/components/ResultsView.tsx
+++ b/query-connector/src/app/query/components/ResultsView.tsx
@@ -4,7 +4,7 @@ import ResultsViewSideNav, {
 } from "./resultsView/ResultsViewSideNav";
 import React, { useEffect } from "react";
 import ResultsViewTable from "./resultsView/ResultsViewTable";
-import styles from "./resultsView.module.scss";
+import styles from "./resultsView/resultsView.module.scss";
 import ConditionsTable from "./resultsView/tableComponents/ConditionsTable";
 import Demographics from "./resultsView/tableComponents/Demographics";
 import DiagnosticReportTable from "./resultsView/tableComponents/DiagnosticReportTable";
diff --git a/query-connector/src/app/query/components/SearchForm.tsx b/query-connector/src/app/query/components/SearchForm.tsx
index a4fc9d63..337e0bfa 100644
--- a/query-connector/src/app/query/components/SearchForm.tsx
+++ b/query-connector/src/app/query/components/SearchForm.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/app/constants";
 import { UseCaseQueryResponse, UseCaseQuery } from "@/app/query-service";
 import { fhirServers } from "@/app/fhir-servers";
-import styles from "./searchForm.module.scss";
+import styles from "./searchForm/searchForm.module.scss";
 import { FormatPhoneAsDigits } from "@/app/format-service";
 import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
 
diff --git a/query-connector/src/app/query/page.tsx b/query-connector/src/app/query/page.tsx
index d35a9067..826369e9 100644
--- a/query-connector/src/app/query/page.tsx
+++ b/query-connector/src/app/query/page.tsx
@@ -41,85 +41,77 @@ const Query: React.FC = () => {
     useState<UseCaseQueryResponse>({});
 
   const [showCustomizeQuery, setShowCustomizeQuery] = useState(false);
+
+  const modeToCssContainerMap: { [mode in Mode]: string } = {
+    search: "main-container",
+    "patient-results": "main-container__wide",
+    "select-query": showCustomizeQuery
+      ? "main-container__wide"
+      : "main-container",
+    results: "main-container__wide",
+  };
   return (
     <>
       <SiteAlert page={mode} />
-      {Object.keys(CUSTOMIZE_QUERY_STEPS).includes(mode) && (
-        <StepIndicator headingLevel="h4" curStep={mode} />
-      )}
-      <div className="main-container">
+      <div className={modeToCssContainerMap[mode]}>
+        {Object.keys(CUSTOMIZE_QUERY_STEPS).includes(mode) && (
+          <StepIndicator headingLevel="h4" curStep={mode} />
+        )}
         {/* Step 1 */}
         {mode === "search" && (
-          <div className="main-container">
-            <SearchForm
-              useCase={useCase}
-              setUseCase={setUseCase}
-              setMode={setMode}
-              setLoading={setLoading}
-              setPatientDiscoveryQueryResponse={
-                setPatientDiscoveryQueryResponse
-              }
-              fhirServer={fhirServer}
-              setFhirServer={setFhirServer}
-            />
-          </div>
+          <SearchForm
+            useCase={useCase}
+            setUseCase={setUseCase}
+            setMode={setMode}
+            setLoading={setLoading}
+            setPatientDiscoveryQueryResponse={setPatientDiscoveryQueryResponse}
+            fhirServer={fhirServer}
+            setFhirServer={setFhirServer}
+          />
         )}
 
         {/* Step 2 */}
         {mode === "patient-results" && (
-          <div className="main-container__wide">
-            <PatientSearchResults
-              patients={patientDiscoveryQueryResponse?.Patient ?? []}
-              goBack={() => setMode("search")}
-              setMode={setMode}
-              setPatientForQueryResponse={setPatientForQueryResponse}
-            />
-          </div>
+          <PatientSearchResults
+            patients={patientDiscoveryQueryResponse?.Patient ?? []}
+            goBack={() => setMode("search")}
+            setMode={setMode}
+            setPatientForQueryResponse={setPatientForQueryResponse}
+          />
         )}
 
         {/* Step 3 */}
         {mode === "select-query" && (
-          <div
-            className={
-              showCustomizeQuery ? "main-container__wide" : "main-container"
-            }
-          >
-            <SelectQuery
-              goBack={() => setMode("patient-results")}
-              goForward={() => setMode("results")}
-              selectedQuery={useCase}
-              setSelectedQuery={setUseCase}
-              patientForQuery={patientForQuery}
-              resultsQueryResponse={resultsQueryResponse}
-              showCustomizeQuery={showCustomizeQuery}
-              setResultsQueryResponse={setResultsQueryResponse}
-              setShowCustomizeQuery={setShowCustomizeQuery}
-              fhirServer={fhirServer}
-              setFhirServer={setFhirServer}
-              setLoading={setLoading}
-            />
-          </div>
+          <SelectQuery
+            goBack={() => setMode("patient-results")}
+            goForward={() => setMode("results")}
+            selectedQuery={useCase}
+            setSelectedQuery={setUseCase}
+            patientForQuery={patientForQuery}
+            resultsQueryResponse={resultsQueryResponse}
+            showCustomizeQuery={showCustomizeQuery}
+            setResultsQueryResponse={setResultsQueryResponse}
+            setShowCustomizeQuery={setShowCustomizeQuery}
+            fhirServer={fhirServer}
+            setFhirServer={setFhirServer}
+            setLoading={setLoading}
+          />
         )}
 
         {/* Step 4 */}
-        {mode === "results" && (
-          <div className="main-container__wide">
-            {resultsQueryResponse && (
-              <ResultsView
-                selectedQuery={useCase}
-                useCaseQueryResponse={resultsQueryResponse}
-                goBack={() => {
-                  setMode("select-query");
-                }}
-                goToBeginning={() => {
-                  setMode("search");
-                }}
-              />
-            )}
-          </div>
+        {mode === "results" && resultsQueryResponse && (
+          <ResultsView
+            selectedQuery={useCase}
+            useCaseQueryResponse={resultsQueryResponse}
+            goBack={() => {
+              setMode("select-query");
+            }}
+            goToBeginning={() => {
+              setMode("search");
+            }}
+          />
         )}
         {loading && <LoadingView loading={loading} />}
-
         <ToastContainer icon={false} />
       </div>
     </>
diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss
index 4ca208fc..32387142 100644
--- a/query-connector/src/styles/custom-styles.scss
+++ b/query-connector/src/styles/custom-styles.scss
@@ -435,26 +435,39 @@ hr.custom-hr {
 
 .custom-query-step-indicator .usa-step-indicator__header {
   display: none !important;
- }
+}
 .customize-accordion .usa-accordion__button[aria-expanded="true"],
 .customize-accordion .usa-accordion__button[aria-expanded="false"] {
   background-size: 16px 10px;
   background-position: top 24px right 20px;
 }
 
-  .customize-accordion .usa-accordion__button[aria-expanded="true"] {
-    background-image: url("./assets/expandUp.svg");
-  }
+.customize-accordion .usa-accordion__button[aria-expanded="true"] {
+  background-image: url("./assets/expandUp.svg");
+}
 
-  .customize-accordion .usa-accordion__button[aria-expanded="false"] {
-    background-image: url("./assets/expandDown.svg");
-  }
+.customize-accordion .usa-accordion__button[aria-expanded="false"] {
+  background-image: url("./assets/expandDown.svg");
+}
 
-  .customize-accordion .usa-accordion__content {
-    padding: 0rem;
-  }
+.customize-accordion .usa-accordion__content {
+  padding: 0rem;
+}
+
+.resultsViewSideNav .usa-sidenav,
+.resultsViewSideNav .usa-sidenav__item {
+  border: none !important;
+}
+
+.tableRowWithHover:hover td {
+  background-color: $background-hover-color;
+}
+
+.tableRowWithHover_clickable,
+.tableRowWithHover_clickable td {
+  cursor: pointer;
+}
 
-<<<<<<< HEAD
 // Overrides
 .margin-top-0-important {
   margin-top: 0 !important;
@@ -484,27 +497,3 @@ hr.custom-hr {
 .padding-0-important {
   padding: 0 !important;
 }
-
-.resultsViewSideNav .usa-sidenav,
-.resultsViewSideNav .usa-sidenav__item {
-  border: none !important;
-}
-=======
-  .no-margin-top-important {
-    margin-top: 0 !important;
-  }
-
-  .resultsViewSideNav .usa-sidenav,
-  .resultsViewSideNav .usa-sidenav__item {
-    border: none !important;
-  }
->>>>>>> main
-
-  .tableRowWithHover:hover td {
-    background-color: $background-hover-color;
-  }
-
-  .tableRowWithHover_clickable,
-  .tableRowWithHover_clickable td {
-    cursor: pointer;
-  }