Merge 1a1b935 into 25afc4d

spotlight-client/src/App.test.tsx

@@ -120,6 +120,20 @@ describe("navigation", () => {
     return verifyWithNavigation({ targetPath, lookupArgs });
   });
 
+  test("single narrative page", () => {
+    expect.hasAssertions();
+    const targetPath = "/us-nd/narratives/prison";
+    const lookupArgs = [
+      "heading",
+      {
+        name: testContent.systemNarratives.Prison?.title,
+        level: 1,
+      },
+    ] as const;
+
+    return verifyWithNavigation({ targetPath, lookupArgs });
+  });
+
   test("nav bar", async () => {
     const dataPortalLabel = "Explore";
     const narrativesLabel = "Collections";

spotlight-client/src/App.tsx

@@ -23,7 +23,8 @@ import GlobalStyles from "./GlobalStyles";
 import PageExplore from "./PageExplore";
 import PageHome from "./PageHome";
 import PageMetric from "./PageMetric";
-import PageNarrativeHome from "./PageNarrativeHome";
+import PageNarrative from "./PageNarrative";
+import PageNarrativeList from "./PageNarrativeList";
 import PageNotFound from "./PageNotFound";
 import PageTenant from "./PageTenant";
 import { DataPortalSlug, NarrativesSlug } from "./routerUtils/types";
@@ -59,7 +60,8 @@ const App: React.FC = () => {
                   <PageNotFound default />
                 </PassThroughPage>
                 <PassThroughPage path={`/${NarrativesSlug}`}>
-                  <PageNarrativeHome path="/" />
+                  <PageNarrativeList path="/" />
+                  <PageNarrative path="/:narrativeTypeId" />
                 </PassThroughPage>
                 <PageNotFound default />
               </PassThroughPage>

spotlight-client/src/PageNarrative/PageNarrative.tsx

@@ -0,0 +1,50 @@
+// Recidiviz - a data platform for criminal justice reform
+// Copyright (C) 2020 Recidiviz, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+// =============================================================================
+
+import { RouteComponentProps } from "@reach/router";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { SystemNarrativeTypeId } from "../contentApi/types";
+import { useDataStore } from "../StoreProvider";
+import withRouteSync from "../withRouteSync";
+
+type PageNarrativeProps = RouteComponentProps & {
+  narrativeTypeId?: SystemNarrativeTypeId;
+};
+
+const PageNarrative: React.FC<PageNarrativeProps> = ({ narrativeTypeId }) => {
+  const tenant = useDataStore().tenantStore.currentTenant;
+
+  // if this component is used properly as a route component,
+  // this should never be true;
+  // if it is, something has gone very wrong
+  if (!narrativeTypeId) {
+    throw new Error("missing narrativeTypeId");
+  }
+
+  // tenant may be briefly undefined on initial page load
+  const narrative = tenant?.systemNarratives[narrativeTypeId];
+
+  return (
+    <article>
+      <h1>{narrative?.title}</h1>
+      <p>{narrative?.introduction}</p>
+    </article>
+  );
+};
+
+export default withRouteSync(observer(PageNarrative));

spotlight-client/src/PageNarrativeHome/index.ts → spotlight-client/src/PageNarrative/index.ts

@@ -15,4 +15,4 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-export { default } from "./PageNarrativeHome";
+export { default } from "./PageNarrative";

spotlight-client/src/PageNarrativeList/PageNarrativeList.tsx

@@ -0,0 +1,62 @@
+// Recidiviz - a data platform for criminal justice reform
+// Copyright (C) 2020 Recidiviz, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+// =============================================================================
+
+import { Link, RouteComponentProps } from "@reach/router";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { SystemNarrativeTypeIdList } from "../contentApi/types";
+import getUrlForResource from "../routerUtils/getUrlForResource";
+import { useDataStore } from "../StoreProvider";
+import withRouteSync from "../withRouteSync";
+
+const PageNarrativeList: React.FC<RouteComponentProps> = () => {
+  const tenant = useDataStore().tenantStore.currentTenant;
+
+  const systemNarratives = tenant?.systemNarratives;
+
+  return (
+    <article>
+      <h1>Collections</h1>
+      {tenant && systemNarratives && Object.keys(systemNarratives).length > 0 && (
+        <section>
+          <h2>system overview</h2>
+          <ul>
+            {SystemNarrativeTypeIdList.map((id) => {
+              const narrative = systemNarratives[id];
+              return (
+                narrative && (
+                  <li key={id}>
+                    <Link
+                      to={getUrlForResource({
+                        page: "narrative",
+                        params: { tenantId: tenant.id, narrativeTypeId: id },
+                      })}
+                    >
+                      {narrative.title}
+                    </Link>
+                  </li>
+                )
+              );
+            })}
+          </ul>
+        </section>
+      )}
+    </article>
+  );
+};
+
+export default withRouteSync(observer(PageNarrativeList));

spotlight-client/src/PageNarrativeHome/PageNarrativeHome.tsx → spotlight-client/src/PageNarrativeList/index.ts

@@ -15,14 +15,4 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { RouteComponentProps } from "@reach/router";
-import React from "react";
-import withRouteSync from "../withRouteSync";
-
-const PageNarrativeHome: React.FC<RouteComponentProps> = () => (
-  <article>
-    <h1>Collections</h1>
-  </article>
-);
-
-export default withRouteSync(PageNarrativeHome);
+export { default } from "./PageNarrativeList";

spotlight-client/src/SiteNavigation/SiteNavigation.tsx

@@ -122,7 +122,7 @@ const SiteNavigation: React.FC = () => {
             <Link
               getProps={getNavLinkProps({ matchPartial: true })}
               to={getUrlForResource({
-                page: "narratives",
+                page: "narrative list",
                 params: { tenantId: tenant.id },
               })}
             >