add comment single view

zoomment · Jan 25, 2021 · 7bb7a6b · 7bb7a6b
1 parent 1f52926
commit 7bb7a6b
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,9 @@
     "cors": "^2.8.5",
     "dotenv-safe": "^8.2.0",
     "express": "^4.17.1",
+    "express-handlebars": "^5.2.0",
     "handlebars": "^4.7.6",
+    "handlebars-dateformat": "^1.1.1",
     "moment": "^2.29.1",
     "mongoose": "^5.10.11",
     "nodemailer": "^6.4.15",

diff --git a/src/api/comments/controller.js b/src/api/comments/controller.js
@@ -26,3 +26,12 @@ export const remove = asyncRoute(async (req, res) => {
 
   res.sendStatus(deletedCount > 0 ? 200 : 400);
 });
+
+export const view = asyncRoute(async (req, res) => {
+  const comment = await Comment.findById(req.params.id);
+  if (comment) {
+    res.render('comment', comment);
+  } else {
+    res.render('404', comment);
+  }
+});
diff --git a/src/api/comments/index.js b/src/api/comments/index.js
@@ -1,12 +1,14 @@
 import { Router } from 'express';
-import { add, list, remove } from './controller';
+import { view, add, list, remove } from './controller';
 
 const router = new Router();
 
 router.get('/', list);
 
 router.post('/', add);
 
+router.get('/:id', view);
+
 router.delete('/:id', remove);
 
 router.get('/:id/delete', remove);

diff --git a/src/app.js b/src/app.js
@@ -1,15 +1,21 @@
 import mongoose from './services/mongoose';
-import bodyParser from 'body-parser';
+import hbs from './services/handlebars';
 import cookieParser from 'cookie-parser';
+import bodyParser from 'body-parser';
 import express from 'express';
 import http from 'http';
 import cors from 'cors';
+import path from 'path';
 import api from './api';
 
 const app = express();
 
 mongoose.connect(process.env.MONGODB_URI);
 
+app.engine('hbs', hbs.engine);
+app.set('view engine', 'hbs');
+app.set('views', path.join(__dirname, 'views'));
+
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(bodyParser.json());
 app.use(cookieParser());

diff --git a/src/services/handlebars/index.js b/src/services/handlebars/index.js
@@ -0,0 +1,11 @@
+import exphbs from 'express-handlebars';
+import dateFormat from 'handlebars-dateformat';
+
+const handlebars = exphbs.create({
+  extname: 'hbs',
+  helpers: {
+    dateFormat
+  }
+});
+
+export default handlebars;
diff --git a/src/views/404.hbs b/src/views/404.hbs
@@ -0,0 +1,8 @@
+<h1>Page not found :/</h1>
+<style>
+	h1{
+		color: rgb(104, 122, 134);
+		text-align: center;
+		margin-top: 50px;
+	}
+</style>
diff --git a/src/views/comment.hbs b/src/views/comment.hbs
@@ -0,0 +1,79 @@
+<a class="website" href="{{pageUrl}}">← Back to Article</a>
+<div class="user">
+	<img class="avatar" src="https://www.gravatar.com/avatar/{{owner.gravatar}}?d=monsterid" alt="{{owner.name}}">
+	<div class="title">
+		<span class="username">{{owner.name}}</span>•
+		<span class="date">{{dateFormat createdAt 'DD MMM YYYY - HH:mm'}}</span>
+	</div>
+	<h1 class="body">{{body}}</h1>
+</div>
+<style>
+	*{
+		box-sizing: border-box;
+		line-height: 1;
+		font-size: 0;
+		padding: 0;
+		margin: 0;
+	}
+	body {
+		max-width: 600px;
+		background: #fff;
+		margin: 50px auto 0 auto;
+	}
+	a {
+		text-decoration: none;
+	}
+	.website {
+		font-size: 20px;
+		font-weight: 600;
+		margin-bottom: 25px;
+		display: block;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.avatar {
+		width: 50px;
+		float: left;
+		height: 50px;
+		border-radius: 4px;
+		margin-right: 10px;
+	}
+	.title {
+		display: flex;
+		font-size: 8px;
+		line-height: 1;
+		margin-bottom: 4px;
+		-moz-box-align: center;
+		align-items: center;
+		flex-direction: row;
+		color: rgb(104, 122, 134);
+	}
+	.user {
+		clear: both;
+		margin-bottom: 24px;
+	}
+	.username {
+		font-size: 12px;
+		font-weight: 700;
+		margin-right: 5px;
+		letter-spacing: 0.5px;
+		color: rgb(104, 122, 134);
+	}
+	.date {
+		font-size: 12px;
+		font-weight: 500;
+		margin-left: 5px;
+		letter-spacing: 0px;
+		color: rgb(104, 122, 134);
+	}
+	.body {
+		font-size: 15px;
+		font-weight: 400;
+		min-height: 24px;
+		line-height: 24px;
+		letter-spacing: 0.3px;
+		white-space: break-spaces;
+		color: rgb(42, 46, 46);
+	}
+</style>
diff --git a/src/views/layouts/main.hbs b/src/views/layouts/main.hbs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
+    <title>FooComment</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  </head>
+  <body>
+    {{{body}}}
+  </body>
+</html>