completed with test

src/controllers/comments.js

@@ -0,0 +1,44 @@
+const {Comments, Posts, Users} = require('../db/models')
+
+async function createComment(postId, userId, title, body){
+    return await Comments.create({
+        postId,
+        userId,
+        title,
+        body
+    })
+}
+
+async function findAllComments(query){
+    const postId = query.postId
+    return await Comments.findAll({
+        include: [ Users],
+        where:{postId}
+    })
+}
+module.exports = {
+    createComment,
+    findAllComments
+}
+/*
+async function test(){
+    console.log(
+        await createComment(
+            1,
+            1,
+            'gogo',
+            'tech is awosome'
+        )
+    )
+
+}
+test()*/
+/*
+async function test(){
+    const all = await findAllComments(1)
+    all.forEach(t=>{
+        console.log(`comment id: ${t.id} title: ${t.user.username} body: ${t.body}`)
+    })
+}
+test()
+*/

src/controllers/posts.js

@@ -14,7 +14,8 @@ async function createNewPost(userId, title, body) {
  * showAllPosts({username: ''})
  * showAllPosts({title: ''})
  */
-async function findAllPosts(query) {
+async function findAllPosts(query) {  
+  // console.log("from controller post pooooooooooooo-:",typeof query)
   let where = {}
   if (query.userId) { where.userId = query.userId }
 
@@ -48,11 +49,11 @@ async function task() {
   //     'Some body example here as well'
   //   )
   // )
-  const posts = await showAllPosts()
+  const posts = await findAllPosts(1)
   for (let p of posts) {
     console.log(`${p.title}\nauthor: ${p.user.username}\n${p.body}\n==========\n`)
   }
 }
 
 task()
-*/
+*/

src/db/models.js

@@ -5,6 +5,8 @@ if (process.env.NODE_ENV == 'testing') {
   db = new Sequelize({
     dialect: 'sqlite',
     storage: ':memory:',
+    // storage: __dirname+'/../../test/test.db'
+
   })
 } else {
   db = new Sequelize({

src/public/app/all-posts.js

@@ -1,25 +1,78 @@
 function loadPosts() {
+  const user = JSON.parse(window.localStorage.user)
+  let display='show'
   $.get('/api/posts', (posts) => {
     for (let p of posts) {
       $('#posts-container').append(
         $(`
         <div class="col-4">
           <div class="card m-2">
-            <div class="card-body">
+            <div class="card-body" id="card">
               <h5 class="card-title">${p.title}</h5>
               <h6 class="card-subtitle mb-2 text-muted">${p.user.username}</h6>
               <p class="card-text">
                 ${p.body.substr(0, 200)}
                 <a href="#">...read more</a>
-              </p>
-              <a href="#" class="card-link">Comment</a>
-              <a href="#" class="card-link">Like</a>
+              </p> 
+
+              <div class="form-inline" id ="collapseExample">
+                <input id="comment-${p.id}" type="text" class="form-control mb-2 mr-sm-2"  placeholder="${user.username}">
+                <button type="submit" id= "${p.id}" class=" btn-primary mb-2 btn-sm">comment</button>
+                <button type="submit" id= "${display}-${p.id}" class="btn-primary mb-2 btn-sm">show</button>
+              </div>
+              <div id="commentListId-${p.id}">
+              </div>
             </div>
           </div>
         </div>
-
         `)
       )
+      /*handle post req*/
+      $(`#${p.id}`).click(()=>{
+        const postId = p.id
+        const userId = user.id
+        const title = user.username
+        const body = $(`#comment-${p.id}`).val()
+
+        $.post('/api/comments', {postId, userId, title, body}, (data)=>{
+          console.log('ok sent', data.postId)
+        })
+      })
+      /*handle get req*/
+        function comments(){
+          $.get(`/api/comments?postId=${p.id}`, (comments)=>{
+            $(`#commentListId-${p.id}`).empty()
+            for(let c of comments){
+              $(`#commentListId-${p.id}`).append(
+                $(`
+                <div class="card" style="width: 18rem;" id="comment-card">
+                  <div class="card-body">
+                    <h6 class="card-subtitle mb-2 text-muted">${c.user.username}</h6>
+                    <p class="card-text">${c.body}</p>
+                  </div>
+                </div>
+                `)
+              )
+            }
+           })
+        }
+        /*Handling button click event*/
+        $(`#${display}-${p.id}`).click(()=>{
+          if(display==='show'){
+            comments()
+            $(`#commentListId-${p.id}`).show()
+            // console.log($(`#${display}-${p.id}`).text('hide'))
+            $(`#${display}-${p.id}`).text('hide')
+          display='hide'
+          }
+          else if(display==='hide'){
+            $(`#${display}-${p.id}`).text('show')
+            $(`#commentListId-${p.id}`).hide()
+            display='show'
+          }
+        })
+      /*end get req*/
     }
+    /*for loop end here*/
   })
-}
+}

src/public/app/common.css

@@ -10,6 +10,30 @@
   bottom: 0px;
   background-color: var(--light);
 }
-
+/* #inlineFormInputName2{
+  width: 100%;
+} */
+.btn-sm{
+  font-size: 0.75rem;
+}
+#comment{
+  font-size: 0.8rem;
+  height: 1.60rem;
+  width: 70%;
+}
+#comment-card{
+  font-size: 0.75rem;
+  padding: 0;
+}
+#comment-card .card-body{
+  padding:0.3rem;
+}
+#comment-card .card-body h6{
+  padding-top: 0.3rem;
+ font-size: 0.75rem;
+}
+#card{
+  padding-bottom: 0;
+}
 #content {
 }

src/public/app/my-posts.js

@@ -1,6 +1,6 @@
 function loadMyPosts() {
   const userId = JSON.parse(window.localStorage.user).id
-
+  console.log(userId)
   $.get(`/api/posts?userId=${userId}`, (posts) => {
     for (let p of posts) {
       $('#posts-container').append(
@@ -19,7 +19,7 @@ function loadMyPosts() {
             </div>
           </div>
         </div>
-        
+
         `)
       )
     }

src/public/components/all-posts.html

@@ -1,11 +1,10 @@
 <div class="container my-2">
   <h1 class="h1 text-center">Recent Posts</h1>
-
   <div class="row" id="posts-container">
   </div>
 </div>
 
-<script src="/app/my-posts.js"></script>
+<script src="/app/all-posts.js"></script>
 <script>
   loadPosts()
 </script>

src/public/components/my-posts.html

@@ -5,7 +5,7 @@ <h1 class="h1 text-center">Recent Posts</h1>
   </div>
 </div>
 
-<script src="/app/all-posts.js"></script>
+<script src="/app/my-posts.js"></script>
 <script>
   loadMyPosts()
 </script>

src/public/index.html

@@ -19,4 +19,26 @@
   <div id="content"></div>
   <div id="footer"></div>
 </body>
-</html>
+</html>
+
+
+<!--
+  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Comment</a> 
+
+<form class="form-inline" id ="collapseExample">
+  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
+  <button type="submit" id="send" class="btn btn-primary mb-2 ">post</button>
+</form> 
+-->
+<!-- 
+<a href="#" class="card-link">Comment</a>
+<a href="#" class="card-link">Like</a> 
+
+<div class="card" style="width: 18rem;" id="comment-card">
+    <div class="card-body">
+      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    </div>
+  </div>
+-->
+

src/routes/posts/comments.js

@@ -1,7 +1,25 @@
 const { Router } = require('express')
+const {findAllComments, createComment} = require('../../controllers/comments')
 
 const commentsRoute = Router()
-
+//post req router
+commentsRoute.post('/', async (req,res)=>{
+  // console.log(`POST /api/comments`, req.body)
+  const {postId, userId, title, body} = req.body
+  if(!postId || !userId ||!title ||!body){
+    return res.status(400).send({
+      error: 'Need userid, title and body to create post'
+    })
+  }
+  const comment = await createComment(postId, userId, title, body)
+  res.status(201).send(comment)
+})
+//get req router to find all comments
+commentsRoute.get('/', async (req, res)=>{
+  const comments = await findAllComments(req.query)
+  res.status(200).send(comments)
+})
+//export
 module.exports = {
   commentsRoute
 }

src/routes/posts/index.js

@@ -8,7 +8,7 @@ const route = Router()
 
 route.get('/', async (req, res) => {
   const posts = await findAllPosts(req.query)
-
+  // console.log("from router post pooooooooooooo-:",req.query)
   res.status(200).send(posts)
 })
 

src/server.js

@@ -3,13 +3,15 @@ const express = require('express')
 const { db } = require('./db/models')
 const { usersRoute } = require('./routes/users')
 const { postsRoute } = require('./routes/posts')
+const { commentsRoute } = require('./routes/posts/comments')
 
 const app = express()
 app.use(express.json())
 app.use(express.urlencoded({extended: true}))
 
 app.use('/api/users', usersRoute)
 app.use('/api/posts', postsRoute)
+app.use('/api/comments', commentsRoute)
 app.use('/', express.static(__dirname + '/public'))
 
 db.sync()

test/controllers/comments.test.js

@@ -0,0 +1,33 @@
+const {expect} = require('chai')
+const {findAllComments, createComment} = require('../../src/controllers/comments')
+
+describe('controllers/comments', ()=>{
+    let createdComment = null
+    it('should create comment with postId, userId, title, body', async ()=>{
+        createdComment = await createComment(1, 1, 'testing comment title', 'testing comment body')
+        expect(createdComment).to.have.property('title')
+        expect(createdComment).to.have.property('body')
+        expect(createdComment).to.have.property('postId')
+        expect(createdComment).to.have.property('userId')
+        expect(createdComment.id).to.be.a('number')
+        expect(createdComment.userId).to.be.a('number')
+        expect(createdComment.postId).to.be.a('number')
+        expect(createdComment.title).to.be.a('string')
+        expect(createdComment.body).to.be.a('string')
+    })
+
+    it('should find all comment by postId', async ()=>{
+        let query ={
+            postId: createdComment.postId
+        }
+        let allComments = await findAllComments(query)
+        let arrObj = []
+        for(let p of allComments){
+            arrObj.push(p)
+        }
+        let len=arrObj.length
+        expect(arrObj[len-1].title).to.equal(createdComment.title)
+        expect(arrObj[len-1].body).to.equal(createdComment.body)
+
+    })
+})