Merge pull request bradtraversy#47 from saira512dev/master

Added search bar to index page to search for stories
fabricesemti80 · Oct 10, 2022 · c64a472 · c64a472
2 parents aaa8a6d + e5d7f79
commit c64a472
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -20,3 +20,20 @@ p {
 .img-small {
  width: 180px;
 }
+
+.fa-large {
+ font-size: 26px !important;
+}
+
+.input-group{
+ display:table;
+ width:100%;
+}
+.input-group .input-field,
+.input-group .input-group-addon{
+ display:table-cell;
+}
+
+.search-form {
+ margin: 70px 0;
+}
diff --git a/routes/stories.js b/routes/stories.js
@@ -157,4 +157,20 @@ router.get('/user/:userId', ensureAuth, async (req, res) => {
  }
 })
 
+//@desc Search stories by title
+//@route GET /stories/search/:query
+router.get('/search/:query', ensureAuth, async (req, res) => {
+ try{
+ const stories = await Story.find({title: new RegExp(req.query.query,'i'), status: 'public'})
+ .populate('user')
+ .sort({ createdAt: 'desc'})
+ .lean()
+ res.render('stories/index', { stories })
+ } catch(err){
+ console.log(err)
+ res.render('error/404')
+ }
+})
+
+
 module.exports = router
diff --git a/views/stories/index.hbs b/views/stories/index.hbs
@@ -1,4 +1,20 @@
 <h1>Stories</h1>
+<ul class="search-form">
+ <li> 
+ <form id="search-site" action='/stories/search/:query' method='get'>
+ <div class="input-group">
+ <i class="fas fa-search fa-large" ></i>
+ <div class="input-field">
+ <input id="search" type="search" name='query' placeholder="Search by title">
+ <label class="label-icon" for="search">
+ </label>
+ </div>
+ <button type="submit" class="input-group-addon btn">search</button>
+ </div>
+
+ </form> 
+ </li> 
+</ul>
 <div class="row">
  {{#each stories}}
  <div class="col s12 m4">