Merge branch 'main' of https://github.com/jency1/PlantWorld

Author: Shrevee-Kasodariya

Backend/controllers/plantController.js

@@ -3,27 +3,47 @@ const Plant = require('./../model/plantModel');
 
 exports.getAllPlants = async (req, res) => {
   try {
-    console.log(req.query);
+    // console.log(req.query);
 
     // BUILD QUERY
-    // 1)filtering
+    // 1A)filtering
     const queryObj = { ...req.query };
     const excludedFields = ['page', 'sort', 'limit', 'fields'];
 
     excludedFields.forEach((el) => delete queryObj[el]);
 
-    // 2)Advanced filtering
+    // 1B)Advanced filtering
     let queryString = JSON.stringify(queryObj);
     queryString = queryString.replace(
       /\b(gte|gt|lte|lt)\b/g,
       (match) => `$${match}`
     );
 
-    console.log(JSON.parse(queryString));
+    // console.log(JSON.parse(queryString));
     // mongoose {tag:'Indoor' , price:{$gte:200}}
     // req.query { tag: 'Indoor', price: { gte: '200' } }
 
-    const query = Plant.find(JSON.parse(queryString));
+    // 2) Sorting
+
+    let query = Plant.find(JSON.parse(queryString));
+
+    if (req.query.sort) {
+      //mongoose sort('price ratingsAverage)
+
+      const sortBy = req.query.sort.split(',').join(' ');
+      query = query.sort(sortBy);
+    } else {
+      query = query.sort('-createdAt');
+    }
+
+    // 3) Field limiting
+
+    if (req.query.fields) {
+      const fields = req.query.fields.split(',').join(' ');
+      query = query.select(fields);
+    } else {
+      query = query.select('-__v');
+    }
 
     // EXECUTE QUERY
 

src/components/HomePage/FollowOnInstagram.jsx

@@ -78,53 +78,53 @@ function FollowOnInstagram() {
         Follow us on Instagram
       </div>
       <div
-        className={`${styles["main-container"]} grid h-4/6 w-5/6 grid-cols-12 px-8 mx-8 mt-2 mb-5`}
+        className={`${styles["main-container"]} grid h-full w-full md:h-4/6 md:w-5/6 grid-cols-12 px-8 mx-8 mt-2 mb-5`}
       >
-        <div className="col-span-12 md:col-span-8 grid grid-cols-12">
-          <div className="col-span-6 text-center m-1">
+        <div className="col-span-8 grid grid-cols-12">
+          <div className="col-span-6 text-center m-[0.1rem] md:m-1">
             <img
               src="/Shop By Category/image-1.jpg"
               alt=""
               className="w-full h-full object-cover rounded hover:shadow-lg"
             />
           </div>
-          <div className="col-span-6 text-center m-1 ">
+          <div className="col-span-6 text-center m-[0.1rem] md:m-1">
             <img
               src="/Shop By Category/image-2.jpg"
               alt=""
               className="w-full h-full object-cover rounded hover:shadow-lg"
             />
           </div>
-          <div className="col-span-8 text-center m-1">
+          <div className="col-span-8 text-center m-[0.1rem] md:m-1">
             <img
               src="/Shop By Category/image-3.jpg"
               alt=""
               className="w-full h-full object-cover rounded hover:shadow-lg"
             />
           </div>
-          <div className="col-span-4 text-center m-1 ">
+          <div className="col-span-4 text-center m-[0.1rem] md:m-1">
             <img
               src="/Shop By Category/image-4.jpg"
               alt=""
               className="w-full h-full object-cover rounded hover:shadow-lg"
             />
           </div>
-          <div className="col-span-6 text-center m-1">
+          <div className="col-span-6 text-center m-[0.1rem] md:m-1">
             <img
               src="/Shop By Category/image-5.jpg"
               alt=""
               className="w-full h-full object-cover rounded hover:shadow-lg"
             />
           </div>
-          <div className="col-span-6 text-center m-1">
+          <div className="col-span-6 text-center m-[0.1rem] md:m-1">
             <img
               src="/Shop By Category/image-6.jpg"
               alt=""
               className="w-full h-full object-cover rounded hover:shadow-lg"
             />
           </div>
         </div>
-        <div className={`${styles.longImage} m-1 col-span-4 `}>
+        <div className={`${styles.longImage} m-[0.1rem] col-span-4 md:m-1`}>
           <img
             src="/Shop By Category/long-image.jpg"
             alt=""

src/components/HomePage/FollowOnInstagram.module.css

@@ -3,11 +3,11 @@
 }
 
 @media only screen and (max-width: 48em) {
-  .longImage {
+  /* .longImage {
     height: 0;
-  }
+  } */
 
   .main-container {
-    padding: 0 4rem 0 4rem;
+    padding: 0 2rem 0 2rem;
   }
 }

src/pages/LoginPage.jsx

@@ -32,7 +32,7 @@ const LoginForm = ({ handleForgotPassword }) => (
       className="w-full px-[6px] py-[3px] lg:px-[12px] lg:py-[8px] mb-3 rounded border border-gray-300 text-[14px] lg:text-[16px]"
     />
 
-    <label htmlFor="mobile" className="mb-2 text-[0.8rem] lg:text-[1.1rem]">
+    {/* <label htmlFor="mobile" className="mb-2 text-[0.8rem] lg:text-[1.1rem]">
       Mobile Number:
     </label>
     <input
@@ -41,7 +41,7 @@ const LoginForm = ({ handleForgotPassword }) => (
       placeholder="123-456-7890"
       required
       className="w-full px-[6px] py-[3px] lg:px-[12px] lg:py-[8px] mb-3 rounded border border-gray-300 text-[14px] lg:text-[16px]"
-    />
+    /> */}
 
     <label htmlFor="password" className="mb-2 text-[0.8rem] lg:text-[1.1rem]">
       Password:
@@ -239,7 +239,7 @@ const LoginPage = () => {
   return (
     <div className="relative flex justify-center items-center min-h-screen bg-[#ecffed] p-2 md:p-4">
       <BackToHomeButton />
-      <div className="flex w-[90%] md:w-[80%] max-w-[1200px] bg-white/80 rounded-[10px] shadow-lg flex-col sm:flex-row mt-10">
+      <div className="flex w-[90%] md:w-[80%] max-w-[1200px] bg-white/80 rounded-[10px] shadow-lg flex-col sm:flex-row mt-10 mb-2 md:mt-3">
         <LeftSection />
         <RightSection
           isSignup={isSignup}