Borajimin

.gitignore

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

backend/routes.js

@@ -1,11 +1,148 @@
 const express = require('express');
 const router = express.Router();
+const { User, Post } = require('../models');
+const bcrypt = require('bcrypt');
+let hashedPassword;
 
-// YOUR API ROUTES HERE
+module.exports = (passport) => {
+  // YOUR API ROUTES HERE
+    router.post('/register', (req, res) => {
+        User.findAll({where: {username: req.body.username}})
+        .then(users => {
+            if(req.body.password === req.body.repeatPassword && !users[0]) {
+                bcrypt.hash(req.body.password, 10, (err, hash) => {
+                    hashedPassword = hash;
+                    User.create({
+                        username: req.body.username,
+                        password: hashedPassword
+                    })
+                      .then(() => {
+                          res.json({success: true});
+                      });
+                });
+            } else {
+                res.json({success: false});
+            }
+        })
+      .catch((err)=>console.log(err));
+    });
 
-// SAMPLE ROUTE
-router.use('/users', (req, res) => {
-    res.json({ success: true });
-});
+    router.post('/login', (req, res, next) => {
+        passport.authenticate('local', (err, user) => {
+            console.log('HERE');
+            user ? req.login(user, error => {
+                if(err) {return next(error);}
+                return res.json({success: true, user: req.user});
+            }) : res.json({success: false});
+        })(req, res, next);
+    });
 
-module.exports = router;
+    router.get('/posts/all', (req, res) => {
+        Post.findAll({
+            where: {fk_post_id: null}
+        })
+        .then((posts) => {
+            var newPosts = posts.map(post => post.dataValues);
+            console.log(newPosts);
+            res.json({success: true, posts: newPosts});
+        });
+    });
+
+    router.use((req, res, next) => {
+        console.log(req.user, "MIddleware req.user is this");
+        if (!req.user) {
+            res.status(401).json({success: 'failed'});
+        } else {
+            next();
+        }
+    });
+
+    router.get('/logout', (req, res) => {
+        req.logout();
+        res.status(200).json({success: true});
+    });
+
+
+    router.get('/:username', (req, res) => {
+        User.findOne({where: {username: req.params.username}})
+        .then((user) => {
+            if(user) {
+                console.log(user.dataValues, "USer data values");
+                res.json({success: true, user: Object.assign({}, user.dataValues, {password: null})});
+            } else {
+                res.json({success: false, user: null});
+            }
+        });
+    });
+
+    router.get('/user', (req, res) => {
+        User.findOne({where: {username: req.user.username}})
+        .then((user) => {
+            res.json({success: true, user: user.dataValues});
+        });
+    });
+
+    router.post('/post/new', (req, res) => {
+        Post.create({
+            fk_post_id: req.body.postId,
+            img: req.body.img,
+            description: req.body.description,
+            fk_user_id: req.user.id,
+            title: req.body.title
+        })
+        .then(() => {
+            console.log('then inside');
+            res.json({success: true});
+        })
+        .catch((error)=>{
+            console.log('inside catch', error);
+            res.json({success: false, error: error});
+        });
+    });
+
+    async function recurse(post) {
+        try {
+            var comments = await Post.findAll({where: {fk_post_id: post.id}});
+            if (!comments) {
+                return Object.assign({}, post);
+            }
+            return Object.assign({}, post, {children: comments.map((comment) => recurse(comment))
+            });
+        } catch (err) {
+            return false;
+        }
+    }
+
+    router.get('/post/:id',  (req, res) => {
+        Post.findOne({where: {id: req.params.id}})
+          .then(async (post) => {
+              var comments = await recurse(post.dataValues);
+              if(!comments) {
+                  res.json({
+                      success: false,
+                      comments: null
+                  });
+              }
+              console.log(comments, 'COMMENTS AFTER RECURSE');
+              res.json({
+                  success: true,
+                  postContents: comments
+              });
+          })
+          .catch((err) => {
+              console.log('Inside catch for findOne');
+              res.json({
+                  success: false,
+                  error: err
+              });
+          });
+    });
+
+
+    // SAMPLE ROUTE
+    router.use('/users', (req, res) => {
+        res.json({ success: true });
+    });
+
+    return router;
+};

frontend/actions/index.js

@@ -1,3 +1,8 @@
 // Action Creators
 
 // import * as types from './types';
+export function toggleLoginModal() {
+    return {
+        type: 'TOGGLE_LOGIN_MODAL'
+    };
+}

frontend/assets/stylesheets/base.scss

@@ -1,4 +1,42 @@
 h1 {
   font-family: helvetica;
   font-weight: 200;
-}
+}
+
+.headerContent {
+  background-image: url("http://pic.templetons.com/brad/pano/sfba/best-treas.jpg");
+  height: 100px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  border: 5px solid orange;
+}
+
+.postContent {
+  display: flex;
+  border-radius: 5px;
+  border: 5px solid black;
+  padding-top: 100px;
+  width: 500px;
+}
+
+.commentHolder {
+  position: relative;
+  left: 100px;
+}
+
+.comment {
+  display: flex;
+}
+
+.postHeader {
+  display: flex;
+  padding: 10px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid grey;
+}
+
+.postBody {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px
+}

frontend/components/Comment.js

@@ -0,0 +1,59 @@
+var React = require('react');
+import PropTypes from 'prop-types';
+// var { Navbar, FormGroup, FormControl, Button, Checkbox, Col, Form, ControlLabel, HelpBlock} = require('react-bootstrap');
+// var axios = require('axios');
+
+// This assumes we are passing in posts
+// Each post has: img (string url) and description
+
+
+class Comment extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            hideChildren: true
+        }
+    }
+
+
+    clickHandler() {
+        this.setState({
+            hideChildren: false
+        })
+    }
+
+    render() {
+      return (
+        <div className="comment">
+          <button type="button" className="btn" style={{margin: 5}}>
+            <span className="glyphicon glyphicon-arrow-up"/>
+          </button>
+          <button type="button" className="btn" style={{margin: 5}}>
+            <span className="glyphicon glyphicon-arrow-down"/>
+          </button>
+          <div>
+            {this.props.comment.content.description}
+          </div>
+          <div onClick={()=>this.clickHandler()}>
+            {this.state.children.length} comments
+          </div>
+          {this.state.hideChildren ? null :
+            this.props.comment.children.map((comment) => {
+                return (
+                  <div className="commentHolder">
+                      <Comment comment={comment}/>
+                  </div>
+                )
+              })
+            })
+        </div>
+      );
+    }
+};
+
+Comment.propTypes = {
+    comment: PropTypes.object,
+};
+
+
+export default Comment;

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,92 @@
+var React = require('react');
+var { Navbar, FormGroup, FormControl, Button, Checkbox, Col, Form, ControlLabel, HelpBlock} = require('react-bootstrap');
+var axios = require('axios');
+var { Redirect } = require('react-router');
+// This assumes we are passing in posts
+// Each post has: img (string url) and description
+let posts = [{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAALwAAAAJDliZTVkOTcyLWQ0NzUtNDNlZC1hZmEwLTY1NTQ0ZDBjNTE5ZA.jpg',
+title: "This is what humans call a 'moose' "},{img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Moose_superior.jpg/1200px-Moose_superior.jpg',
+title: "This is what humans call a 'moose' "},
+{img: 'http://i.telegraph.co.uk/multimedia/archive/02622/geese_2622145b.jpg',
+title: "This is what humans call 'geese'.  The singular term is 'goose'. They are notorious for pooping in groups over the skies."}]
+
+class Feed extends React.Component {
+  constructor(){
+    super();
+    this.state = {
+      posts: posts,
+      redirect: false,
+      post_id: null
+    }
+  }
+
+  componentDidMount() {
+    axios.get('http://localhost:3000/api/posts/all', {
+      withCredentials: true
+    })
+    .then((resp) => {
+      this.setState({
+        posts: [...this.state.posts, ...resp.data.posts]
+      })
+    })
+    .catch(e => {
+      console.log(e);
+    })
+  }
+    postClick(i) {
+        console.log('clicked!');
+        this.setState({
+            redirect: true,
+            post_id: this.state.posts[i].id
+        });
+    }
+    render() {
+        return (
+        this.state.redirect ? <Redirect to={`/post/page/${this.state.post_id}`}/> :
+        <div style={{paddingTop: 100}}>
+          {
+            this.state.posts.map((post, i) => {
+                return (
+                <div key={Math.random()}>
+                  <Col componentClass={ControlLabel} sm={7}>
+                    <div style={{ border: '2px solid #a1a1a1', borderRadius: '25px', padding: 15}}>
+                      <button type="button" className="btn" style={{margin: 5}}>
+                        <span className="glyphicon glyphicon-arrow-up"/>
+                      </button>
+                      <button type="button" className="btn" style={{margin: 5}}>
+                        <span className="glyphicon glyphicon-arrow-down"/>
+                      </button>
+                      <img src={post.img} height="50" width="50"/>
+                      <b> {post.title} </b>
+                      <p> {post.description} </p>
+                      <a onClick={() => this.postClick(i)}>
+                        <b> {post.title} </b>
+                      </a>
+                    </div>
+                  </Col>
+                </div>
+              );
+            })
+          }
+        </div>
+        );
+    }
+  }
+
+
+export default Feed;