Set datasite and dashboard titles as the HTML document title (#2)

package.json

@@ -31,6 +31,7 @@
     "@types/node": "12.12.8",
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
+    "@types/react-helmet": "^6.0.0",
     "@types/react-router-dom": "^5.1.2",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.1",
@@ -39,6 +40,7 @@
     "markdown-to-jsx": "^6.10.3",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-helmet": "^6.0.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
     "react-virtualized-auto-sizer": "^1.0.2",

src/dashboard/Dashboard.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
+import { Helmet } from 'react-helmet';
 
 import DashboardView from './DashboardView';
-import { Dataset, ManifestDashboard } from '../common/interfaces';
+import { Dataset, Manifest, ManifestDashboard } from '../common/interfaces';
 import { MOCK_DATASET } from './MockData';
 import ManifestContext from '../common/state/ManifestContext';
 import DatasetContext from '../common/state/DatasetContext';
@@ -37,6 +38,9 @@ const Dashboard: React.FC = () => {
   if (dataset && dashboard) {
     return (
       <DatasetContext.Provider value={context}>
+        <Helmet>
+          <title>{getDocumentTitle(manifest, dashboard)}</title>
+        </Helmet>
         <DashboardView
           dashboard={dashboard}
         />
@@ -70,6 +74,14 @@ async function fetchDataset(datasetId: string): Promise<Dataset> {
   }
 }
 
+function getDocumentTitle(manifest: Manifest | null, dashboard: ManifestDashboard): string {
+  if (manifest) {
+    return `${dashboard.title} | ${manifest.general.title}`;
+  } else {
+    return `${dashboard.title} | Datasite`;
+  }
+}
+
 // TODO: replace with generic-type-guard library
 function isDataset(json: any): json is Dataset {
   if (

src/home/Home.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
+import { Helmet } from 'react-helmet';
 import { Typography } from '@material-ui/core';
 import Paper from '@material-ui/core/Paper';
 import List from '@material-ui/core/List';
@@ -19,6 +20,9 @@ const Home: React.FC = () => {
     return (
       <Container>
         <Content>
+          <Helmet>
+            <title>{manifest.general.title}</title>
+          </Helmet>
 
           <LayoutContainer>
             <SiteTitle>{manifest.general.title}</SiteTitle>