PHASE -3 (PART-C) ADDING FILTERS

 WE ADD FILTERS TO SHOW OUR LISTINGS. IN THE SCHEMA OF LISTING A NEW FIELD IS ADDED BY THE NAME "category". 

IN MODELS (LISTINGS.JS)

category: {

    type: String,

    enum: [

      "Mountains",

      "Beaches",

      "Skyscrapers",

      "Apartments",

      "Rooms",

      "Pools",

      "Arctic",

      "Farms",

      "Hotels",

      "Lakes",

      "Camps",

      "Forts",

      "Adventures",

      "others",

    ],

    required: true,

  },

A FILTER.EJS IS CREATED.

<nav

  class="navbar-bottom navbar-expand-md bg-body-light border-bottom sticky-top"

>

<%- include("../includes/flash.ejs") %>

  <div class="container-fluid">

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">

      <div class="navbar-nav">

        <div id="filters" class="nav-link sticky-top">

          <a href="/listings?category=Trending" class="filter">

            <div><i class="fa-solid fa-fire"></i></div>

            <p>Trending</p>

          </a>

          <a href="/listings?category=Beaches" class="filter">

            <div><i class="fa-solid fa-umbrella-beach"></i></div>

            <p>Beaches</p>

          </a>

          <a href="/listings?category=Skyscrapers" class="filter">

            <div><i class="fa-solid fa-city"></i></div>

            <p>Skyscrapers</p>

          </a>

          <a href="/listings?category=Apartments" class="filter">

            <div><i class="fa-solid fa-building"></i></div>

            <p>Apartments</p>

          </a>

          <a href="/listings?category=Rooms" class="filter">

            <div><i class="fa-solid fa-bed"></i></div>

            <p>Rooms</p>

          </a>

          <a href="/listings?category=Mountains" class="filter">

            <div><i class="fa-solid fa-mountain-sun"></i></div>

            <p>Mountains</p>

          </a>

          <a href="/listings?category=Pools" class="filter">

            <div><i class="fa-solid fa-person-swimming"></i></div>

            <p>Pools</p>

          </a>

          <a href="/listings?category=Arctic" class="filter">

            <div><i class="fa-solid fa-snowflake"></i></div>

            <p>Arctic</p>

          </a>

          <a href="/listings?category=Farms" class="filter">

            <div><i class="fa-solid fa-wheat-awn"></i></div>

            <p>Farms</p>

          </a>

          <a href="/listings?category=Hotels" class="filter">

            <div><i class="fa-solid fa-hotel"></i></div>

            <p>Hotels</p>

          </a>

          <a href="/listings?category=Lakes" class="filter">

            <div><i class="fa-solid fa-water"></i></div>

            <p>Lakes</p>

          </a>

          <a href="/listings?category=Camps" class="filter">

            <div><i class="fa-solid fa-tents"></i></div>

            <p>Camps</p>

          </a>

          <a href="/listings?category=Forts" class="filter">

            <div><i class="fa-solid fa-building-columns"></i></div>

            <p>Forts</p>

          </a>

THESE FILTERS ARE ADDED IN THE INDEX.EJS

AFTER THE BOILERPLATE

    <%- include("../includes/filter.ejs") %>

THE BACKEND OF FILTERS SAME ROUTE AS OF "/" 

 .route("/")

  .get(wrapAsync(listingController.index))

IN CONTROLLER(LISTINGS.JS)

module.exports.index = async (req, res) => {

  let { category } = req.query;

  if (typeof category !== "undefined") {

    let AllListings = await Listing.find({ category: category });

    if (!AllListings.length) {

      req.flash("error", " Oops!!No listings Found");

      return res.redirect("/listings");

    } else {

      res.render("listings/index.ejs", { AllListings });

    }

  }

  let AllListings = await Listing.find({});

  res.render("listings/index.ejs", { AllListings });

};

HERE THE DATA HAS NOT BEEN RE-INITIALIZED ONLY A NEW LISTING IS CREATED WITH THE CATEGORY BEACHES.