+ {
+ this.state.posts.map((post, i) => {
+ return (
+
+ );
+ }
+ }
+
+
+export default Feed;
diff --git a/frontend/components/Header.js b/frontend/components/Header.js
new file mode 100644
index 0000000..76ca778
--- /dev/null
+++ b/frontend/components/Header.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Navbar, Nav, NavDropdown, MenuItem } from 'react-bootstrap';
+
+const Header = ( { name } ) => {
+ return (
+
+
+ );
+ })
+ }
+
+
+
+ {/*
+
+
+ 
+
+
+
+ R/ HORIZONS
+
+
+ {/* */}
+
+
+
+ this.modalOpen()}>
+
+ Hey Fam!
+
+
+
+ {(this.state.signUp) ? (
+
+
+
+ {(this.state.signUp) ? (
+
+ ) : (
+
+
+
+
+ );
+ }
+}
+
+
+export default Login;
diff --git a/frontend/components/NewPost.js b/frontend/components/NewPost.js
new file mode 100644
index 0000000..e5a7650
--- /dev/null
+++ b/frontend/components/NewPost.js
@@ -0,0 +1,120 @@
+var React = require('react');
+var {Redirect} = require('react-router');
+var {FormGroup, FormControl, Col, Form, ControlLabel, HelpBlock} = require('react-bootstrap');
+var axios = require('axios');
+
+class NewPost extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ redirect: false,
+ title: '',
+ description: '',
+ link: '',
+ image: ''
+ };
+ }
+
+ postNewPost() {
+ axios.post('http://localhost:3000/api/post/new', {
+ postId: null,
+ img: this.state.link,
+ description: this.state.description,
+ title: this.state.title
+ }, {
+ withCredentials: true
+ })
+ .catch(e => {
+ console.log("Posting new post failed", e);
+ });
+ }
+ onSubmitPost() {
+ this.setState({
+ redirect: true
+ }, () => this.postNewPost());
+ }
+ onTitleChange(e) {
+ this.setState({
+ title: e.target.value
+ });
+ }
+ onDescriptionChange(e) {
+ this.setState({
+ description: e.target.value
+ });
+ }
+ onLinkChange(e) {
+ this.setState({
+ link: e.target.value
+ });
+ }
+ onImgSelect(e) {
+ this.setState({
+ image: e.target.value
+ });
+ }
+ render() {
+ function FieldGroup({ id, type, label, help }) {
+ return (
+
+
+
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+
+
+
+ )}
+
+
+ this.onLogin()} />)}
+
+
+
+
+ );
+ }
+}
+
+export default SideBar;
diff --git a/frontend/components/SubmitPost.js b/frontend/components/SubmitPost.js
new file mode 100644
index 0000000..c3098fd
--- /dev/null
+++ b/frontend/components/SubmitPost.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { Redirect } from 'react-router';
+
+class SubmitPost extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ redirect: false
+ };
+ }
+ newPostPage() {
+ this.setState({
+ redirect: true
+ });
+ }
+ render() {
+ return (
+
+ {
+ (this.state.redirect) ? (
+ );
+ }
+}
+
+
+export default SubmitPost;
diff --git a/frontend/containers/AppContainer.js b/frontend/containers/AppContainer.js
index 7c29205..5bbfaab 100644
--- a/frontend/containers/AppContainer.js
+++ b/frontend/containers/AppContainer.js
@@ -1,28 +1,39 @@
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 DevTools from './DevTools';
+import SideBar from '../components/SideBar';
+import Feed from '../components/Feed';
+import NewPost from '../components/NewPost';
-const AppContainer = ({ name }) => {
+
+import { toggleLoginModal } from '../actions/index';
+
+const AppContainer = ({ toggleLogin }) => {
return (
-
);
};
AppContainer.propTypes = {
- name: PropTypes.string,
+ toggleLogin: PropTypes.func
};
const mapStateToProps = (state) => {
return {
- name: state.name
+ state: state
};
};
-const mapDispatchToProps = (/* dispatch */) => {
+const mapDispatchToProps = (dispatch) => {
return {
+ toggleLogin: () => {dispatch(toggleLoginModal());}
};
};
diff --git a/frontend/containers/PostPage.js b/frontend/containers/PostPage.js
new file mode 100644
index 0000000..e6d9efc
--- /dev/null
+++ b/frontend/containers/PostPage.js
@@ -0,0 +1,72 @@
+var React = require('react');
+// var { Navbar, FormGroup, FormControl, Button, Checkbox, Col, Form, ControlLabel, HelpBlock} = require('react-bootstrap');
+var axios = require('axios');
+import Comment from '../components/Comment';
+import Header from '../components/Header';
+import Sidebar from '../components/SideBar';
+
+
+// This assumes we are passing in posts
+// Each post has: img (string url) and description
+
+
+class PostPage extends React.Component {
+ constructor() {
+ super();
+ this.state = {
+ post: {}
+ };
+ }
+
+ componentDidMount() {
+
+ console.log(this.props.match.params.id, 'ID parameter');
+ axios.get(`http://localhost:3000/api/post/`+ this.props.match.params.id,
+ {
+ withCredentials: true
+ })
+ .then((comments) => {
+ console.log(comments.data);
+ this.setState({
+ post: comments.data.postContents
+ });
+ })
+ .catch(e => {
+ console.log(e);
+ });
+ }
+ render() {
+ return (
+
+
+ );
+ }
+ }
+
+export default PostPage;
diff --git a/frontend/containers/Root.dev.js b/frontend/containers/Root.dev.js
index c0f8d69..9e3a138 100644
--- a/frontend/containers/Root.dev.js
+++ b/frontend/containers/Root.dev.js
@@ -1,20 +1,31 @@
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 Login from '../components/Login';
+import SubmitPost from '../components/SubmitPost';
+import { HashRouter, Route, Switch } from 'react-router-dom';
import AppContainer from './AppContainer.js';
-import DevTools from './DevTools';
+import PostPage from './PostPage.js';
+
export default function Root({ store }) {
return (
-
+
+
+
+
+
+ {this.state.post.title}
+
+ 
+
+ {this.state.post.description}
+ {/*
+ {this.state.post.children.map((comment) => {
+ return(
+
*/}
+
+
+
+ )
+ })}
+
-
-