creating articles

Signed-off-by: Arnav Gupta <[email protected]>

Author: championswimmer

Lecture17/blog-project/routes/pages/index.js

@@ -1,19 +1,35 @@
 const { Router } = require('express')
-const { getAllArticles } = require('../../controllers/articles')
+const { getAllArticles, createArticle } = require('../../controllers/articles')
+const { getAllUsers } = require('../../controllers/users')
 
 const route = Router()
 
 route.get('/', async (req, res) => {
 
   const articles = await getAllArticles()
+  const users = await getAllUsers()
+
   res.render('home', {
     title: 'Home',
-    articles,
+    articles, users
   })
 })
 
+route.post('/articles', async (req, res) => {
+  try {
+    const article = await createArticle(req.body.author_id, req.body.title, req.body.subtitle, req.body.body)
+    return res.redirect('/')
+  } catch (e) {
+    return res.status(500).send({
+      error: e,
+    })
+  }
+})
+
 route.get('/article', (req, res) => {
   res.render('article', { title: 'Article' })
 })
 
+route.use('/users', require('./users'))
+
 module.exports = route

Lecture17/blog-project/routes/pages/users.js

@@ -0,0 +1,26 @@
+const { Router } = require('express')
+const { getAllUsers, createUser } = require('../../controllers/users')
+
+const route = Router()
+
+route.get('/', async (req, res) => {
+
+  const users = await getAllUsers()
+  res.render('users', {
+    title: 'Users',
+    users
+  })
+})
+
+route.post('/', async (req, res) => {
+  try {
+    const user = await createUser(req.body.name, req.body.email)
+    return res.redirect('/users')
+  } catch (e) {
+    return res.status(500).send({
+      error: e,
+    })
+  }
+})
+
+module.exports = route

Lecture17/blog-project/views/home.hbs

@@ -7,14 +7,19 @@
 
   <div class="container">
 
-    <h1 class="text-center"> Articles </h1>
+    <h1 class="text-center"> {{title}} </h1>
 
+
+    {{!-- New Article Form --}}
+    <h2>Add an Article</h2>
+    {{> new_article_form}}
+
+    {{!-- Article List --}}
+    <h2> Read Articles </h2>
     {{#each articles as |article|}}
       {{> article_card article}}
     {{/each}}
 
   </div>
-
-  <p>This is a blog</p>
 </body>
 </html>

Lecture17/blog-project/views/partials/new_article_form.hbs

@@ -0,0 +1,41 @@
+<form class="row" action="/articles" method="POST">
+  <div class="form-group col-12">
+    <label for="title">Heading</label>
+    <input name="title"
+          type="text" class="form-control"
+          id="title" placeholder="Heading">
+  </div>
+
+  <div class="form-group col-12">
+    <label for="subtitle">Article Subheading</label>
+    <input name="subtitle"
+          type="text" class="form-control"
+          id="subtitle" placeholder="Article Subheading">
+  </div>
+
+  <div class="form-group col-12">
+    <label for="body">Article Body</label>
+    <textarea name="body"
+          class="form-control" id="body"
+          placeholder="Write your article here"></textarea>
+  </div>
+
+  <div class="form-group col-10">
+    <div class="row">
+      <label for="author" class="col-2">Author</label>
+      <select name="author_id" class="custom-select col-8" id="author">
+        {{#each users as |user|}}
+        <option value={{user.id}}>{{user.name}}</option>
+        {{/each}}
+      </select>
+    </div>
+
+  </div>
+
+
+  <div class="col-2" style="display: flex; align-items: end">
+    <button type="submit" class="btn btn-primary mb-3">Submit</button>
+  </div>
+
+
+</form>

Lecture17/blog-project/views/partials/new_user_form.hbs

@@ -0,0 +1,17 @@
+<form class="row" action="/users" method="POST">
+  <div class="form-group col-5">
+    <label for="name">Enter a name</label>
+    <input name="name" type="text" class="form-control" id="name" placeholder="User's Name">
+  </div>
+
+  <div class="form-group col-5">
+    <label for="email">Email address</label>
+    <input name="email" type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
+    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+  </div>
+
+  <div class="col" style="display: flex; align-items: center">
+    <button type="submit" class="btn btn-primary mb-2">Submit</button>
+  </div>
+
+</form>

Lecture17/blog-project/views/users.hbs

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+{{> head}}
+<body>
+
+  {{> navbar}}
+
+  <div class="container">
+
+    <h1 class="text-center"> {{title}} </h1>
+
+    {{!-- New User Form --}}
+    {{> new_user_form}}
+
+    {{!-- List of Users --}}
+    <div class="row">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Email</th>
+          </tr>
+        </thead>
+        {{#each users as |user|}}
+        <tr>
+          <td>{{user.id}}</td>
+          <td>{{user.name}}</td>
+          <td>{{user.email}}</td>
+        </tr>
+        {{/each}}
+      </table>
+    </div>
+
+  </div>
+
+</body>
+</html>