Social Media Project Completed

package.json

@@ -12,14 +12,26 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.17.1",
+    "mysql": "^2.18.1",
     "mysql2": "^2.1.0",
-    "sequelize": "^5.21.7",
+    "sequelize": "^5.21.11",
     "sqlite3": "^4.2.0"
   },
   "devDependencies": {
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
     "mocha": "^7.2.0",
     "nyc": "^15.0.1"
-  }
+  },
+  "directories": {
+    "test": "test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shivam7374/Social_Media_Sample_Project_2020_May.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shivam7374/Social_Media_Sample_Project_2020_May/issues"
+  },
+  "homepage": "https://github.com/shivam7374/Social_Media_Sample_Project_2020_May#readme"
 }

src/controllers/comments.js

@@ -0,0 +1,30 @@
+
+const { Posts, Comments } = require('../db/models')
+
+async function createNewComment(postId, title, body) {
+  const comment = await Comments.create({
+    title,
+    body,
+    postId,
+  })
+
+  return comment
+}
+
+async function findAllCommentsbyPosts(id) {
+    // TODO: Handle query params
+    const posts = await Posts.findAll( {
+         where:{
+            id
+          }, include: [ Comments ]  
+      }
+    )
+
+    return posts
+  }
+
+  module.exports = {
+    createNewComment,
+    findAllCommentsbyPosts
+  }
+

src/public/app/all-posts.js

@@ -12,7 +12,7 @@ function loadPosts() {
                 ${p.body.substr(0, 200)}
                 <a href="#">...read more</a>
               </p>
-              <a href="#" class="card-link">Comment</a>
+              <a href="http://localhost:8483/api/posts/comments/${p.id}/endpoint" class="card-link">Comment</a>
               <a href="#" class="card-link">Like</a>
             </div>
           </div>

src/public/app/comment.js

@@ -0,0 +1,52 @@
+function loadPostsComments() {
+    let start, end
+    start = (document.URL.search("comments/") + 9)
+    end = document.URL.search("/endpoint")
+    let id = parseInt(document.URL.slice(start, end))
+    $.get('http://localhost:8483/api/posts/comments/' + id, (post) => {
+      console.log("++++++++++++++++++")
+      console.log(post)
+      console.log("++++++++++++++++++")// working till here
+      {
+        $('#posts-container').append(
+          $(`
+            <div class="col-4">
+              <div class="card m-2">
+                <div class="card-body">
+                  <h5 class="card-title" style="text-align: initial;">${post[0].title}</h5>
+                  <h6 class="card-subtitle mb-2 text-muted" style="text-align: initial;">${post[0].title}</h6>
+                  <p class="card-text" style="text-align: initial;">
+                    ${post[0].body}
+                    <a href="#">...read more</a>
+                  </p>
+                  <a href="#" class="card-link">Like</a>
+                </div>
+              </div>
+            </div>
+            <br><br><h1><div class='col-4'>COMMENTS</div></h1>               
+
+            `)
+        )
+      }
+      for (let p of post[0].comments) {
+        $('#posts-container').append(
+          $(`
+
+            <br>
+
+              <div class="card">
+      <div class="card-header">
+        ${p.title}
+      </div>
+      <div class="card-body">
+        <p class="card-text">${p.body}</p>
+
+      </div>
+    </div>
+
+
+            `)
+        )
+      }
+    })
+  }

src/public/app/my-posts.js

@@ -14,7 +14,7 @@ function loadMyPosts() {
                 ${p.body.substr(0, 200)}
                 <a href="#">...read more</a>
               </p>
-              <a href="#" class="card-link">Comment</a>
+              <a href="http://localhost:8483/api/posts/comments/${p.id}/endpoint" class="card-link">Comment</a>
               <a href="#" class="card-link">Like</a>
             </div>
           </div>

src/public/app/write-post.js

@@ -1,11 +1,12 @@
-$('#write-btn').click(() => {
+$("#write-btn").click(() => {
   const userId = JSON.parse(window.localStorage.user).id
-  const title = $('#p-title').val()
-  const body = $('#p-body').val()
+  const title = $("#p-title").val()
+  const body = $("#p-body").val()
 
-  $.post('/api/posts', { userId, title, body }, (data) => {
-    $('#content').load('/components/my-posts.html')
-    $('.nav-item .active').removeClass('active')
-    $("[data-components='my-posts']").addClass('active')
+  $.post("/api/posts", { userId, title, body }, async (data) => {
+    // console.log(data)
+    await $("#content").load("/components/my-posts.html")
+    await $(".nav-item .active").removeClass("active")
+    await $("[data-components='my-posts']").addClass("active")
   })
 })

src/public/components/all-posts.html

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

src/public/components/comment.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="/app/common.css">
+    <script defer src="/app/common.js"></script>
+
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+      <a class="navbar-brand" href="http://localhost:8483">MockSocial</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
+          <li class="nav-item active">
+            <a class="nav-link" href="http://localhost:8483" data-component="all-posts">
+              Home
+            </a>
+        </ul>
+      </div>
+    </nav>
+
+
+
+
+    <div class="container my-2">
+        <h1 class="h1 text-center">Post With Comments</h1>
+
+        <div class="row" id="comment-container">
+        </div>
+      </div>
+      <script src="http://code.jquery.com/jquery-3.4.1.js"></script>
+      <link rel="stylesheet" href="/css/bootstrap.css">
+  <script src="/js/popper.js"></script>
+  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.js" ></script> -->
+  <script src="/js/bootstrap.js"></script>
+  <script src="/app/comment.js"></script>
+      <!-- /media/singla/New Volume/Github Projects/Mock-Message-Site/Social-Media-Project/src/public -->
+      <script>
+      loadPostsComments()
+      </script>
+      </head>
+      <body>
+        <div id="posts-container"  style="text-align: -webkit-center;">
+        </div>
+        <div class="container my-2">
+          <h1 class="h1 text-center">Write Comments</h1>
+
+          <!-- Write Post form -->
+          <form action="/api/posts/comments" method="POST">
+            <div class="form-group">
+              <label>Post Id</label>
+              <input type="text" class="form-control" name="postId">
+            </div>
+            <div class="form-group">
+              <label>Title</label>
+              <input type="text" class="form-control" name="title">
+            </div>
+            <div class="form-group">
+              <label>Body</label>
+              <input type="text" class="form-control" name="body">
+            </div>
+            <div class="form-group form-check">
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+          </form>
+        </div>
+        <div id="footer"></div>
+
+</body>
+</html>

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/routes/posts/comments.js

@@ -1,7 +1,37 @@
 const { Router } = require('express')
+const {
+  createNewComment,findAllCommentsbyPosts
+} = require('../../controllers/comments')
+const path=require('path')
 
-const commentsRoute = Router()
+
+const route = Router()
+
+route.get('/:id', async (req, res) => {
+  const posts = await findAllCommentsbyPosts(req.params.id)
+  res.status(200).send(posts)
+})
+
+route.post('/', async (req, res) => {
+  // console.log("************")
+  // console.log(req.body)
+  // console.log("************")
+  const { postId, title, body } = req.body
+
+  if ((!postId) || (!title) || (!body)) {
+    return res.status(400).send({
+      error: 'Need postId, title and body to create post'
+    })
+  }
+
+  const post = await createNewComment(postId, title, body)
+  res.status(201).send(post)
+})
+route.get('/:id/endpoint', async (req,res)=>{
+  res.sendFile(path.join(__dirname,'../../public/components','comment.html'))
+  // /media/singla/New Volume/Github Projects/Mock-Message-Site/Social-Media-Project/src
+})
 
 module.exports = {
-  commentsRoute
+  commentsRoute:route
 }

src/server.js

@@ -3,19 +3,22 @@ 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.js')
+
 
 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/posts/comments', commentsRoute)
 app.use('/', express.static(__dirname + '/public'))
 
 db.sync()
   .then(() => {
-    app.listen(8383, () => {
-      console.log('server started on http://localhost:8383')
+    app.listen(8483, () => {
+      console.log('server started on http://localhost:8483')
     })
   })
   .catch((err) => {