feat(title): set page title based on route config

package.json

@@ -17,22 +17,22 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@types/enzyme": "^3.9.0",
+    "@types/enzyme": "^3.10.2",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.9",
-    "@types/node": "^12.0.4",
-    "@types/react": "^16.8.6",
+    "@types/node": "^12.6.2",
+    "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.2",
     "@types/react-router-dom": "^4.3.4",
     "@types/victory": "^31.0.14",
-    "@types/webpack": "^4.4.34",
-    "css-loader": "^2.1.1",
+    "@types/webpack": "^4.4.35",
+    "css-loader": "^3.0.0",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "enzyme-to-json": "^3.3.5",
     "file-loader": "^4.0.0",
     "html-webpack-plugin": "^3.2.0",
-    "imagemin": "^6.0.0",
+    "imagemin": "^7.0.0",
     "jest": "^24.1.0",
     "mini-css-extract-plugin": "^0.7.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
@@ -45,25 +45,26 @@
     "regenerator-runtime": "^0.13.1",
     "rimraf": "^2.6.2",
     "style-loader": "^0.23.1",
-    "svg-url-loader": "^2.3.2",
+    "svg-url-loader": "^3.0.0",
     "ts-jest": "^24.0.0",
     "ts-loader": "^6.0.2",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "tslint": "^5.13.1",
     "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
     "tslint-react": "^4.0.0",
-    "typescript": "^3.3.3333",
+    "typescript": "^3.5.3",
     "url-loader": "^2.0.0",
-    "webpack": "^4.35.2",
+    "webpack": "^4.35.3",
     "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^3.3.5",
+    "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.7.2",
     "webpack-merge": "^4.1.4"
   },
   "dependencies": {
     "@patternfly/react-core": "^3.58.1",
-    "@patternfly/react-icons": "^3.10.9",
+    "@patternfly/react-icons": "^3.10.10",
+    "react-document-title": "^2.0.3",
     "react-router-dom": "^5.0.1"
   }
 }

src/app/AppLayout/AppLayout.tsx

@@ -12,6 +12,7 @@ import {
   PageSidebar,
   SkipToContent
 } from '@patternfly/react-core';
+import { routes } from '@app/routes';
 import '@app/app.css';
 
 interface IAppLayout {
@@ -49,28 +50,13 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
   const Navigation = (
     <Nav id="nav-primary-simple">
       <NavList id="nav-list-simple" variant={NavVariants.simple}>
-        <NavItem
-          id="dashboard-link"
-          itemId={'dashboard'}>
-          <NavLink
-            to="/dashboard"
-            activeClassName="pf-m-current">Dashboard</NavLink>
-        </NavItem>
-        <NavItem
-          id="support-link"
-          itemId={'support'}>
-          <NavLink
-            to="/support"
-            activeClassName="pf-m-current">Support</NavLink>
-        </NavItem>
-        <NavItemSeparator />
-        <NavItem
-          id="404-link"
-          itemId={'404'}>
-          <NavLink
-            to="/asdf"
-            activeClassName="pf-m-current">Bad Route</NavLink>
-        </NavItem>
+        {routes.map((route, idx) => {
+          return (
+            <NavItem key={`${route.label}-${idx}`} id={`${route.label}-${idx}`}>
+              <NavLink to={route.path} activeClassName="pf-m-current">{route.label}</NavLink>
+            </NavItem>
+          );
+        })}
       </NavList>
     </Nav>
   );

src/app/Dashboard/Dashboard.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PageSection, Title } from '@patternfly/react-core';
 
-const Dashboard: React.FunctionComponent = () => {
+const Dashboard: React.FunctionComponent<{}> = () => {
   return (
     <PageSection>
       <Title size="lg">Dashboard</Title>

src/app/Support/Support.tsx

@@ -11,7 +11,8 @@ import {
   EmptyStateSecondaryActions
 } from '@patternfly/react-core';
 
-const Support: React.FunctionComponent = () => {
+const Support: React.FunctionComponent<{}> = () => {
+
   return (
     <PageSection>
       <EmptyState variant={EmptyStateVariant.full}>

src/app/__snapshots__/app.test.tsx.snap

@@ -1,9 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`App tests should render default App component 1`] = `
-<BrowserRouter>
-  <AppLayout>
-    <AppRoutes />
-  </AppLayout>
-</BrowserRouter>
+<SideEffect(DocumentTitle)
+  title="Patternfly React Seed | App Title"
+>
+  <BrowserRouter>
+    <AppLayout>
+      <AppRoutes />
+    </AppLayout>
+  </BrowserRouter>
+</SideEffect(DocumentTitle)>
 `;

src/app/index.tsx

@@ -3,15 +3,18 @@ import '@patternfly/react-core/dist/styles/base.css';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { AppLayout } from '@app/AppLayout/AppLayout';
 import { AppRoutes } from '@app/routes';
+import DocumentTitle from 'react-document-title';
 import '@app/app.css';
 
 const App: React.FunctionComponent = () => {
   return (
-    <Router>
-      <AppLayout>
-        <AppRoutes />
-      </AppLayout>
-    </Router>
+    <DocumentTitle title="Patternfly React Seed | App Title">
+      <Router>
+        <AppLayout>
+          <AppRoutes />
+        </AppLayout>
+      </Router>
+    </DocumentTitle>
   );
 }
 

src/app/routes.tsx

@@ -3,10 +3,12 @@ import { Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { DynamicImport } from '@app/DynamicImport';
 import { Dashboard } from '@app/Dashboard/Dashboard';
 import { NotFound } from '@app/NotFound/NotFound';
+import DocumentTitle from 'react-document-title';
 
 const getSupportModuleAsync = () => {
   return () => import(/* webpackChunkName: 'support' */ '@app/Support/Support');
 }
+
 const Support = () => {
   return (
     <DynamicImport load={getSupportModuleAsync()}>
@@ -17,12 +19,30 @@ const Support = () => {
   );
 }
 
+const RouteWithTitleUpdates = ({
+  component: Component,
+  title,
+  ...rest
+}) => {
+  function routeWithTitle(routeProps) {
+    return (
+      <DocumentTitle title={title}>
+        <Component {...routeProps} />
+      </DocumentTitle>
+    )
+  }
+  return (
+    <Route {...rest} render={routeWithTitle} />
+  );
+}
+
 export interface IAppRoute {
   label: string;
   component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
   icon: any;
   exact?: boolean;
   path: string;
+  title: string;
 }
 
 const routes: IAppRoute[] = [
@@ -31,24 +51,31 @@ const routes: IAppRoute[] = [
     exact: true,
     icon: null,
     label: 'Dashboard',
-    path: '/dashboard'
+    path: '/dashboard',
+    title: 'Main Dashboard Title'
   },
   {
     component: Support,
     exact: true,
     icon: null,
     label: 'Support',
-    path: '/support'
+    path: '/support',
+    title: 'Support Page Title'
   }
 ];
 
 const AppRoutes = () => (
   <Switch>
-    {routes.map(({path, exact, component}, idx) => (
-      <Route path={path} exact={exact} component={component} key={idx} />
+    {routes.map(({ path, exact, component, title }, idx) => (
+      <RouteWithTitleUpdates
+        path={path}
+        exact={exact}
+        component={component}
+        key={idx}
+        title={title} />
     ))}
     <Redirect exact={true} from="/" to="/dashboard" />
-    <Route component={NotFound} />
+    <RouteWithTitleUpdates component={NotFound} title={'404 Page Not Found'} />
   </Switch>
 );
 

src/typings.d.ts

@@ -10,3 +10,4 @@ declare module '*.m4a';
 declare module '*.rdf';
 declare module '*.ttl';
 declare module '*.pdf';
+declare module 'react-document-title';