configured filter mode or not by user

bmarieay · Feb 28, 2022 · 0985381 · 0985381
1 parent 90d0a2b
commit 0985381
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 17 deletions.
diff --git a/controllers/campgrounds.js b/controllers/campgrounds.js
@@ -41,11 +41,6 @@ module.exports.index = async (req, res) => {
     const max = Math.ceil(result.allItemsFetched / 20.0);
     let {page, limit, q} = req.query;
     // console.log(q)
-    if(!q){
-        res.clearCookie('filter');
-    } else {
-        res.cookie('filter', q)
-    }
     page = parseInt(page);
         limit = parseInt(limit);
         if(!page || page < 0){
@@ -75,16 +70,17 @@ module.exports.index = async (req, res) => {
         res.cookie('currentPage', page);
 
     if(!q){//if there is no searching passed
+        res.clearCookie('filter');
         const campgrounds = await Campground.find().limit(limit).skip(startIndex);
         result.results = campgrounds;
         //for determining max number of pages
         return res.render('campgrounds/index', {result});
         // res.send(result);
     }
     //user searched for something
-    // res.cookie('filter', q);
     const queried = await axios.get(`https://developer.nps.gov/api/v1/campgrounds?limit=15&stateCode=${q}`, config);
     let matchedCampground;  
+    result.filter = q;
     if(queried.data.data.length) {
         //If found: save to database or just render if it already exists
        //TODO: DO NOT BASE OFF OF THE FETCHED DATA BECAUSE IT HAS DIFFERENT JSON FORMAT FROM 
@@ -133,9 +129,7 @@ module.exports.index = async (req, res) => {
         // result.results = queried.data.data;
         result.query = q;
     }
-    const {filter} = req.cookies;
-    result.filter = filter;
-    console.log(result)
+
     // res.send(result);
     res.render('campgrounds/index', {result})
 }

diff --git a/views/campgrounds/index.ejs b/views/campgrounds/index.ejs
@@ -1,7 +1,7 @@
 <% layout('layouts/boilerplate') %>
 <div id="cluster-map" class="border border-dark"></div>
 
-<% if(result.results.length && !result.filter.length) {%> 
+<% if(result.results.length && !result.filter) {%> 
     <h1 class="title">All Campgrounds</h1>
     <nav aria-label="Campgrounds navigation pages" class="fw-bold">
         <ul class="pagination pagination-sm d-flex justify-content-center">
@@ -14,10 +14,12 @@
         <li class="page-item next-btn align-self-center"><a class="page-link page-next" href="">Next</a></li>
         </ul>
     </nav>
+<% } else  {%> 
+    <h1>Showing campgrounds at <%= result.filter %> </h1>
 <% } %> 
 
 <form action="/campgrounds">
-    <select class="form-select" name="q" aria-label="Default select example" onchange="this.form.submit()">
+    <select class="form-select theme-target" name="q" aria-label="Default select example" onchange="this.form.submit()">
         <option selected>Select a state</option>
         <option value="AL">Alabama</option>
         <option value="AK">Alaska</option>
@@ -113,8 +115,12 @@
         //map will be looking for features to search from
         const campgrounds = {features: <%- JSON.stringify(result.results) %>};
         const resultLength = <%-result.allItemsFetched %>;
+        const filter = '<%-result.filter%>';
     </script>
     <noscript><input type=”submit” value=”Submit”></noscript>
 
     <script src="/javascripts/clusterMap.js"></script>
-    <script src="/javascripts/pagination.js"></script>
+    <% if(!result.filter) {%> 
+    <script src="/javascripts/pagination.js"></script>
+    <% } %> 
+    <script src="/javascripts/searchMode.js"></script>
diff --git a/views/partials/navbar.ejs b/views/partials/navbar.ejs
@@ -13,11 +13,7 @@
           <li class="nav-item"><a class="nav-link" href="/campgrounds/user">My Campgrounds</a></li>
           <li class="nav-item"><a class="nav-link" href="/campgrounds/new">New Campground</a></li>
         </ul>
-        <form class="d-flex ms-auto" method="GET" action="/campgrounds">
-          <input class="form-control me-2" name="q" type="search" placeholder="Search" aria-label="Search">
-          <button class="btn btn-outline-success" type="submit">Search</button>
-        </form>
-        <ul class="navbar-nav">
+        <ul class="navbar-nav ms-auto">
           <% if(!currentUser) {%> 
             <li class="nav-item"><a class="nav-link" href="/login">Login</a></li>
             <li class="nav-item"><a class="nav-link" href="/register">Register</a></li>