Merge branch 'master' into edit-profile-frontend

twistter-frontend/package.json

@@ -24,5 +24,17 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy": "https://us-central1-twistter-e4649.cloudfunctions.net/api"
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+   "proxy": "https://us-central1-twistter-e4649.cloudfunctions.net/api"
 }

twistter-frontend/src/App.js

@@ -5,6 +5,7 @@ import './App.css';
 
 import { BrowserRouter as Router } from 'react-router-dom';
 import Route from 'react-router-dom/Route';
+import NavBar, { Navbar } from './components/layout/NavBar';
 
 // Pages
 import home from './Home.js';
@@ -13,12 +14,15 @@ import login from './Login.js';
 import user from './pages/user';
 import writeMicroblog from './Writing_Microblogs.js';
 import edit from './pages/edit.js';
+import userLine from './Userline.js';
 
 class App extends Component {
   render() {
     return (
       <Router>
-
+        <div className='container'>
+          <Navbar />
+        </div>
 
         <div className="app">
           <Route exact path="/" component={home}/>
@@ -27,6 +31,7 @@ class App extends Component {
           <Route exact path="/user" component={user}/>
           <Route exact path="/home" component={writeMicroblog}/>
           <Route exact path="/edit" component={edit}/>
+          <Route exact path="/userline" component={userLine}/>
         </div>
 
       </Router>

twistter-frontend/src/Login.js

@@ -5,8 +5,6 @@ import './App.css';
 import logo from './images/twistter-logo.png';
 import TextField from '@material-ui/core/TextField';
 
-import axios from 'axios';
-
 class Login extends Component {
   render() {
     return (

twistter-frontend/src/Register.js

@@ -4,8 +4,6 @@ import './App.css';
 import logo from './images/twistter-logo.png';
 import TextField from '@material-ui/core/TextField';
 
-//import axios from 'axios';
-
 class Register extends Component {
   render() {
     return (

twistter-frontend/src/Userline.js

@@ -0,0 +1,37 @@
+import React, { Component } from "react";
+import { BrowserRouter as Router } from 'react-router-dom';
+import Route from 'react-router-dom/Route';
+import axios from 'axios';
+
+class Userline extends Component {
+
+    constructor(props)
+    {
+        super(props);
+        this.state = {
+            microBlogs : []
+        }
+        
+    }
+
+     componentDidMount() {
+
+         axios.get('http://localhost:5001/twistter-e4649/us-central1/api/getallPostsforUser')
+            .then(res => {
+                const post = res.data;
+                this.setState({microBlogs : post})
+
+            }) 
+
+            
+     }
+
+     render() {
+        return (
+            <ul>
+                { this.state.microBlogs.map(microBlog => <p>{microBlog.body}</p>)}
+            </ul>
+        )
+     }
+}
+export default Userline;

twistter-frontend/src/Writing_Microblogs.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router } from 'react-router-dom';
 import Route from 'react-router-dom/Route';
+import axios from 'axios';
 
 
 class Writing_Microblogs extends Component {
@@ -25,8 +26,22 @@ class Writing_Microblogs extends Component {
     }
 
     handleSubmit(event) {
-        alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
+        // alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
+        
+        const response = axios.post(
+            'http://localhost:5001/twistter-e4649/us-central1/api/putPost',
+            { body: this.state.value,  
+              userHandle: "new user",
+              userImage: "bing-url",
+              microBlogTitle: this.state.title 
+            
+            },
+            { headers: { 'Content-Type': 'application/json'} }
+            
+        )
+        console.log(response.data);
         event.preventDefault();
+        this.setState({value: '', title: '',characterCount: 10})
     }
 
     handleChangeforPost(event) {
@@ -37,6 +52,7 @@ class Writing_Microblogs extends Component {
         const charCount = event.target.value.length
         const charRemaining = 10 - charCount
         this.setState({characterCount: charRemaining })
+    
     }
 
 

twistter-frontend/src/components/layout/NavBar.js

@@ -10,8 +10,8 @@ export class Navbar extends Component {
         return (
             <AppBar>
                 <ToolBar>
-                    <Button component={ Link } to='/user'>
-                        User
+                    <Button component={ Link } to='/'>
+                        Home
                     </Button>
                     <Button component={ Link } to='/login'>
                         Login
@@ -19,9 +19,7 @@ export class Navbar extends Component {
                     <Button component={ Link } to='/register'>
                         Register
                     </Button>
-                    <Button component={ Link } to='/'>
-                        Home
-                    </Button>
+                    
                 </ToolBar>
             </AppBar>
         )