connecting

functions/handlers/post.js

@@ -118,8 +118,13 @@ exports.getallPostsforFeed = (req, res) => {
     admin.firestore().collection('posts').get()
     .then((data) => {
         let posts = [];
+        
         data.forEach(function(doc) {
-            posts.push(doc.data());
+            posts.push( {
+                microBlogs: doc.data(),
+                id: doc.id,
+            })
+                 
         });
         return res.status(200).json(posts);
     })

twistter-frontend/src/App.js

@@ -33,8 +33,7 @@ import Delete from './pages/Delete';
 import writeMicroblog from './Writing_Microblogs.js';
 import editProfile from './pages/editProfile';
 import userLine from './Userline.js';
-import like from './Like.js';
+
-import quote from './Quote.js';
 import feed from './Feed.js';
 
 const theme = createMuiTheme(themeObject);
@@ -82,8 +81,6 @@ class App extends Component {
               </div>
 
               <Route exact path="/edit" component={editProfile} />
-              <Route exact path="/like" component={like} />
-              <Route exact path="/quote" component={quote} />
               <Route exact path="/userline" component={userLine} /> 
 
               <AuthRoute exact path="/" component={home}/>

twistter-frontend/src/Feed.js

@@ -5,6 +5,10 @@ import Box from '@material-ui/core/Box';
 //import {connect } from 'react-redux';
 //import { likePost, unlikePost } from '../redux/actions/dataActions';
 //import PropTypes from 'prop-types';
+import Like from "./Like.js";
+import Route from 'react-router-dom/Route';
+
+import Quote from "./Quote.js";
 
 class Feed extends Component {
     
@@ -13,19 +17,21 @@ class Feed extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            microBlogs: []
+            microBlogs: [],
+            
         };
+
+        
     }
 
      componentDidMount() {
 
-        axios.get('/getallPostsforFeed')
+        axios.get("https://us-central1-twistter-e4649.cloudfunctions.net/api/getallPostsforFeed")
-           .then(res => {
+           .then((res) => {
                const post = res.data;
                this.setState({microBlogs : post})
 
            })            
-            
    }  
 
    render() {
@@ -34,6 +40,7 @@ class Feed extends Component {
     const sortedPosts = (this.state.microBlogs).sort((a,b) =>
     -a.createdAt.localeCompare(b.createdAt)
     )
+
        return(
         <div>
         <div style={{fontsize: "13px", marginLeft: "30%", textAlign: "left", }}>
@@ -48,10 +55,18 @@ class Feed extends Component {
                                                       " " + microBlog.createdAt.substring(11,19)}
                                                       <br></br>Who wrote the microBlog: {microBlog.userHandle}
                                                       <br></br>Body of post: {microBlog.body}
+                                                      <br></br>ID of post: {microBlog.id}
                                                       <br></br>Tagged topics: {microBlog.microBlogTopics.join("," + " ")}
                                                       <br></br><br></br><br></br>
+                                                      <div className="buttons">
 
-                                                      <span>Likes: {microBlog.likeCount}</span><br></br><br></br><br></br><br></br>
+                                                        <Like></Like>
+
+                                                      <span>Likes: {microBlog.likeCount}</span>
+                                                         <Quote></Quote>
+                                                        
+                                                        <br></br><br></br><br></br><br></br>
+                                                      </div>
                                                                      
             </p>)} 
             </p>

twistter-frontend/src/Like.js

@@ -9,19 +9,41 @@ class Like extends Component {
         super(props);
         this.state = {
             like : false,
-            count : 0
+            Id : null
         };
 
 
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
-    handleSubmit() {
+    handleSubmit = post =>  {
+
+
         this.setState({
             like: !this.state.like
           });
-          const LikedPost = {
 
+          axios.get("https://us-central1-twistter-e4649.cloudfunctions.net/api/getallPostsforFeed")
+           .then((res) => {
+               const postData = res.data;
+               this.setState({Id: postData.id})
+
+           })
+
+          if(this.state.like == false)
+          {
+            
+            axios.get(`/putPost/${this.state.Id}/like`)
+            .then((res) => {
+                console.log(res.data);
+            })
+          }
+          else
+          {
+          axios.get(`/putPost/${this.state.Id}/unlike`)
+                .then((res) => {
+                    console.log(res.data);
+                })
             } 
 
     }

twistter-frontend/src/Quote.js

@@ -2,10 +2,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';
-import DropdownButton from 'react-bootstrap/DropdownButton'
+
-import Dropdown from 'react-bootstrap/Dropdown'
-import Modal from 'react-bootstrap/Modal'
-import Button from 'react-bootstrap/Button'
 
 
 
@@ -31,10 +28,10 @@ class Quote extends Component {
     }
     render() {
         return(
-            <DropdownButton size="sm" variant="secondary" title="Quote Microblog">
+            <div>
-                <Dropdown.Item size="sm" onClick={this.handleSubmit} href="#/with-comment">Quote with comment</Dropdown.Item>
+                <button onClick={this.handleSubmit}>Quote with comment</button>
-                <Dropdown.Item size="sm" onClick={this.handleSubmit2} href="#/without-comment">Quote without comment</Dropdown.Item>
+                <button onClick={this.handleSubmit2}>Quote without comment</button>
-            </DropdownButton>
+            </div>
         )
     }
 }