edoparearyee · edoparearyee · Feb 19, 2019
diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
     "coverage": "coveralls < coverage/lcov.info"
   },
   "dependencies": {
+    "@material-ui/core": "^3.9.2",
+    "@material-ui/icons": "^3.0.2",
     "classnames": "^2.2.6",
     "cross-fetch": "^3.0.0",
     "normalize.css": "^8.0.1",

diff --git a/public/index.html b/public/index.html
@@ -5,36 +5,14 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <title>React Notes</title>
   </head>
   <body>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/app/App.js b/src/app/App.js
@@ -1,38 +1,25 @@
 import React, { Component } from 'react';
-import { Route, NavLink, Switch } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import './App.scss';
 import TodosView from './components/TodosView/TodosView';
 import NotFoundView from './components/NotFoundView/NotFoundView';
 import AboutViewContainer from './containers/AboutView/AboutView';
+import HeaderContainer from './containers/Header/Header';
+import SidebarContainer from './containers/Sidebar/Sidebar';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <nav>
-          <ul className="App__Nav">
-            <li className="App__NavItem">
-              <NavLink
-                to="/"
-                exact={true}
-                activeClassName="App__NavItem--Active"
-              >
-                Home
-              </NavLink>
-            </li>
-            <li className="App__NavItem">
-              <NavLink to="/about" activeClassName="App__NavItem--Active">
-                About
-              </NavLink>
-            </li>
-          </ul>
-        </nav>
-        <Switch>
-          <Route exact path="/" component={TodosView} />
-          <Route path="/about" component={AboutViewContainer} />
-          <Route component={NotFoundView} />
-        </Switch>
+        <HeaderContainer />
+        <SidebarContainer>
+          <Switch>
+            <Route exact path="/" component={TodosView} />
+            <Route path="/about" component={AboutViewContainer} />
+            <Route component={NotFoundView} />
+          </Switch>
+        </SidebarContainer>
       </div>
     );
   }

diff --git a/src/app/App.scss b/src/app/App.scss
@@ -1,15 +1,5 @@
 @import "../scss/variables";
 
-.App__Nav {
-  display: flex;
-}
-
-.App__NavItem:not(:last-child) {
-  display: inline-flex;
-  padding-right: 5px;
-}
-
-.App__NavItem--Active {
-  color: #000;
-  text-decoration: none;
+.App {
+  padding-top: 64px;
 }
diff --git a/src/app/__snapshots__/App.test.js.snap b/src/app/__snapshots__/App.test.js.snap
@@ -4,48 +4,22 @@ exports[`App renders component 1`] = `
 <div
   className="App"
 >
-  <nav>
-    <ul
-      className="App__Nav"
-    >
-      <li
-        className="App__NavItem"
-      >
-        <NavLink
-          activeClassName="App__NavItem--Active"
-          aria-current="page"
-          exact={true}
-          to="/"
-        >
-          Home
-        </NavLink>
-      </li>
-      <li
-        className="App__NavItem"
-      >
-        <NavLink
-          activeClassName="App__NavItem--Active"
-          aria-current="page"
-          to="/about"
-        >
-          About
-        </NavLink>
-      </li>
-    </ul>
-  </nav>
-  <Switch>
-    <Route
-      component={[Function]}
-      exact={true}
-      path="/"
-    />
-    <Route
-      component={[Function]}
-      path="/about"
-    />
-    <Route
-      component={[Function]}
-    />
-  </Switch>
+  <Connect(WithStyles(Header)) />
+  <Connect(WithStyles(withRouter(Sidebar)))>
+    <Switch>
+      <Route
+        component={[Function]}
+        exact={true}
+        path="/"
+      />
+      <Route
+        component={[Function]}
+        path="/about"
+      />
+      <Route
+        component={[Function]}
+      />
+    </Switch>
+  </Connect(WithStyles(withRouter(Sidebar)))>
 </div>
 `;
diff --git a/src/app/actions/ui.js b/src/app/actions/ui.js
@@ -0,0 +1,10 @@
+export const SIDEBAR_MOBILE_OPEN = '[UI] Sidebar Mobile Open';
+export const SIDEBAR_MOBILE_CLOSE = '[UI] Sidebar Mobile Close';
+
+export function sidebarOpen() {
+  return { type: SIDEBAR_MOBILE_OPEN };
+}
+
+export function sidebarClose() {
+  return { type: SIDEBAR_MOBILE_CLOSE };
+}
diff --git a/src/app/components/AboutView/AboutView.js b/src/app/components/AboutView/AboutView.js
@@ -1,5 +1,10 @@
 import React, { Component } from 'react';
 import { PropTypes } from 'prop-types';
+import Typography from '@material-ui/core/Typography';
+import Card from '@material-ui/core/Card';
+import Avatar from '@material-ui/core/Avatar';
+import CardHeader from '@material-ui/core/CardHeader';
+import CircularProgress from '@material-ui/core/CircularProgress';
 
 import './AboutView.scss';
 
@@ -13,24 +18,29 @@ class AboutView extends Component {
   }
 
   render() {
-    const { error, loading, items } = this.props;
+    let { error, loading, items } = this.props;
     let contributors;
 
     if (error) {
-      contributors = <p className="ErrorMessage">Error! {error.message}</p>;
+      contributors = (
+        <Typography variant="body2" gutterBottom color="error">
+          Error! {error.message}
+        </Typography>
+      );
     } else if (loading) {
-      contributors = <p className="LoadingMessage">Loading…</p>;
+      contributors = <CircularProgress />;
     } else {
       contributors = (
         <ul className="ContributorList">
           {items.map(item => (
             <li key={item.id} className="ContributorList__Item">
-              <img
-                className="ContributorList__Image"
-                src={item.avatar_url}
-                alt={item.login}
-              />
-              <p className="Contributor__Name">{item.login}</p>
+              <Card>
+                <CardHeader
+                  avatar={<Avatar aria-label="Recipe" src={item.avatar_url} />}
+                  title={item.login}
+                  subheader={item.contributions}
+                />
+              </Card>
             </li>
           ))}
         </ul>
@@ -39,14 +49,18 @@ class AboutView extends Component {
 
     return (
       <div className="AboutView">
-        <h1>About</h1>
-        <p>
+        <Typography component="h1" variant="h4" gutterBottom>
+          About
+        </Typography>
+        <Typography variant="body1" gutterBottom>
           Officia cillum ea incididunt laborum velit. Deserunt voluptate
           exercitation deserunt ex occaecat fugiat enim incididunt sit est.
           Exercitation laborum ex fugiat in amet laboris reprehenderit velit
           tempor dolore nostrud do.
-        </p>
-        <h2>Contributors</h2>
+        </Typography>
+        <Typography component="h2" variant="h5" gutterBottom>
+          Contributors
+        </Typography>
         {contributors}
       </div>
     );
@@ -75,7 +89,7 @@ AboutView.propTypes = {
       received_events_url: PropTypes.string,
       type: PropTypes.string,
       site_admin: PropTypes.bool,
-      contributors: PropTypes.number,
+      contributions: PropTypes.number,
     }),
   ).isRequired,
   error: PropTypes.object,

diff --git a/src/app/components/AboutView/AboutView.scss b/src/app/components/AboutView/AboutView.scss
@@ -1,14 +1,3 @@
 .AboutView {
   display: block;
 }
-
-.ContributorList__Item {
-  align-items: center;
-  display: flex;
-}
-
-.ContributorList__Image {
-  height: 40px;
-  margin-right: 5px;
-  width: 40px;
-}