Add routes

README.md

@@ -5,6 +5,7 @@ This is a basic example project using the following technologies to build a web
 - Typescript
 - React
 - Redux
+- React Router
 - Webpack
 
 And for testing:

_redirects

@@ -0,0 +1 @@
+/* /index.html 200

package.json

@@ -26,6 +26,7 @@
     "@types/react": "16.7.18",
     "@types/react-dom": "16.0.11",
     "@types/react-redux": "6.0.11",
+    "@types/react-router-dom": "^4.3.1",
     "@types/redux-mock-store": "1.0.0",
     "@types/styled-components": "4.1.4",
     "coveralls": "3.0.2",
@@ -39,16 +40,18 @@
     "eslint-plugin-jsx-a11y": "6.1.2",
     "eslint-plugin-prettier": "3.0.1",
     "eslint-plugin-react": "7.12.0",
+    "html-loader": "^0.5.5",
     "html-webpack-plugin": "3.2.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",
+    "markdown-loader": "^4.0.0",
     "mini-css-extract-plugin": "0.5.0",
     "prettier": "1.15.3",
     "react-addons-test-utils": "15.6.2",
     "redux-mock-store": "1.5.3",
     "ts-jest": "23.10.5",
     "ts-loader": "5.3.2",
-    "typescript": "3.2.2",
+    "typescript": "next",
     "typescript-eslint-parser": "21.0.2",
     "typescript-plugin-styled-components": "1.0.0",
     "webpack": "4.28.2",
@@ -62,6 +65,7 @@
     "react": "16.7.0",
     "react-dom": "16.7.0",
     "react-redux": "6.0.0",
+    "react-router-dom": "^4.3.1",
     "redux": "4.0.1",
     "redux-thunk": "2.3.0",
     "styled-components": "4.1.3",

src/App.tsx

@@ -1,12 +1,38 @@
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import { Provider } from 'react-redux';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import styled from 'styled-components';
 
-import Counter from './components/Counter';
+import Navigation from './components/Navigation';
+import Spinner from './components/Spinner';
 import store from './store';
 
+const PageWrapper = styled.div`
+  width: 100%;
+  @media screen and (min-width: 800px) {
+    width: 800px;
+  }
+`;
+
+const CounterPage = lazy(() => import('./pages/Counter'));
+const AboutPage = lazy(() => import('./pages/About'));
+const MissingPage = lazy(() => import('./pages/Missing'));
+
 const App = () => (
-  <Provider store={store}>
-    <Counter incrementAmount={1} />
-  </Provider>
+  <Router>
+    <Provider store={store}>
+      <PageWrapper>
+        <Navigation />
+        <Suspense fallback={<Spinner />}>
+          <Switch>
+            <Route path="/" exact component={CounterPage} />
+            <Route path="/by/:by/" component={CounterPage} />
+            <Route path="/about/" component={AboutPage} />
+            <Route component={MissingPage} />
+          </Switch>
+        </Suspense>
+      </PageWrapper>
+    </Provider>
+  </Router>
 );
 export default App;

src/components/Counter.tsx

@@ -34,6 +34,13 @@ const Wrapper = styled.div`
 const Button = styled.button`
   margin-right: 10px;
   font-family: inherit;
+
+  width: 100%;
+  margin-bottom: 5px;
+  @media screen and (min-width: 450px) {
+    width: initial;
+    margin-bottom: 0;
+  }
 `;
 
 const CounterComponent = ({

src/components/Navigation.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  margin-bottom: 10px;
+`;
+
+const LinkWrapper = styled.div`
+  display: inline-block;
+  margin-right: 5px;
+`;
+
+const Navigation = () => (
+  <Wrapper>
+    <LinkWrapper>
+      <Link to="/">Home</Link>
+    </LinkWrapper>
+    <LinkWrapper>
+      <Link to="/about/">About</Link>
+    </LinkWrapper>
+  </Wrapper>
+);
+export default Navigation;

src/components/__tests__/Navigation.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+import { BrowserRouter as Router } from 'react-router-dom';
+import Navigation from '../Navigation';
+
+configure({ adapter: new Adapter() });
+
+describe('Navigation', () => {
+  it('should render navigation', () => {
+    const root = mount(
+      <Router>
+        <Navigation />
+      </Router>,
+    );
+    expect(root.html()).toMatchSnapshot('default render');
+  });
+});

src/components/__tests__/__snapshots__/Counter.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Counter should match the snapshot: default render 1`] = `"<div class=\\"sc-bdVaJa cJwtzi\\"><h1>Count 1</h1><button class=\\"increment sc-bwzfXH kfeCxp\\">Increment by 1</button><button class=\\"decrement sc-bwzfXH kfeCxp\\">Decrement by 1</button><button class=\\"delayed-increment sc-bwzfXH kfeCxp\\">Delayed increment by 1</button></div>"`;
+exports[`Counter should match the snapshot: default render 1`] = `"<div class=\\"sc-bdVaJa cJwtzi\\"><h1>Count 1</h1><button class=\\"increment sc-bwzfXH QqPdO\\">Increment by 1</button><button class=\\"decrement sc-bwzfXH QqPdO\\">Decrement by 1</button><button class=\\"delayed-increment sc-bwzfXH QqPdO\\">Delayed increment by 1</button></div>"`;

src/components/__tests__/__snapshots__/Navigation.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navigation should render navigation: default render 1`] = `"<div class=\\"sc-bdVaJa jWKkjw\\"><div class=\\"sc-bwzfXH kUMrai\\"><a href=\\"/\\">Home</a></div><div class=\\"sc-bwzfXH kUMrai\\"><a href=\\"/about/\\">About</a></div></div>"`;

src/index.css

@@ -1,15 +1,33 @@
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
 body {
   width: 100%;
-  display: flex;
-  justify-content: center;
   background-color: papayawhip;
   font-family: monospace;
+  margin: 0px;
+  padding: 10px;
+}
+
+a,
+a:visited {
+  color: #0000ee;
+}
+
+.root {
+  width: 100%;
+  display: flex;
+  justify-content: center;
 }
 
 .spinner {
-  display: inline-block;
+  display: block;
   width: 64px;
   height: 64px;
+  margin: 0 auto;
 }
 .spinner:after {
   content: ' ';

src/index.tsx

@@ -5,6 +5,7 @@ import './index.css';
 import Spinner from './components/Spinner';
 
 const root = document.createElement('div');
+root.classList.add('root');
 document.body.appendChild(root);
 
 const App = lazy(() => import('./App'));

src/pages/About.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable react/no-danger */
+import React from 'react';
+import styled from 'styled-components';
+
+const readme = require('../../README.md');
+
+const ReadmeContent = styled.div`
+  a {
+    display: none;
+  }
+`;
+
+const AboutPage = () => (
+  <div>
+    <ReadmeContent dangerouslySetInnerHTML={{ __html: readme }} />
+    <p>
+      <a
+        href="https://github.com/drewschrauf/typescript-react-redux"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        View on GitHub
+      </a>
+    </p>
+  </div>
+);
+export default AboutPage;

src/pages/Counter.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { isNaN } from 'lodash';
+
+import Counter from '../components/Counter';
+
+const getIncrementAmount = (by: any) => {
+  const value = parseInt(by, 10);
+  return !isNaN(value) ? value : 1;
+};
+
+const CounterPage = ({ match }: RouteComponentProps) => (
+  <Counter incrementAmount={getIncrementAmount((match.params as any).by)} />
+);
+export default CounterPage;

src/pages/Missing.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+
+const Missing = () => <h1>There&apos;s nothing here</h1>;
+export default Missing;

webpack.config.js

@@ -14,6 +14,7 @@ module.exports = {
     path: path.join(__dirname, 'dist'),
     filename: '[name].[hash].js',
     chunkFilename: '[name].[hash].js',
+    publicPath: '/',
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
@@ -28,6 +29,7 @@ module.exports = {
         },
       },
       { test: /\.css/, loaders: [MiniCssExtractPlugin.loader, 'css-loader'] },
+      { test: /\.md/, loaders: ['html-loader', 'markdown-loader'] },
     ],
   },
   plugins: [
@@ -45,5 +47,6 @@ module.exports = {
   ],
   devServer: {
     disableHostCheck: true,
+    historyApiFallback: true,
   },
 };