Replaced Angular with React/Redux as FrontEnd Framework

.gitignore

@@ -2,8 +2,9 @@
 generated/node_modules
 generated/bower_components
 generated/public
+generated/build
 node_modules
 bower_components
 npm-debug.log
 .DS_Store
-coverage/
+coverage/

generated/.babelrc

@@ -1,3 +1,10 @@
 {
-  "presets": ["es2015"]
+  "presets": ["es2015", "react", "stage-1", "stage-2"],
+  "env": {
+    "development": {
+      "presets": [
+        "react-hmre"
+      ]
+    }
+  }
 }

generated/.eslintrc.json

@@ -2,6 +2,10 @@
 {
   "root": true,
   "extends": "fullstack", // from the `eslint-config-fullstack` npm module,
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module"
+  },
   "env": {
     "es6": true,
     "node": false,
@@ -13,7 +17,8 @@
   "rules": {
     "global-require": 0, // 0 = off, 1 = warn (yellow), 2 = error (red)
     "camelcase": 0,
-    "no-debugger": 1
+    "no-debugger": 1,
+    "no-unused-expressions": 1
     // add more rules here to override the fullstack config
   }
 }

generated/browser/api/auth/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+import axios from 'axios';
+import { parseJSON, parseData } from '../../utils';
+
+const BASE_URL = process.env.URL || `http://localhost:${process.env.PORT || 1337}`;
+
+export const fetchSession = () => {
+  return axios.get(`${BASE_URL}/session`).then(parseData);
+}
+
+export const tryLogin = (credentials) => {
+  return axios.post(`${BASE_URL}/login`, credentials);
+}
+
+export const tryLogout = () => {
+  return axios.get(`${BASE_URL}/logout`);
+}
+
+const auth = {
+  fetchSession,
+  tryLogin,
+  tryLogout
+}
+
+export default auth;

generated/browser/api/index.js

@@ -0,0 +1 @@
+export auth from './auth';

generated/browser/api/secretStash/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+import axios from 'axios';
+import { parseData } from '../../utils';
+
+const BASE_URL = process.env.URL || `http://localhost:${process.env.PORT || 1337}`;
+
+export const getStash = () => {
+  return axios.get(`${BASE_URL}/api/members/secret-stash`).then(parseData);
+}
+
+const secretStash = {
+  getStash
+}
+
+export default secretStash;

generated/browser/app.js

@@ -0,0 +1,23 @@
+'use strict';
+
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { Router, browserHistory } from 'react-router';
+import { syncHistoryWithStore } from 'react-router-redux';
+import getRoutes from './config/routes';
+import configureStore from './redux/configureStore';
+
+const store = configureStore(browserHistory);
+const history = syncHistoryWithStore(browserHistory, store);
+
+const component = (
+  <Router history={history} routes={getRoutes(store)} />
+);
+
+render(
+  <Provider store={store} key='provider'>
+    {component}
+  </Provider>,
+  document.getElementById('app')
+);

generated/browser/components/About/About.js

@@ -0,0 +1,30 @@
+'use strict';
+
+import React from 'react';
+import { Row, Col, Carousel } from 'react-bootstrap';
+import FullstackPics from '../../resources/FullstackPics';
+import './_About';
+
+const About = (props) => {
+  return (
+    <section id='about'>
+      <p>
+        This website--the very one at which you currently gaze--was created by a basic scaffolding
+        concocted at Fullstack Academy. Here are some of the people who make it all very real:
+      </p>
+      <Carousel interval={2000} indicators={false}>
+        {
+          FullstackPics.map((pic, i) => {
+            return (
+              <Carousel.Item key={i}>
+                <img height={300} src={pic} />
+              </Carousel.Item>
+            )
+          })
+        }
+      </Carousel>
+    </section>
+  )
+}
+
+export default About;

generated/browser/scss/about/main.scss → generated/browser/components/About/_About.scss

@@ -1,8 +1,6 @@
 #about {
 
-  margin: 0 auto;
-  width: 90%;
-  @include clearfix;
+  text-align: center;
 
   p {
     width: 40%;
@@ -18,21 +16,20 @@
     width: 55%;
     overflow: hidden;
     margin: 0 auto;
+
     .carousel-inner {
       height: 500px !important;
-    }
-    .carousel-control {
-      background: none;
-    }
-    .carousel-indicators {
-      display: none;
-    }
-    img {
-      max-width: 100%;
-      max-height: 500px;
-      display: block;
-      margin: 0 auto;
+
+      img {
+        max-width: 100%;
+        max-height: 500px;
+        display: block;
+        margin: 0 auto;
+      }
     }
   }
 
+  .carousel-control.left, .carousel-control.right {
+    background-image: none;
+  }
 }

generated/browser/components/About/index.js

@@ -0,0 +1 @@
+export default from './About';

generated/browser/components/Docs/Docs.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import React from 'react';
+import './_Docs';
+
+const Docs = (props) => {
+  return (
+    <div id='docs'>
+      <h3>Documentation can be found in <a href="https://github.com/FullstackAcademy/fsg/wiki/Getting-Started">the project's Github wiki</a>.</h3>
+    </div>
+  )
+}
+
+export default Docs;

generated/browser/components/Docs/_Docs.scss

@@ -0,0 +1,5 @@
+#docs {
+
+  text-align: center;
+
+}

generated/browser/components/Docs/index.js

@@ -0,0 +1 @@
+export default from './Docs';

generated/browser/components/Home/Home.js

@@ -0,0 +1,17 @@
+'use strict';
+
+import React from 'react';
+import Logo from '../../shared/Logo';
+import getRandomGreeting from '../../resources/RandomGreetings';
+import './_Home';
+
+const Home = (props) => {
+  return (
+    <div id='home'>
+      <Logo />
+      <h1>{getRandomGreeting()}</h1>
+    </div>
+  )
+}
+
+export default Home;

generated/browser/components/Home/_Home.scss

@@ -0,0 +1,9 @@
+#home {
+
+  text-align: center;
+
+  .logo {
+    width: 150px;
+    margin: 0 auto;
+  }
+}

generated/browser/components/Home/index.js

@@ -0,0 +1 @@
+export default from './Home';

generated/browser/components/MembersOnly/MembersOnly.js

@@ -0,0 +1,39 @@
+'use strict';
+
+import React, { Component } from 'react';
+import { getStash } from '../../api/secretStash';
+import './_MembersOnly';
+
+class MembersOnly extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      stash: []
+    };
+
+    this.renderSecretStash = this.renderSecretStash.bind(this);
+  }
+
+  componentWillMount () {
+    getStash()
+      .then(stash => {
+        this.setState({ ...this.state, stash })
+      })
+  }
+
+  renderSecretStash () {
+    return this.state.stash.map(item => (<img width="300" src={item} />));
+  }
+
+  render () {
+    return (
+      <div id='members-only'>
+        <h1>Members Only Area</h1>
+        {this.renderSecretStash()}
+      </div>
+    )
+  }
+}
+
+export default MembersOnly;

generated/browser/components/MembersOnly/_MembersOnly.scss

@@ -0,0 +1,3 @@
+#members-only {
+  text-align: center;
+}

generated/browser/components/MembersOnly/index.js

@@ -0,0 +1 @@
+export default from './MembersOnly';

generated/browser/components/Navbar/Navbar.js

@@ -0,0 +1,94 @@
+'use strict';
+
+import React, { PropTypes } from 'react';
+import { IndexLink, Link } from 'react-router';
+import { push } from 'react-router-redux';
+import { Navbar, Nav, NavItem, Button } from 'react-bootstrap';
+import { LinkContainer, IndexLinkContainer } from 'react-router-bootstrap';
+import { logout } from '../../redux/modules/auth';
+import Logo from '../../shared/Logo';
+import './_Navbar';
+
+const NAV_ITEMS = [
+  { label: 'Home', path: '/' },
+  { label: 'About', path: 'about' },
+  { label: 'Documentation', path: 'docs' },
+  { label: 'Members Only', path: 'membersOnly', auth: true }
+]
+
+const renderNavItems = (user) => {
+  return (
+    <Nav>
+    {
+      NAV_ITEMS.map((item, i) => {
+        if (item.label === 'Home') {
+          return (
+            <IndexLinkContainer to={item.path} key={i}>
+              <NavItem eventKey={i}>
+                {item.label}
+              </NavItem>
+            </IndexLinkContainer>
+          )
+        } else if (user || !item.auth) {
+          return (
+            <LinkContainer to={item.path} key={i}>
+              <NavItem eventKey={i}>
+                {item.label}
+              </NavItem>
+            </LinkContainer>
+          )
+        }
+      })
+    }
+    </Nav>
+  )
+}
+
+const renderAuthNavItems = (user, dispatch) => {
+
+  function handleLogout () {
+    dispatch(logout()).then(() => dispatch(push('/login')))
+  }
+
+  if (user) {
+    return (
+      <Nav pullRight>
+        <NavItem disabled>
+          { user.email }
+        </NavItem>
+        <NavItem eventKey={NAV_ITEMS.length} onClick={handleLogout}>
+          Logout
+        </NavItem>
+      </Nav>
+    )
+  } else {
+    return (
+      <Nav pullRight>
+        <LinkContainer to='login'>
+          <NavItem>Login</NavItem>
+        </LinkContainer>
+      </Nav>
+    )
+  }
+}
+
+const NavBar = ({ user, dispatch }) => {
+  return (
+    <Navbar staticTop>
+      <Navbar.Header>
+        <Navbar.Brand>
+          <Logo width={40} />
+        </Navbar.Brand>
+      </Navbar.Header>
+      {renderNavItems(user)}
+      {renderAuthNavItems(user, dispatch)}
+  </Navbar>
+  )
+}
+
+NavBar.propTypes = {
+  user: PropTypes.object,
+  dispatch: PropTypes.func
+}
+
+export default NavBar;