Merge pull request #1 from Danjavia/develop

v1.0

package.json

@@ -9,13 +9,15 @@
     "apollo-client": "^0.8.7",
     "enzyme": "^2.7.1",
     "graphql-tag": "^1.2.4",
+    "material-ui": "^0.17.0",
     "node-sass": "^4.5.0",
     "npm-run-all": "^4.0.1",
     "pouchdb-browser": "^6.1.2",
     "react": "^15.4.1",
     "react-apollo": "^0.11.1",
     "react-dom": "^15.4.1",
     "react-router": "^3.0.2",
+    "react-tap-event-plugin": "^2.0.1",
     "react-test-renderer": "^15.4.2"
   },
   "scripts": {

src/index.js

@@ -6,13 +6,16 @@ import ReactDOM from 'react-dom';
 import { Router, hashHistory } from 'react-router';
 import ApolloClient, { createNetworkInterface } from 'apollo-client';
 import { ApolloProvider } from 'react-apollo';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 
 /**
  * Internal Resources
  **/
 import { GRAPHQL_ENDPOINT } from './config/env';
 import Routes from './routes/routes';
 
+import './index.css';
+
 /**
  * `client`: Set apollo client connection
  **/
@@ -25,7 +28,9 @@ const client = new ApolloClient({
  **/
 ReactDOM.render(
   <ApolloProvider client={client}>
-    <Router history={hashHistory} routes={Routes} />
+    <MuiThemeProvider>
+      <Router history={hashHistory} routes={Routes} />
+    </MuiThemeProvider>
   </ApolloProvider>,
   document.getElementById('root')
 );

src/index.scss

@@ -0,0 +1,2 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
+@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

src/pages/HomePage/HomePage.js

@@ -0,0 +1,62 @@
+/**
+ * External Resources
+ **/
+import React, { Component } from 'react';
+import RaisedButton from 'material-ui/RaisedButton';
+import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+/**
+ * Internal Resources
+ **/
+import './HomePage.css';
+
+/**
+ * Sample class definition
+ **/
+class HomePage extends Component {
+  /**
+   * childContextTypes
+   * @property {object} muiTheme MUI integration with component
+   * */
+  static childContextTypes = {
+    muiTheme: React.PropTypes.object
+  };
+
+  /**
+   * getChildContext
+   * @return {object} muiTheme MUI theme integration
+   * */
+  getChildContext() {
+    return { muiTheme: getMuiTheme(baseTheme) };
+  }
+
+  /**
+   * render
+   * @return {ReactElement} markup
+   * */
+  render() {
+    return (
+      <div className="home-page">
+        <h1>React-Apollo-MUI PWA</h1>
+        <h2>Starter Pack</h2>
+        <div>
+          <RaisedButton
+              label="View Repo"
+              href="https://github.com/Danjavia/PWA-ReactJS-Starter-Pack"
+              target="_blank"
+              secondary={true}
+              icon={<i className="fa fa-github"></i>}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+/**
+ * Export class
+ **/
+export default HomePage;

src/pages/HomePage/HomePage.scss

@@ -0,0 +1,31 @@
+.home-page {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100vh;
+  margin: auto;
+
+  h1 {
+    font-size: 35px;
+    font-weight: 100;
+    font-family: 'Roboto', sans-serif;
+  }
+
+  h2 {
+    font-size: 20px;
+    font-weight: 100;
+    font-family: 'Roboto', sans-serif;
+  }
+
+  > div {
+    margin-top: 30px;
+
+    i {
+      position: relative;
+      top: -2px;
+      font-size: 20px;
+      color: white;
+    }
+  }
+}

src/routes/routes.js

@@ -8,15 +8,15 @@ import { IndexRoute, Route } from 'react-router';
  * Internal Resources
  **/
 import App from '../components/App/App';
-import Sample from '../pages/Sample/Sample';
+import HomePage from '../pages/HomePage/HomePage';
 import NotFound from '../pages/NotFound/NotFound';
 
 /**
  * Router class definition.
  **/
 export default (
   <Route path="/" component={App}>
-    <IndexRoute component={Sample} />
+    <IndexRoute component={HomePage} />
     <Route path="*" component={NotFound} />
   </Route>
 );