reddit day 1 completed

.gitignore

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

backend/auth.js

@@ -0,0 +1,30 @@
+const express = require('express');
+const router = express.Router();
+const User = require('../root/models').User;
+
+module.exports = (passport) => {
+    router.post('/register', (req, res) => {
+        console.log('here', req.body);
+        User.create({
+            username: req.body.username,
+            password: req.body.password
+        })
+          .then(user => {
+              res.json({success: true, user: user});
+          })
+          .catch(err => {
+              res.json({success: false, err: err});
+          });
+    });
+
+    router.post('/login', passport.authenticate('local'), (req, res) => {
+        res.json({success: true, user: req.user});
+    });
+
+    router.get('/logout', (req, res) => {
+        req.logout();
+        res.json({success: true});
+    });
+
+    return router;
+};

backend/routes.js

@@ -1,11 +1,66 @@
 const express = require('express');
 const router = express.Router();
+const User = require('../root/models').User;
+const Post = require('../root/models').Post;
 
 // YOUR API ROUTES HERE
+router.get('/:username', (req, res) => {
+    User.findOne({where: {username: req.params.username}})
+    .then(user => {
+        console.log('user when finding by username: ', user);
+        res.json({success: true, user: user});
+    })
+    .catch(err => {
+        res.json({success: false, err: err});
+    });
+});
+
+router.get('/', (req, res) => {
+    console.log('req user is: ************************', req.user);
+    User.findById(req.user.id)
+    .then(user => {
+        console.log('user when finding user on /: ', user);
+        res.json({success: true, user: user});
+    })
+    .catch(err => {
+        res.json({success: false, err: err});
+    });
+});
+
+router.post('/post/new', (req, res) => {
+    console.log('req user is ', req.user);
+    Post.create({
+        title: req.body.title,
+        content: req.body.content,
+        postId: req.body.postId,
+        userId: req.user.id
+    })
+    .then(post => {
+        res.json({success: true, post: post});
+    })
+    .catch(err => {
+        res.json({success: false, err: err});
+    });
+});
+
+router.get('/post/all', (req, res) => {
+    Post.findAll({where: {postId: null}})
+    .then(posts => {
+        res.json({success: true, posts: posts});
+    })
+    .catch(err => {
+        res.json({success: false, err: err});
+    });
+});
 
-// SAMPLE ROUTE
-router.use('/users', (req, res) => {
-    res.json({ success: true });
+router.get('/post/:id', (req, res) => {
+    Post.findById(req.params.id)
+    .then(post => {
+        res.json({success: true, post: post});
+    })
+    .catch(err => {
+        res.json({success: false, err: err});
+    });
 });
 
 module.exports = router;

frontend/actions/index.js

@@ -1,3 +1,19 @@
 // Action Creators
 
-// import * as types from './types';
+import * as types from './types';
+
+export function toggleLoginModal() {
+    return {type: types.TOGGLE_LOGIN_MODAL};
+}
+
+export function logout() {
+    return {type: types.LOGOUT};
+}
+
+export function login(user) {
+    return {type: types.LOGIN, user: user};
+}
+
+export function getPosts(posts) {
+    return {type: types.GET_POSTS, posts: posts};
+}

frontend/actions/types.js

@@ -1 +1,8 @@
 /* Action types */
+export const TOGGLE_LOGIN_MODAL = 'TOGGLE_LOGIN_MODAL';
+
+export const LOGIN = 'LOGIN';
+
+export const LOGOUT = 'LOGOUT';
+
+export const GET_POSTS = 'GET_POSTS';

frontend/assets/stylesheets/base.scss

@@ -1,4 +1,12 @@
 h1 {
   font-family: helvetica;
   font-weight: 200;
-}
+}
+
+.modal-container {
+  position: relative;
+}
+
+.modal-container .modal, .modal-container .modal-backdrop {
+  position: absolute;
+}

frontend/components/AuthModal.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button } from 'react-bootstrap';
+import axios from 'axios';
+
+class AuthModal extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    handleRegister() {
+        axios.post('http://localhost:3000/register', {username: this.username.value, password: this.password.value}, {withCredentials: true})
+        .then((response) => {
+          // console.log("response", response);
+            if(response.data.success) {
+                this.props.login(response.data.user);
+                this.props.toggleLoginModal();
+            } else {
+                console.log("register redirect error", response.data.err);
+            }
+        })
+        .catch((err) => {
+            console.log("register post request error", err);
+        });
+    }
+
+    handleLogin() {
+        axios.post('http://localhost:3000/login', {username: this.username.value, password: this.password.value}, {withCredentials: true})
+        .then((response) => {
+            // console.log("response", response.data.user);
+            if(response.data.success) {
+                this.props.login(response.data.user);
+                this.props.toggleLoginModal();
+            } else {
+                console.log("login redirect error", response.data.err);
+            }
+        })
+        .catch((err) => {
+            console.log("login post request error", err);
+        });
+    }
+
+    render() {
+        // console.log('this.props', this.props);
+        return(
+      <Modal
+        show={this.props.isModalOpen}
+        onHide={this.props.toggleLoginModal}
+        container={this}
+        aria-labelledby="contained-modal-title"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title id="contained-modal-title">Contained Modal</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <input type="text" name="username" placeholder="username" ref={(input) => { this.username = input; }}/>
+          <input type="password" name="password" placeholder="password" ref={(input) => { this.password = input; }}/>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={() => this.handleRegister()}>Register</Button>
+          <Button onClick={() => this.handleLogin()}>Login</Button>
+        </Modal.Footer>
+      </Modal>
+        );
+    }
+}
+
+AuthModal.propTypes = {
+    isModalOpen: PropTypes.bool,
+    toggleLoginModal: PropTypes.func,
+    // username: PropTypes.string,
+    // password: PropTypes.string,
+    login: PropTypes.func,
+};
+
+export default AuthModal;

frontend/components/Feed.js

@@ -0,0 +1,82 @@
+// import React from 'react';
+// import PropTypes from 'prop-types';
+// import axios from 'axios';
+//
+// const Feed = ( { getPosts } ) => {
+//     const componentDidMount = () => {
+//         axios.get('http://localhost:3000/post/all', {withCredentials: true})
+//         .then((response) => {
+//             console.log("response", response);
+//             if(response.data.success) {
+//                 getPosts(response.data.posts);
+//             } else {
+//                 console.log("posts error", response.data.err);
+//             }
+//         })
+//         .catch((err) => {
+//             console.log("get posts error", err);
+//         });
+//     };
+//
+//     return (
+//       <div>
+//         <div>Post</div>
+//         <div>Post</div>
+//         <div>Post</div>
+//         <div>Post</div>
+//         <div>Post</div>
+//         <div>Post</div>
+//         <div>Post</div>
+//       </div>
+//     );
+// };
+//
+// Feed.propTypes = {
+//     getPosts: PropTypes.func,
+// };
+//
+//
+// export default Feed;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import { Link }from 'react-router-dom';
+
+class Feed extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        axios.get('http://localhost:3000/post/all', {withCredentials: true})
+        .then((response) => {
+            console.log("response", response);
+            if(response.data.success) {
+                this.props.getPosts(response.data.posts);
+            } else {
+                console.log("posts error", response.data.err);
+            }
+        })
+        .catch((err) => {
+            console.log("get posts error", err);
+        });
+    }
+
+    render() {
+        console.log(this.props.posts, 'here in feed with the posts!!!!!!!!');
+        return(
+      <div>
+        Hello Posts
+        {this.props.posts.map((elem) => <li><Link to={"/post/" + elem.id}>{elem.title} - {elem.content} by {elem.userId} at {elem.createdAt}</Link></li>)}
+      </div>
+        );
+    }
+}
+
+Feed.propTypes = {
+    getPosts: PropTypes.func,
+    posts: PropTypes.array,
+};
+
+export default Feed;

frontend/components/Header.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Header = ( { } ) => {
+    return (
+      <div>
+        <img width="100px" height="40px" src="https://upload.wikimedia.org/wikipedia/en/thumb/8/82/Reddit_logo_and_wordmark.svg/1280px-Reddit_logo_and_wordmark.svg.png"/>
+      </div>
+    );
+};
+
+Header.propTypes = {
+};
+
+
+export default Header;

frontend/components/NewPost.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import axios from 'axios';
+
+class NewPost extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    submitPost() {
+        axios.post('http://localhost:3000/post/new', {title: this.title.value, content: this.content.value}, {withCredentials: true})
+        .then((response) => {
+            // console.log("response", response.data.user);
+            if(response.data.success) {
+                console.log('hey');
+                this.props.history.push('/');
+            } else {
+                console.log("post error", response.data.err);
+            }
+        })
+        .catch((err) => {
+            console.log("submit post request error", err);
+        });
+    }
+
+    render() {
+        return(
+      <div>
+        <label>Title</label><br/>
+        <input type="text" name="title" placeholder="title" ref={(input) => { this.title = input; }}/><br/>
+        <label>Post</label><br/>
+        <textarea name="content" placeholder="content" ref={(input) => { this.content = input; }}/><br/>
+        <Button bsStyle="success" onClick={() => this.submitPost()}>Submit Post</Button>
+      </div>
+        );
+    }
+}
+
+NewPost.propTypes = {
+    history: PropTypes.object,
+};
+
+export default NewPost;