🚀 Release 1.1 - Fix UI bugs and add tag feature (#70)

* Test commit for sahildev * test commit for rutudev * Initial test commit for tanmaydev * Test commit * 💩 add authentication * 🗃️ Add scripts for /create and /list of blogs * 🗃️ Add scripts for /update and /delete of blogs * ➕ Add body-parser dependency * added landing login reg pages * 💄 Add create view * 🚧 Add create and landing view and backend code * 💫 Add logo * Merge rutudev * 🎨 Structure blog routes * 🚚 Restructure auth routes #4 * 🚚 Restructure auth routes #4 * 🚚 Restructure auth routes #4 * 👽 Add auth middleware for every blog crud operation #6 * 🗃️ Resolve deprecation warning * ✅ correct auth middleware * 💄 Change in Register and login page #5 * 🗃️ Generalize database name #10 * 🐛 Login bug resolve * 💄 Add tui editor in create view #3 * 🔧 password validate * 💩 Add script for create blog * 🚧 validations * ✨ Update create blog script * 🚧 validations * 🍻 Done validations #15 #12 * ✨ Render Blog on seperate route * ✨ Implement back button #18 * 📱 Login view and validations * 🔥 Remove a temporary file * 🐛 Fix UI bugs #18 #21 * 🐛 Fix footer in log and reg #21 * commit * 💄 Connect landing to auth pages * 💄 Error message styling in auth pages #28 * ✨ Add partial views for blog cards #2 * 🐛 Fix route and changed file name #30 * ✨ Add explore page * Changes Logout #32 * ⚡ redirects * 💩 Connect user and blog * Connect user and blog schemas * Iss33 (#36) * 📝 Add cover image and badges #33 * 📝 Add steps to run locally #33 * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * ♻️ Remove typo * 🐛 Fix login and redirect page bug * ⚡ Secret in .env * ♻️ Remove comments and extra code #37 * 🗃️ Add author field in blogSchema * 💄 Add author name on card #42 * ♻️ Redirect to explore after login * ✨ Explore page patch * ✨ Add functionality to create button * ✅ myblogs #45 * 🔨 removes myblog test #45 * ✨ Frontend my blogs #50 * 💄 update ui for frontend myblogs #50 * ✨ Add edit and delete functionality to blogs * 👽 Integrate mailchimp * ⚡ adds 404 page * ✨ Add navbar dropdown and avatar #55 * ➕ Add migrate-mongo dependency * 📝 Update documentation * 🐛 Patch * ♻️ Refactor API to get latest blogs first * 🔒 Add DB_URI in env * 💄 Add Date in Cards UI * ✨ Fix footer in landing * 💄 Render tags on explore and myblogs * 💄 Add chips input in update and render blogs categorized by tags * 💄 Fix UI bugs in update view Co-authored-by: sahilambre <sahilws111@gmail.com> Co-authored-by: Rutu <barve.rutu@gmail.com> Co-authored-by: Rutu <62687761+rutu363@users.noreply.github.com> Co-authored-by: Sahil Ambre <59484827+sahilambre@users.noreply.github.com>
tanmayc07 · Nov 22, 2020 · 5c2d7ff · 5c2d7ff
1 parent 4f9042b
commit 5c2d7ff
Show file tree

Hide file tree

Showing 13 changed files with 651 additions and 371 deletions.
diff --git a/controllers/blogcrud.controllers.js b/controllers/blogcrud.controllers.js
@@ -5,48 +5,63 @@ const userModel = require("../models/user/User");
 module.exports = {
   createForm: function (req, res) {
     let user = {
-      id: req.userid
-    }
-    res.render("create", {user:user});
+
+      id: req.userid,
+    };
+    res.render("create", { user: user });
   },
   createData: function (req, res) {
     const inputData = req.body;
     const userid = req.userid;
-    userModel.getOneUser(userid, function(username){
-      inputData.author = username
+    userModel.getOneUser(userid, function (username) {
+      inputData.author = username;
+
       blogModel.createBlog(req, inputData, function (data) {
         userModel.updateBlog(req, data, function (data) {
           res.json(data);
         });
       });
-    })
+
+    });
   },
   listMine: function (req, res) {
     const inputData = req.body;
-    const userid = req.userid;    
-    userModel.getOneUser(userid, function(author){
-      inputData.author = author 
-      blogModel.listMine(author,function (data) {
+    const userid = req.userid;
+    userModel.getOneUser(userid, function (author) {
+      inputData.author = author;
+      blogModel.listMine(author, function (data) {
         res.render("myBlogs", { data });
       });
-    })  
+    });
+
   },
   listAll: function (req, res) {
     blogModel.listAll(function (data) {
       res.render("explore", { data });
     });
   },
   listData: function (req, res) {
-    const id = req.params.id
+    const id = req.params.id;
+
     blogModel.listBlog(id, function (data) {
       res.render("blog", { data });
     });
   },
-  getUpdate: function(req, res){
-    const id = req.params.id
-    blogModel.listBlog(id, function(data){
-      res.render("update", { data: JSON.stringify(data), blogid:req.params.id })
-    }) 
+  filterTags: function (req, res) {
+    const tag = req.params.tag;
+    blogModel.filterList(tag, function (data, tag) {
+      res.render("tagBlogs", { data, tag });
+    });
+  },
+  getUpdate: function (req, res) {
+    const id = req.params.id;
+    blogModel.listBlog(id, function (data) {
+      res.render("update", {
+        data: JSON.stringify(data),
+        blogid: req.params.id,
+      });
+    });
+
   },
   updateData: function (req, res) {
     var inputData = req.body;

diff --git a/models/blogapi/crud.js b/models/blogapi/crud.js
@@ -5,6 +5,7 @@ var blogSchema = new mongoose.Schema({
   author: { type: String, required: true, ref: "user" },
   noOfLikes: { type: Number, required: false, default: 0 },
   content: { type: String, required: true },
+  tags: [{ type: String, required: true }],
   createdAt: { type: Date, default: Date.now },
   updatedAt: { type: Date, default: Date.now },
 });
@@ -35,6 +36,10 @@ module.exports = {
     data = await blogTable.findOne({ _id: id });
     return callback(data);
   },
+  filterList: async function (tag, callback) {
+    data = await blogTable.find({ tags: tag });
+    return callback(data, tag);
+  },
   updateBlog: function (inputData, blogID, callback) {
     blogData = blogTable.findByIdAndUpdate(blogID, inputData);
     blogData.exec(function (err, data) {

diff --git a/routes/blogs/blogRoutes.js b/routes/blogs/blogRoutes.js
@@ -10,6 +10,7 @@ routes.route("/create").post(blogController.createData);
 routes.route("/explore").get(blogController.listAll);
 routes.route("/myblogs").get(blogController.listMine);
 
+routes.route("/filter/:tag").get(blogController.filterTags);
 routes.route("/update/:id").get(blogController.getUpdate);
 routes.route("/update/:id").post(blogController.updateData);
 routes.route("/:id").delete(blogController.deleteData);

diff --git a/views/blog.ejs b/views/blog.ejs
@@ -21,16 +21,32 @@
     <title><%= data.title %></title>
     <link rel="icon" href="/img/book.svg" />
     <style>
+
+        ::-moz-selection {
+            /* Code for Firefox */
+            color: white;
+            background: rgb(173, 182, 255);
+        }
+
+        ::selection {
+            color: white;
+            background: rgb(173, 182, 255);
+        }
+
         #more {
-      position: absolute; 
-      right: 15px; 
-      top: 7px;
-      margin-top: 9px;
-    }
+            position: absolute;
+            right: 15px;
+            top: 7px;
+            margin-top: 9px;
+        }
+
+        ul.dropdown-content {
+            width: 10% !important;
+        }
 
-    ul.dropdown-content{
-    width:10% !important;
-    }
+        code {
+            color: rgb(169, 102, 245);
+        }
     </style>
 </head>
 
@@ -49,28 +65,31 @@
             </div>
             <ul class="right hide-on-med-and-down">
                 <li>
-                 <!-- <a id="more" class="dropdown-trigger btn black" href="#" data-target="dropdown1" class="right-align"><i class="material-icons">more_vert</i></a> -->
-                 <a id="more" class="dropdown-trigger btn black" href="#" data-target="dropdown1" class="right-align"><img src="/img/avatars/21_avatar_outline.gif" alt="avataar" style="position: absolute; right: 15px; top: -7px; border-radius: 50%;" width="50px"></a>
-
-
-                 <!-- Dropdown Structure -->
-                 <ul id='dropdown1' class='dropdown-content'>
-                   <li><a href="/blogs/create">Write Blogs</a></li>
-                   <li><a href="/blogs/myBlogs">My Blogs</a></li>
-                   <li><a href="/blogs/explore">Explore</a></li>
-                   <li class="divider" tabindex="-1"></li>
-                   <li><a href="/auth/logout">Logout</a></li>
-                 </ul>
+                    <!-- <a id="more" class="dropdown-trigger btn black" href="#" data-target="dropdown1" class="right-align"><i class="material-icons">more_vert</i></a> -->
+                    <a id="more" class="dropdown-trigger btn black" href="#" data-target="dropdown1"
+                        class="right-align"><img src="/img/avatars/21_avatar_outline.gif" alt="avataar"
+                            style="position: absolute; right: 15px; top: -7px; border-radius: 50%;" width="50px"></a>
+
+
+                    <!-- Dropdown Structure -->
+                    <ul id='dropdown1' class='dropdown-content'>
+                        <li><a href="/blogs/create">Write Blogs</a></li>
+                        <li><a href="/blogs/myBlogs">My Blogs</a></li>
+                        <li><a href="/blogs/explore">Explore</a></li>
+                        <li class="divider" tabindex="-1"></li>
+                        <li><a href="/auth/logout">Logout</a></li>
+                    </ul>
                 </li>
-              </ul>
+            </ul>
         </nav>
         <ul class="sidenav" id="mobile-links">
             <li><a href="/blogs/create">Write Blog</a></li>
             <li><a href="/blogs/myBlogs">My Blogs</a></li>
             <li><a href="/blogs/explore">Explore</a></li>
             <li class="divider" tabindex="-1"></li>
             <li><a href="#">Logout</a></li>
-          </ul>
+        </ul>
+
     </header>
     <div class="container">
         <h1><%= data.title %></h1>
@@ -83,10 +102,10 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
     <script>
         $(document).ready(function () {
-          $('.dropdown-trigger').dropdown();
-          $(".sidenav").sidenav();
-          });
-      </script>
+            $('.dropdown-trigger').dropdown();
+            $(".sidenav").sidenav();
+        });
+    </script>
 </body>
 
 </html>
diff --git a/views/create.ejs b/views/create.ejs
@@ -21,14 +21,14 @@
   <link rel="icon" href="/img/book.svg" />
   <style>
     #more {
-      position: absolute; 
-      right: 15px; 
+      position: absolute;
+      right: 15px;
       top: 7px;
       margin-top: 9px;
     }
 
-    ul.dropdown-content{
-    width:10% !important;
+    ul.dropdown-content {
+      width: 10% !important;
     }
   </style>
 </head>
@@ -43,7 +43,8 @@
         </li>
       </ul>
       <div class="container">
-        <a href="/blogs/explore" class="brand-logo left-align" style="font-family: 'Dancing Script', cursive">Write.it</a>
+        <a href="/blogs/explore" class="brand-logo left-align"
+          style="font-family: 'Dancing Script', cursive">Write.it</a>
         <a href="#" class="sidenav-trigger right" data-target="mobile-links">
           <i class="material-icons">menu</i>
         </a>
@@ -57,18 +58,20 @@
         </ul>
         <ul class="right hide-on-med-and-down">
           <li>
-           <!-- <a id="more" class="dropdown-trigger btn black" href="#" data-target="dropdown1" class="right-align"><i class="material-icons">more_vert</i></a> -->
-           <a id="more" class="dropdown-trigger btn black" href="#" data-target="dropdown1" class="right-align"><img src="/img/avatars/21_avatar_outline.gif" alt="avataar" style="position: absolute; right: 15px; top: -7px; border-radius: 50%;" width="50px"></a>
-
-
-           <!-- Dropdown Structure -->
-           <ul id='dropdown1' class='dropdown-content'>
-             <!-- <li><a href="/blogs/create">Write Blogs</a></li> -->
-             <li><a href="/blogs/myBlogs">My Blogs</a></li>
-             <li><a href="/blogs/explore">Explore</a></li>
-             <li class="divider" tabindex="-1"></li>
-             <li><a href="/auth/logout">Logout</a></li>
-           </ul>
+            <!-- <a id="more" class="dropdown-trigger btn black" href="#" data-target="dropdown1" class="right-align"><i class="material-icons">more_vert</i></a> -->
+            <a id="more" class="dropdown-trigger btn black" href="#" data-target="dropdown1" class="right-align"><img
+                src="/img/avatars/21_avatar_outline.gif" alt="avataar"
+                style="position: absolute; right: 15px; top: -7px; border-radius: 50%;" width="50px"></a>
+
+
+            <!-- Dropdown Structure -->
+            <ul id='dropdown1' class='dropdown-content'>
+              <!-- <li><a href="/blogs/create">Write Blogs</a></li> -->
+              <li><a href="/blogs/myBlogs">My Blogs</a></li>
+              <li><a href="/blogs/explore">Explore</a></li>
+              <li class="divider" tabindex="-1"></li>
+              <li><a href="/auth/logout">Logout</a></li>
+            </ul>
           </li>
         </ul>
       </div>
@@ -88,6 +91,8 @@
       <div class="input-field">
         <input id="title-inp" type="text" name="title" />
         <label for="title-inp">Title</label>
+        <div class="chips chips-placeholder"></div>
+
       </div>
       <div id="editor"></div>
     </form>
@@ -104,15 +109,23 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-    <!-- Compiled and minified JavaScript -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+  <!-- Compiled and minified JavaScript -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   <script>
     $(document).ready(function () {
       $('.dropdown-trigger').dropdown();
       $(".sidenav").sidenav();
-      });
+    });
   </script>
   <script>
+
+    $('.chips-placeholder').chips({
+      placeholder: 'Enter a tag',
+      secondaryPlaceholder: '+Tag',
+      limit: Infinity,
+      minLength: 1
+    });
+
     const Editor = toastui.Editor;
 
     const editor = new Editor({
@@ -124,11 +137,17 @@
 
     function getEditorValue() {
       var title = document.getElementById("title-inp").value;
+      let chipdata = M.Chips.getInstance($('.chips')).chipsData
+      let chipArray = []
+      for (let i = 0; i < chipdata.length; i++) {
+        chipArray.push(chipdata[i].tag.toLowerCase())
+      }
       var content = editor.getHtml();
       const url = "/blogs/create"
       const data = {
         title: title,
-        content: content
+        content: content,
+        tags: chipArray
       }
       var stringified = JSON.stringify(data);
       const otherparams = {