Add _Patterns_ page

zoltantothcom · zoltantothcom · commit 500a6cd9767f · 2019-03-01T11:40:18.000-05:00
diff --git a/src/Layout.jsx b/src/Layout.jsx
@@ -12,6 +12,7 @@ import { themeLight } from './styles/themes/theme.light';
 import { themeDark } from './styles/themes/theme.dark';
 import Game from './pages/Game';
 import About from './pages/About';
+import Patterns from './pages/Patterns';
 import { getMode } from './selectors';
 
 const Layout = props => {
@@ -32,6 +33,7 @@ const Layout = props => {
         <Header />
 
         <Route exact path="/" render={() => <Game style={style} />} />
+        <Route path="/patterns/:pattern" component={Patterns} />
         <Route path="/about" component={About} />
       </React.Fragment>
     </ThemeProvider>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -46,6 +46,7 @@ const Header = () => (
   <StyledHeader>
     <StyledLinkContainer>
       <StyledRouterLink to="/">Game</StyledRouterLink>
+      <StyledRouterLink to="/patterns/memento">Patterns</StyledRouterLink>
       <StyledRouterLink to="/about">About</StyledRouterLink>
       <StyledLink href="//github.com/zoltantothcom/javascript-patterns" target="_blank">
         GitHub
diff --git a/src/pages/Patterns.jsx b/src/pages/Patterns.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const StyledPatterns = styled.div``;
+
+const Header = styled.h3`
+  color: ${props => props.theme.buttonColorHover};
+  margin-top: 2rem;
+`;
+
+// const Patterns = ({ match }) => {
+//   const { pattern } = match.params;
+
+const Patterns = props => {
+  console.log(props);
+
+  props.history.listen(location => {
+    console.log(location);
+  });
+
+  const { pattern } = props.match.params;
+
+  return (
+    <StyledPatterns>
+      <Header>{pattern}</Header>
+    </StyledPatterns>
+  );
+};
+
+Patterns.propTypes = {
+  history: PropTypes.object.isRequired,
+  match: PropTypes.object.isRequired
+};
+
+export default Patterns;
