From cdcc991255b5b8704a1a8c073b2bdcf042792597 Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Fri, 17 Jul 2020 13:25:19 -0400
Subject: [PATCH] [CORL-1195] Fix bug with displaying site dashboards (#3031)

* fix bug where dashboard would not display data for sites beyond first page of results

* remove unused param

* remove unused file

* undo rename

* rename selectedSite to site

* check that sites.edges.length is greater than 0

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../routes/Dashboard/DashboardContainer.tsx   | 20 ++++++++++--------
 .../admin/routes/Dashboard/DashboardRoute.tsx | 21 +++++++++++++++++--
 .../routes/Dashboard/SiteDashboardRoute.tsx   |  9 ++------
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/core/client/admin/routes/Dashboard/DashboardContainer.tsx b/src/core/client/admin/routes/Dashboard/DashboardContainer.tsx
index 437ad13c2b..5dcbb56257 100644
--- a/src/core/client/admin/routes/Dashboard/DashboardContainer.tsx
+++ b/src/core/client/admin/routes/Dashboard/DashboardContainer.tsx
@@ -27,22 +27,24 @@ import DashboardSiteSelector from "./DashboardSiteSelector";
 
 import styles from "./DashboardContainer.css";
 
+interface Site {
+  name: string;
+  id: string;
+}
+
 interface Props {
   query: QueryData | null;
   relay: RelayPaginationProp;
-  selectedSiteID?: string;
+  site?: Site | null;
 }
 const DashboardContainer: React.FunctionComponent<Props> = (props) => {
+  if (!props.site) {
+    return null;
+  }
   const sites = props.query
     ? props.query.sites.edges.map((edge) => edge.node)
     : [];
-  const selectedSite = props.selectedSiteID
-    ? sites.find((s) => s.id === props.selectedSiteID)
-    : sites[0];
 
-  if (!selectedSite) {
-    return null;
-  }
   const [lastUpdated, setLastUpdated] = useState<string>(new Date().toString());
   const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
   const [, isRefetching] = useRefetch<
@@ -76,7 +78,7 @@ const DashboardContainer: React.FunctionComponent<Props> = (props) => {
         {({ toggleVisibility, ref, visible }) => (
           <BaseButton onClick={toggleVisibility} ref={ref}>
             <Flex>
-              <h2 className={styles.header}>{selectedSite.name}</h2>
+              <h2 className={styles.header}>{props.site && props.site.name}</h2>
               {
                 <ButtonIcon className={styles.icon} size="lg">
                   {visible ? "arrow_drop_up" : "arrow_drop_down"}
@@ -93,7 +95,7 @@ const DashboardContainer: React.FunctionComponent<Props> = (props) => {
           Refresh
         </Button>
       </Flex>
-      <Dashboard siteID={selectedSite.id} lastUpdated={lastUpdated} />
+      <Dashboard siteID={props.site.id} lastUpdated={lastUpdated} />
     </MainLayout>
   );
 };
diff --git a/src/core/client/admin/routes/Dashboard/DashboardRoute.tsx b/src/core/client/admin/routes/Dashboard/DashboardRoute.tsx
index 9fc275ee84..260c0c478e 100644
--- a/src/core/client/admin/routes/Dashboard/DashboardRoute.tsx
+++ b/src/core/client/admin/routes/Dashboard/DashboardRoute.tsx
@@ -5,7 +5,7 @@ import { withRouteConfig } from "coral-framework/lib/router";
 
 import { DashboardRouteQueryResponse } from "coral-admin/__generated__/DashboardRouteQuery.graphql";
 
-import DashboardSiteSelectorContainer from "./DashboardContainer";
+import DashboardContainer from "./DashboardContainer";
 
 interface Props {
   data: DashboardRouteQueryResponse | null;
@@ -15,12 +15,29 @@ const DashboardRoute: React.FunctionComponent<Props> = ({ data }) => {
     return null;
   }
 
-  return <DashboardSiteSelectorContainer query={data} />;
+  return (
+    <DashboardContainer
+      query={data}
+      site={
+        data.firstSite.edges && data.firstSite.edges.length > 0
+          ? data.firstSite.edges[0].node
+          : null
+      }
+    />
+  );
 };
 
 const enhanced = withRouteConfig<Props>({
   query: graphql`
     query DashboardRouteQuery {
+      firstSite: sites(first: 1) {
+        edges {
+          node {
+            id
+            name
+          }
+        }
+      }
       ...DashboardContainer_query
     }
   `,
diff --git a/src/core/client/admin/routes/Dashboard/SiteDashboardRoute.tsx b/src/core/client/admin/routes/Dashboard/SiteDashboardRoute.tsx
index 6cd1b227d2..3cd2582b0d 100644
--- a/src/core/client/admin/routes/Dashboard/SiteDashboardRoute.tsx
+++ b/src/core/client/admin/routes/Dashboard/SiteDashboardRoute.tsx
@@ -6,7 +6,7 @@ import { withRouteConfig } from "coral-framework/lib/router";
 
 import { SiteDashboardRouteQueryResponse } from "coral-admin/__generated__/SiteDashboardRouteQuery.graphql";
 
-import DashboardSiteSelectorContainer from "./DashboardContainer";
+import DashboardContainer from "./DashboardContainer";
 
 interface RouteParams {
   siteID: string;
@@ -20,12 +20,7 @@ interface Props {
 const SiteDashboardRoute: React.FunctionComponent<Props> = (props) => {
   const { data } = props;
   if (data && data.site) {
-    return (
-      <DashboardSiteSelectorContainer
-        query={data}
-        selectedSiteID={props.match.params.siteID}
-      />
-    );
+    return <DashboardContainer query={data} site={data.site} />;
   }
   return null;
 };