From 2ba4bec45913d801b2834ea9f81b3a7297edb50a Mon Sep 17 00:00:00 2001 From: Brandon Eng Date: Fri, 10 Nov 2017 09:26:09 -0800 Subject: [PATCH 1/3] reddit day1 --- .gitignore | 1 + backend/auth.js | 32 +++++++++++ backend/routes.js | 25 +++++++- frontend/actions/index.js | 15 ++++- frontend/actions/types.js | 5 ++ frontend/assets/stylesheets/base.scss | 10 +++- frontend/components/AuthModal.js | 76 +++++++++++++++++++++++++ frontend/components/Feed.js | 23 ++++++++ frontend/components/Header.js | 18 ++++++ frontend/components/SideBar.js | 46 +++++++++++++++ frontend/containers/AppContainer.js | 37 ++++++++++-- frontend/containers/Root.dev.js | 12 +++- frontend/reducers/index.js | 20 +++++-- frontend/reducers/loginReducer.js | 19 +++++++ frontend/reducers/logoutReducer.js | 13 +++++ frontend/reducers/toggleModalReducer.js | 12 ++++ frontend/store/configureStore.js | 3 + package.json | 13 ++++- public/index.html | 3 +- root/models.js | 36 ++++++++++++ root/sync.js | 13 +++++ server.js | 53 ++++++++++++++++- 22 files changed, 462 insertions(+), 23 deletions(-) create mode 100644 backend/auth.js create mode 100644 frontend/components/AuthModal.js create mode 100644 frontend/components/Feed.js create mode 100644 frontend/components/Header.js create mode 100644 frontend/components/SideBar.js create mode 100644 frontend/reducers/loginReducer.js create mode 100644 frontend/reducers/logoutReducer.js create mode 100644 frontend/reducers/toggleModalReducer.js create mode 100644 root/models.js create mode 100644 root/sync.js diff --git a/.gitignore b/.gitignore index 028e2a6..9c301b7 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ public/bundle.js package-lock.json *hot-update.js *hot-update.json +env.sh diff --git a/backend/auth.js b/backend/auth.js new file mode 100644 index 0000000..8b4d0ce --- /dev/null +++ b/backend/auth.js @@ -0,0 +1,32 @@ +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, error: err}); + }); + }); + + router.post('/login', passport.authenticate('local'), (req, res) => { + res.json({success: true, user: req.user}); + }); + + router.get('/logout', (req, res) => { + console.log('in the logout', req.user); + req.logout(); + console.log('after logout', req.user); + res.redirect('/'); + }); + + return router; +}; diff --git a/backend/routes.js b/backend/routes.js index 9dd2215..1742800 100644 --- a/backend/routes.js +++ b/backend/routes.js @@ -1,11 +1,30 @@ const express = require('express'); const router = express.Router(); +const User = require('../root/models').User; // 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}); + }); +}); -// SAMPLE ROUTE -router.use('/users', (req, res) => { - res.json({ success: true }); +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}); + }); }); + module.exports = router; diff --git a/frontend/actions/index.js b/frontend/actions/index.js index 2bba168..bc56d77 100644 --- a/frontend/actions/index.js +++ b/frontend/actions/index.js @@ -1,3 +1,16 @@ // 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) { + console.log('here 2', user); + return {type: types.LOGIN, user: user}; +} diff --git a/frontend/actions/types.js b/frontend/actions/types.js index 9836597..8c0fc26 100644 --- a/frontend/actions/types.js +++ b/frontend/actions/types.js @@ -1 +1,6 @@ /* Action types */ +export const TOGGLE_LOGIN_MODAL = 'TOGGLE_LOGIN_MODAL'; + +export const LOGIN = 'LOGIN'; + +export const LOGOUT = 'LOGOUT'; diff --git a/frontend/assets/stylesheets/base.scss b/frontend/assets/stylesheets/base.scss index 1ddbba3..706b3c5 100644 --- a/frontend/assets/stylesheets/base.scss +++ b/frontend/assets/stylesheets/base.scss @@ -1,4 +1,12 @@ h1 { font-family: helvetica; font-weight: 200; -} \ No newline at end of file +} + +.modal-container { + position: relative; +} + +.modal-container .modal, .modal-container .modal-backdrop { + position: absolute; +} diff --git a/frontend/components/AuthModal.js b/frontend/components/AuthModal.js new file mode 100644 index 0000000..f2382c7 --- /dev/null +++ b/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.error); + } + }) + .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.error); + } + }) + .catch((err) => { + console.log("login post request error", err); + }); + } + + render() { + // console.log('this.props', this.props); + return( + + + Contained Modal + + + { this.username = input; }}/> + { this.password = input; }}/> + + + + + + + ); + } +} + +AuthModal.propTypes = { + isModalOpen: PropTypes.bool, + toggleLoginModal: PropTypes.func, + // username: PropTypes.string, + // password: PropTypes.string, + login: PropTypes.func, +}; + +export default AuthModal; diff --git a/frontend/components/Feed.js b/frontend/components/Feed.js new file mode 100644 index 0000000..8d958ca --- /dev/null +++ b/frontend/components/Feed.js @@ -0,0 +1,23 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Feed = ( { } ) => { + return ( +
+
Post
+
Post
+
Post
+
Post
+
Post
+
Post
+
Post
+
+ ); +}; + +Feed.propTypes = { + name: PropTypes.string, +}; + + +export default Feed; diff --git a/frontend/components/Header.js b/frontend/components/Header.js new file mode 100644 index 0000000..a3f669f --- /dev/null +++ b/frontend/components/Header.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Header = ( { } ) => { + return ( +
+ +

TITLE

+
+ ); +}; + +Header.propTypes = { + name: PropTypes.string, +}; + + +export default Header; diff --git a/frontend/components/SideBar.js b/frontend/components/SideBar.js new file mode 100644 index 0000000..b6e29ae --- /dev/null +++ b/frontend/components/SideBar.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Button } from 'react-bootstrap'; +import axios from 'axios'; + + +const SideBar = ( { toggleLoginModal, username } ) => { + const handleLogout = () => { + axios.get('http://localhost:3000/logout', {withCredentials: true}) + .then((response) => { + console.log("response", response); + // if(response.data.success) { + // this.props.login(response.data.user); + // } else { + // console.log("login redirect error", response.data.error); + // } + }) + .catch((err) => { + console.log("login post request error", err); + }); + }; + + return ( +
+
+ {username.length > 0 + ?
+
Welcome {username}
+ +
+ : + } +
+
+ ); +}; + +SideBar.propTypes = { + isModalOpen: PropTypes.bool, + toggleLoginModal: PropTypes.func, + username: PropTypes.string, + logout: PropTypes.func, +}; + + +export default SideBar; diff --git a/frontend/containers/AppContainer.js b/frontend/containers/AppContainer.js index 7c29205..a86b351 100644 --- a/frontend/containers/AppContainer.js +++ b/frontend/containers/AppContainer.js @@ -1,28 +1,53 @@ import PropTypes from 'prop-types'; import React from 'react'; import { connect } from 'react-redux'; -import Title from '../components/Title'; +import Header from '../components/Header'; +import Feed from '../components/Feed'; +import SideBar from '../components/SideBar'; +import AuthModal from '../components/AuthModal'; +import * as actions from '../actions/index'; -const AppContainer = ({ name }) => { +const AppContainer = ({ isModalOpen, toggleLoginModal, login, username}) => { return (
- + <Header /> + <SideBar toggleLoginModal={toggleLoginModal} username={username}/> + <Feed /> + <AuthModal isModalOpen={isModalOpen} toggleLoginModal={toggleLoginModal} login={login}/> </div> ); }; AppContainer.propTypes = { - name: PropTypes.string, + isModalOpen: PropTypes.bool, + toggleLoginModal: PropTypes.func, + // logout: PropTypes.func, + login: PropTypes.func, + username: PropTypes.string, + // password: PropTypes.string }; const mapStateToProps = (state) => { + console.log(state); return { - name: state.name + isModalOpen: state.toggleLoginModal.isModalOpen, + username: state.login.username, + // password: state.register.password, }; }; -const mapDispatchToProps = (/* dispatch */) => { +const mapDispatchToProps = (dispatch) => { return { + toggleLoginModal: () => { + dispatch(actions.toggleLoginModal()); + }, + // logout: () => { + // dispatch(actions.logout()); + // }, + login: (user) => { + console.log('here', user); + dispatch(actions.login(user)); + } }; }; diff --git a/frontend/containers/Root.dev.js b/frontend/containers/Root.dev.js index c0f8d69..e76fb0c 100644 --- a/frontend/containers/Root.dev.js +++ b/frontend/containers/Root.dev.js @@ -3,14 +3,20 @@ import React from 'react'; import {Provider} from 'react-redux'; import AppContainer from './AppContainer.js'; import DevTools from './DevTools'; +import { HashRouter, Route, Switch } from 'react-router-dom'; + export default function Root({ store }) { return ( <Provider store={store}> - <div> - <AppContainer /> + <HashRouter> + <div> <DevTools /> - </div> + <Switch> + <Route exact path="/" component={AppContainer} /> + </Switch> + </div> + </HashRouter> </Provider> ); } diff --git a/frontend/reducers/index.js b/frontend/reducers/index.js index 4d415fd..d61c1d1 100644 --- a/frontend/reducers/index.js +++ b/frontend/reducers/index.js @@ -1,8 +1,16 @@ -function rootReducer(state = {name: 'Horizons'}, action) { - switch (action.type) { - default: - return state; - } -} +import { routerReducer } from 'react-router-redux'; +import { combineReducers } from 'redux'; +import toggleModalReducer from './toggleModalReducer'; +// import logoutReducer from './logoutReducer'; +import loginReducer from './loginReducer'; + + +const rootReducer = combineReducers({ + toggleLoginModal: toggleModalReducer, + // logout: logoutReducer, + login: loginReducer, + routing: routerReducer // this reducer is used by React Router in Redux +}); + export default rootReducer; diff --git a/frontend/reducers/loginReducer.js b/frontend/reducers/loginReducer.js new file mode 100644 index 0000000..723b2ad --- /dev/null +++ b/frontend/reducers/loginReducer.js @@ -0,0 +1,19 @@ +function loginReducer(state = {username: "", password: ""}, action) { + console.log('here 3', state, action); + switch (action.type) { + case 'LOGIN': + const newState = Object.assign({}, state); + newState.username = action.user.username; + newState.password = action.user.password; + return newState; + case 'LOGOUT': + const newState2 = Object.assign({}, state); + newState2.username = ""; + newState2.password = ""; + return newState2; + default: + return state; + } +} + +export default loginReducer; diff --git a/frontend/reducers/logoutReducer.js b/frontend/reducers/logoutReducer.js new file mode 100644 index 0000000..6f5eba2 --- /dev/null +++ b/frontend/reducers/logoutReducer.js @@ -0,0 +1,13 @@ +function logoutReducer(state = {username: "", password: ""}, action) { + switch (action.type) { + case 'LOGOUT': + const newState = Object.assign({}, state); + newState.username = ""; + newState.password = ""; + return newState; + default: + return state; + } +} + +export default logoutReducer; diff --git a/frontend/reducers/toggleModalReducer.js b/frontend/reducers/toggleModalReducer.js new file mode 100644 index 0000000..ad961b0 --- /dev/null +++ b/frontend/reducers/toggleModalReducer.js @@ -0,0 +1,12 @@ +function toggleModalReducer(state = {isModalOpen: false}, action) { + switch (action.type) { + case 'TOGGLE_LOGIN_MODAL': + const newState = Object.assign({}, state); + newState.isModalOpen = !newState.isModalOpen; + return newState; + default: + return state; + } +} + +export default toggleModalReducer; diff --git a/frontend/store/configureStore.js b/frontend/store/configureStore.js index 1f2f7d2..4c9385e 100644 --- a/frontend/store/configureStore.js +++ b/frontend/store/configureStore.js @@ -1,3 +1,6 @@ +import createHistory from 'history/createBrowserHistory'; +export const history = createHistory(); + if (process.env.NODE_ENV === 'production') { module.exports = require('./configureStore.prod'); } else { diff --git a/package.json b/package.json index 54019e8..993acad 100644 --- a/package.json +++ b/package.json @@ -14,25 +14,36 @@ "author": "", "license": "ISC", "dependencies": { + "axios": "^0.17.0", "babel-core": "^6.24.1", "babel-loader": "^6.4.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", + "body-parser": "^1.18.2", "css-loader": "^0.28.0", "enzyme": "^2.8.1", "expect": "^1.20.2", "express": "^4.15.2", + "history": "^4.7.2", "mocha": "^3.2.0", "node-sass": "^4.5.2", + "passport": "^0.4.0", + "passport-local": "^1.0.0", + "pg": "^7.4.0", + "pg-hstore": "^2.3.2", "prop-types": "^15.5.8", "react": "^15.5.4", - "react-dom": "^15.5.4", + "react-bootstrap": "^0.31.5", + "react-dom": "^15.6.2", "react-redux": "^5.0.5", + "react-router-dom": "^4.2.2", + "react-router-redux": "^4.0.8", "redux": "^3.7.2", "redux-devtools": "^3.4.0", "redux-devtools-dock-monitor": "^1.1.2", "redux-devtools-log-monitor": "^1.3.0", "sass-loader": "^6.0.3", + "sequelize": "^4.22.5", "style-loader": "^0.16.1", "webpack": "^2.3.3" }, diff --git a/public/index.html b/public/index.html index 9604aed..15a8c18 100644 --- a/public/index.html +++ b/public/index.html @@ -2,10 +2,11 @@ <html> <head> <meta charset="utf-8"> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> <title>Node + React Starter
- \ No newline at end of file + diff --git a/root/models.js b/root/models.js new file mode 100644 index 0000000..7d7174c --- /dev/null +++ b/root/models.js @@ -0,0 +1,36 @@ +"use strict"; + +var Sequelize = require('sequelize'); +var sequelize = new Sequelize(process.env.DATABASE_NAME, 'postgres', process.env.DATABASE_PASSWORD, { + dialect: 'postgres' +}); + +sequelize +.authenticate() +.then(() => { + console.log('Connection has been established successfully.'); +}) +.catch(err => { + console.error('Unable to connect to the database:', err); +}); + +// MODELS GO HERE + +var User = sequelize.define('user', { + username: { + type: Sequelize.STRING, + allowNull: false, + unique: true + }, + password: { + type: Sequelize.STRING, + allowNull: false + }, + // ADD MORE ATTRIBUTES HERE +}); + +module.exports = { + sequelize, + User, + // EXPORT models HERE +}; diff --git a/root/sync.js b/root/sync.js new file mode 100644 index 0000000..95be13d --- /dev/null +++ b/root/sync.js @@ -0,0 +1,13 @@ +"use strict"; + +var models = require('./models'); + +models.sequelize.sync({ force: true }) +.then(() => { + console.log('Successfully updated database tables!'); + process.exit(0); +}) +.catch((error) => { + console.log('Error updating database tables', error); + process.exit(1); +}); diff --git a/server.js b/server.js index ac6e4f3..a5e9475 100644 --- a/server.js +++ b/server.js @@ -3,14 +3,65 @@ const express = require('express'); const app = express(); const PORT = process.env.PORT || 3000; const api = require('./backend/routes'); +const bodyParser = require('body-parser'); +const passport = require('passport'); +const LocalStrategy = require('passport-local'); +const User = require('./root/models').User; +const routes = require('./backend/routes'); +var auth = require('./backend/auth'); + +app.use(bodyParser.json()); +app.use(bodyParser.urlencoded({ extended: false })); app.use(express.static(path.join(__dirname, 'public'))); +app.use(passport.initialize()); +app.use(passport.session()); + +passport.serializeUser((user, done) => { + done(null, user.id); +}); + +passport.deserializeUser((id, done) => { + // Find a user by id and call done(null, user) + // YOUR CODE HERE + User.findById(id) + .then((user) => { + console.log('deserialized user is: ', user.dataValues); + done(null, user.dataValues); + }) + .catch((err) => { + console.log('error deserializing user: ', err); + }); +}); + +passport.use(new LocalStrategy((username, password, done) => { + // Find a user by username, if password matches call done(null, user) + // otherwise call done(null, false) + // YOUR CODE HERE + User.findAll({where: {username: username}}) + .then((user) => { + console.log('user in local strategy is: ', user[0].dataValues); + if(user[0].dataValues.password === password) { + done(null, user[0].dataValues); + } else { + done(null, false); + } + }) + .catch((err) => { + console.log('error finding local user', err); + done(null, false); + }); +})); + +app.use('/', auth(passport)); +app.use('/', routes); + app.get('/', (request, response) => { response.sendFile(__dirname + '/public/index.html'); // For React/Redux }); -app.use('/api', api); +// app.use('/api', api); app.listen(PORT, error => { error From a9aa17bddcd16b978bb908d7fc803c2684301377 Mon Sep 17 00:00:00 2001 From: Brandon Eng Date: Fri, 10 Nov 2017 16:10:46 -0800 Subject: [PATCH 2/3] finished day1 --- backend/auth.js | 6 +- backend/routes.js | 38 ++++++++++++- frontend/actions/index.js | 11 ++-- frontend/actions/types.js | 2 + frontend/components/AuthModal.js | 4 +- frontend/components/Feed.js | 84 +++++++++++++++++++++++----- frontend/components/Header.js | 2 - frontend/components/NewPost.js | 44 +++++++++++++++ frontend/components/SideBar.js | 29 +++++++--- frontend/containers/AppContainer.js | 27 +++++---- frontend/containers/Root.dev.js | 9 ++- frontend/reducers/index.js | 3 +- frontend/reducers/loginReducer.js | 2 +- frontend/reducers/postsReducer.js | 13 +++++ frontend/store/configureStore.dev.js | 3 + frontend/store/configureStore.js | 3 - package.json | 3 + root/models.js | 19 +++++++ server.js | 14 ++++- 19 files changed, 260 insertions(+), 56 deletions(-) create mode 100644 frontend/components/NewPost.js create mode 100644 frontend/reducers/postsReducer.js diff --git a/backend/auth.js b/backend/auth.js index 8b4d0ce..e9768fd 100644 --- a/backend/auth.js +++ b/backend/auth.js @@ -13,7 +13,7 @@ module.exports = (passport) => { res.json({success: true, user: user}); }) .catch(err => { - res.json({success: false, error: err}); + res.json({success: false, err: err}); }); }); @@ -22,10 +22,8 @@ module.exports = (passport) => { }); router.get('/logout', (req, res) => { - console.log('in the logout', req.user); req.logout(); - console.log('after logout', req.user); - res.redirect('/'); + res.json({success: true}); }); return router; diff --git a/backend/routes.js b/backend/routes.js index 1742800..ab1af14 100644 --- a/backend/routes.js +++ b/backend/routes.js @@ -1,6 +1,7 @@ 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) => { @@ -15,7 +16,7 @@ router.get('/:username', (req, res) => { }); router.get('/', (req, res) => { - console.log('req user is: ', req.user); + console.log('req user is: ************************', req.user); User.findById(req.user.id) .then(user => { console.log('user when finding user on /: ', user); @@ -26,5 +27,40 @@ router.get('/', (req, res) => { }); }); +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}); + }); +}); + +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; diff --git a/frontend/actions/index.js b/frontend/actions/index.js index bc56d77..c6a45f0 100644 --- a/frontend/actions/index.js +++ b/frontend/actions/index.js @@ -6,11 +6,14 @@ export function toggleLoginModal() { return {type: types.TOGGLE_LOGIN_MODAL}; } -// export function logout() { -// return {type: types.LOGOUT}; -// } +export function logout() { + return {type: types.LOGOUT}; +} export function login(user) { - console.log('here 2', user); return {type: types.LOGIN, user: user}; } + +export function getPosts(posts) { + return {type: types.GET_POSTS, posts: posts}; +} diff --git a/frontend/actions/types.js b/frontend/actions/types.js index 8c0fc26..5115571 100644 --- a/frontend/actions/types.js +++ b/frontend/actions/types.js @@ -4,3 +4,5 @@ export const TOGGLE_LOGIN_MODAL = 'TOGGLE_LOGIN_MODAL'; export const LOGIN = 'LOGIN'; export const LOGOUT = 'LOGOUT'; + +export const GET_POSTS = 'GET_POSTS'; diff --git a/frontend/components/AuthModal.js b/frontend/components/AuthModal.js index f2382c7..f05fd0c 100644 --- a/frontend/components/AuthModal.js +++ b/frontend/components/AuthModal.js @@ -16,7 +16,7 @@ class AuthModal extends React.Component { this.props.login(response.data.user); this.props.toggleLoginModal(); } else { - console.log("register redirect error", response.data.error); + console.log("register redirect error", response.data.err); } }) .catch((err) => { @@ -32,7 +32,7 @@ class AuthModal extends React.Component { this.props.login(response.data.user); this.props.toggleLoginModal(); } else { - console.log("login redirect error", response.data.error); + console.log("login redirect error", response.data.err); } }) .catch((err) => { diff --git a/frontend/components/Feed.js b/frontend/components/Feed.js index 8d958ca..769c972 100644 --- a/frontend/components/Feed.js +++ b/frontend/components/Feed.js @@ -1,23 +1,81 @@ +// 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 ( +//
+//
Post
+//
Post
+//
Post
+//
Post
+//
Post
+//
Post
+//
Post
+//
+// ); +// }; +// +// Feed.propTypes = { +// getPosts: PropTypes.func, +// }; +// +// +// export default Feed; + import React from 'react'; import PropTypes from 'prop-types'; +import axios from 'axios'; + +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); + }); + } -const Feed = ( { } ) => { - return ( + render() { + console.log(this.props.posts, 'here in feed with the posts!!!!!!!!'); + return(
-
Post
-
Post
-
Post
-
Post
-
Post
-
Post
-
Post
+ Hello Posts + {this.props.posts.map((elem) =>
  • {elem.title} - {elem.content} by {elem.userId} at {elem.createdAt}
    • )}
    - ); -}; + ); + } +} Feed.propTypes = { - name: PropTypes.string, + getPosts: PropTypes.func, + posts: PropTypes.array, }; - export default Feed; diff --git a/frontend/components/Header.js b/frontend/components/Header.js index a3f669f..4504552 100644 --- a/frontend/components/Header.js +++ b/frontend/components/Header.js @@ -5,13 +5,11 @@ const Header = ( { } ) => { return (
    -

    TITLE

    ); }; Header.propTypes = { - name: PropTypes.string, }; diff --git a/frontend/components/NewPost.js b/frontend/components/NewPost.js new file mode 100644 index 0000000..60b408b --- /dev/null +++ b/frontend/components/NewPost.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormGroup, ControlLabel, FormControl, 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( +
    +
    + { this.title = input; }}/>
    +
    +