Merging saminator and jimin into master

.gitignore

@@ -5,3 +5,4 @@ public/bundle.js
 package-lock.json
 *hot-update.js
 *hot-update.json
+env.sh

frontend/actions/index.js

@@ -1,3 +1,31 @@
 // Action Creators
 
 // import * as types from './types';
+export function toggleLoginModal() {
+  return {
+    type: 'TOGGLE_LOGIN_MODAL'
+  };
+}
+
+export function loginUserClick(username, password) {
+  return {
+    type: 'LOGIN',
+    username: username,
+    password: password
+  }
+};
+
+export function registerUserClick(username, password, rpw) {
+  return {
+    type: 'REGISTER',
+    username: username,
+    password: password,
+    rpw: rpw
+  }
+};
+
+export function toggleSignUpClick(){
+  return {
+    type: 'SIGN_UP'
+  }
+};

frontend/components/Description.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Description = ( { description } ) => {
+    return (
+      <div>
+        <p>{description}</p>
+      </div>
+    );
+};
+
+Description.propTypes = {
+    description: PropTypes.string,
+};
+
+
+export default Description;

frontend/components/Feed.js

@@ -0,0 +1,43 @@
+var React = require('react');
+var PropTypes = require('prop-types');
+
+// This assumes we are passing in posts
+// Each post has: img (string url) and description
+
+//posts
+const Feed = ( {  } ) => {
+  console.log('in feed..');
+  let posts = [{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+                description: "This is what humans call a 'moose' "},
+                {img: 'http://i.telegraph.co.uk/multimedia/archive/02622/geese_2622145b.jpg',
+                 description: "This is what humans call 'geese'.  The singular term is 'goose'. They are notorious for pooping in groups over the skies."}]
+    return (
+      <div>
+        {
+          posts.map((post) => {
+            return (<div style={{ border: '2px solid #a1a1a1', borderRadius: '25px', padding: 15}}>
+
+                <button type="button" className="btn" style={{margin: 5}}>
+                  <span className="glyphicon glyphicon-arrow-up"></span>
+                </button>
+
+                <button type="button" className="btn" style={{margin: 5}}>
+                  <span className="glyphicon glyphicon-arrow-down"></span>
+                </button>
+
+              <img src={post.img} height="50" width="50"/>
+              <b> {post.description} </b>
+            </div>);
+          })
+        }
+      </div>
+
+    );
+};
+
+// Feed.propTypes = {
+//     posts: PropTypes.array,
+// };
+
+
+export default Feed;

frontend/components/Login.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, Glyphicon } from 'react-bootstrap';
+
+let username = '';
+let password = '';
+let rPassword = '';
+
+function onUsernameChange(e) {
+  username = e.target.value;
+}
+function onPasswordChange(e) {
+  password = e.target.value;
+}
+function onRPasswordChange(e) {
+  rPassword = e.targat.value;
+}
+
+const Login = ({ modalOpen, state, login, register, onSignUp }) => {
+  return (
+    <div>
+      <Button onClick={modalOpen}>Login OR Register</Button>
+      <Modal show={state.isModalOpen} onHide={() => modalOpen()}>
+        <Modal.Header closeButton>
+          <Modal.Title>Hey Fam!</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+          {(state.signUp) ? (
+            <input type="password" onChange={(e) => onRPasswordChange(e)} placeholder="repeat password" name="rPassword"/>
+          ) : (
+            <div>
+            <input type="text" onChange={(e) => onUsernameChange(e)} placeholder="username" name="username"/>
+            <input type="password" onChange={(e) => onPasswordChange(e)} placeholder="password" name="password"/>
+            </div>
+          )}
+
+        </Modal.Body>
+
+        <Modal.Footer>
+          {(state.signUp) ? (
+            <Button bsSize="small" bsStyle="primary" onClick={() => register(username, password, rPassword)}><Glyphicon glyph="glyphicon glyphicon-plus" />Confirm</Button>
+          ) : (
+            <div>
+            <Button bsSize="small" bsStyle="danger" onClick={modalOpen}><Glyphicon glyph="glyphicon glyphicon-remove" /> Close</Button>
+            <Button bsSize="small" bsStyle="success" onClick={() => login(username, password)}><Glyphicon glyph="glyphicon glyphicon-ok" /> Login</Button>
+            <Button bsSize="small" bsStyle="primary" onClick={onSignUp}><Glyphicon glyph="glyphicon glyphicon-plus" /> Sign Up</Button>
+          </div>
+          )}
+
+
+        </Modal.Footer>
+
+      </Modal>
+    </div>
+  );
+};
+
+Login.propTypes = {
+  state: PropTypes.object,
+  modalOpen: PropTypes.func,
+  login: PropTypes.func,
+  register: PropTypes.func,
+  onSignUp: PropTypes.func
+};
+
+
+export default Login;

frontend/components/NewPost.js

@@ -0,0 +1,63 @@
+var React = require('react');
+var {Navbar, FormGroup, FormControl, Button, Checkbox, Col, Form, ControlLabel, HelpBlock} = require('react-bootstrap');
+
+class NewPost extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    function FieldGroup({ id, type, label, help }) {
+      return (
+        <FormGroup controlId={id}>
+          <ControlLabel>{label}</ControlLabel>
+          <FormControl type={type} />
+          {help && <HelpBlock>{help}</HelpBlock>}
+        </FormGroup>
+      );
+    }
+
+    return (
+      <div>
+        <Form horizontal>
+          <FormGroup controlId="formHorizontalEmail">
+            <Col componentClass={ControlLabel} sm={2}>
+              Title
+            </Col>
+            <Col sm={8}>
+              <FormControl type="text" placeholder="Title" />
+            </Col>
+          </FormGroup>
+
+          <FormGroup controlId="formHorizontalEmail">
+            <Col componentClass={ControlLabel} sm={2}>
+              Description
+            </Col>
+            <Col sm={8}>
+              <FormControl componentClass="textarea" placeholder="Description" />
+            </Col>
+          </FormGroup>
+
+          <Col componentClass={ControlLabel} sm={2}>
+            Select image
+          </Col>
+          <Col sm={10}>
+            <FieldGroup
+              id="formControlsFile"
+              type="file"
+              label="File"
+              help="Select your image that others will see."
+            />
+          </Col>
+
+          <Col componentClass={ControlLabel} sm={2}>
+            <button type="button" className="btn btn-success" style={{margin: 5}}>
+              Save post
+            </button>
+          </Col>
+        </Form>
+      </div>
+    );
+  }
+}
+
+export default NewPost;

frontend/components/SideBar.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ButtonGroup, ButtonToolbar, Panel} from 'react-bootstrap';
+import SubmitPost from './SubmitPost';
+import Login from './Login';
+import Description from './Description';
+
+const SideBar = ({ state, toggleLogin, loginUser, registerUser, toggleSignUp }) => {
+    return (
+      <div>
+        <Panel>
+          <ButtonToolbar>
+          <SubmitPost />
+          <ButtonGroup>
+            <Login modalOpen={toggleLogin} login={loginUser} register={registerUser} onSignUp={toggleSignUp} state={state}/>
+          </ButtonGroup>
+        </ButtonToolbar>
+          <Panel header={"Description"}>
+            <Description description={state.description}/>
+          </Panel>
+        </Panel>
+      </div>
+    );
+};
+
+SideBar.propTypes = {
+    state: PropTypes.object,
+    toggleLogin: PropTypes.func,
+    loginUser: PropTypes.func,
+    registerUser: PropTypes.func,
+    toggleSignUp: PropTypes.func
+
+};
+
+export default SideBar;

frontend/components/SubmitPost.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+
+const SubmitPost = ({ }) => {
+    return (
+        <Button>SubmitPost</Button>
+    );
+};
+
+SubmitPost.propTypes = {
+    modalOpen: PropTypes.func
+};
+
+
+export default SubmitPost;

frontend/containers/AppContainer.js

@@ -2,27 +2,48 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import Title from '../components/Title';
+import DevTools from './DevTools';
+import SideBar from '../components/SideBar';
+import Feed from '../components/Feed';
+import NewPost from '../components/NewPost';
 
-const AppContainer = ({ name }) => {
+
+import { toggleLoginModal, loginUserClick, registerUserClick, toggleSignUpClick } from '../actions/index';
+
+const AppContainer = ({ state, toggleLogin, loginUser, registerUser, toggleSignUp }) => {
     return (
         <div>
             <Title name={name} />
+            <SideBar toggleLogin={toggleLogin}
+              loginUser={loginUser}
+              registerUser={registerUser}
+              toggleSignUp={toggleSignUp}
+              state={state}/>
+            <DevTools />
         </div>
     );
 };
 
 AppContainer.propTypes = {
-    name: PropTypes.string,
+    state: PropTypes.object,
+    toggleLogin: PropTypes.func,
+    loginUser: PropTypes.func,
+    registerUser: PropTypes.func,
+    toggleSignUp: PropTypes.func
 };
 
 const mapStateToProps = (state) => {
     return {
-        name: state.name
+        state: state
     };
 };
 
-const mapDispatchToProps = (/* dispatch */) => {
+const mapDispatchToProps = (dispatch) => {
     return {
+        toggleLogin: () => {dispatch(toggleLoginModal());},
+        loginUser: (u, p) => {dispatch(loginUserClick(u, p));},
+        registerUser: (u, p) => {dispatch(registerUserClick(u, p));},
+        toggleSignUp: () => {dispatch(toggleSignUpClick())}
     };
 };
 

frontend/containers/Root.dev.js

@@ -1,20 +1,25 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Provider} from 'react-redux';
+import Feed from '../components/Feed.js';
+import NewPost from '../components/NewPost.js';
+import { HashRouter, Route, Switch } from 'react-router-dom';
 import AppContainer from './AppContainer.js';
-import DevTools from './DevTools';
+
 
 export default function Root({ store }) {
     return (
-        <Provider store={store}>
-            <div>
-                <AppContainer />
-                <DevTools />
-            </div>
-        </Provider>
+      <Provider store={store}>
+        <HashRouter>
+          <Switch>
+            <Route exact path="/" component={AppContainer}/>
+            <Route exact path='/feed' component={Feed}/>
+          <Route exact path='/post/new' component={NewPost}/>
+          </Switch>
+        </HashRouter>
+      </Provider>
     );
-}
-
+
 Root.propTypes = {
-    store: PropTypes.object.isRequired
+  store: PropTypes.object.isRequired
 };