catagoty wish srver side search

rezwanhossen · Jun 11, 2024 · 01be639 · 01be639
1 parent 142320f
commit 01be639
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 14 deletions.
diff --git a/src/Componente/Meals/Meals.jsx b/src/Componente/Meals/Meals.jsx
@@ -6,31 +6,75 @@ import { useState } from "react";
 import MealsCard from "../../Sheare/MealsCard";
 
 const Meals = () => {
+  const [filter, setCategoryFilter] = useState("");
+  const [search, setSearch] = useState("");
   const [pag, setpag] = useState(1);
   const axioscommon = useAxiosCommon();
-  const { data: meals = [], isLoading } = useQuery({
-    queryKey: ["meals"],
+  const {
+    data: meals = [],
+    isLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ["meals", filter, search],
     queryFn: async () => {
-      const { data } = await axioscommon.get("/meals");
+      const { data } = await axioscommon.get(
+        `/meals?filter=${filter}&search=${search}`
+      );
       return data;
     },
   });
+
+  const handelsearch = (e) => {
+    e.preventDefault();
+    const text = e.target.search.value;
+    setSearch(text);
+  };
+  console.log(search);
+
   if (isLoading) return <LogingSpiner></LogingSpiner>;
 
   return (
     <div>
       <div className="mt-5 bg-lime-600 p-4 space-y-3 md:flex  justify-between items-center">
-        <form className="flex gap-2">
-          <input type="text" className=" input input-disabled" name="" id="" />
+        <form onSubmit={handelsearch} className="flex gap-2">
+          <input
+            type="text"
+            className=" input input-disabled"
+            name="search"
+            id=""
+          />
           <input
             type="submit"
             className="btn btn-outline btn-primary"
             value="Search"
           />
         </form>
         <div className=" ">
-          <button className=" btn mr-3">catagory</button>
-          <button className=" btn">price</button>
+          <select
+            className="select select-bordered"
+            onChange={(e) => setCategoryFilter(e.target.value)} //}{handleCategoryFilter}
+            value={filter}
+          >
+            <option value="">All Categories</option>
+            <option value="breakfast">Breakfast</option>
+            <option value="lunch">Lunch</option>
+            <option value="dinner">Dinner</option>
+          </select>
+          {/* <details className="dropdown">
+            <summary className="m-1 btn">open or close</summary>
+            <ul className="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
+              <li>
+                <button onClick={() => handlePriceRangeFilter(10, 50)}>
+                  $10-$50
+                </button>
+              </li>
+              <li>
+                <button onClick={() => handlePriceRangeFilter(51, 150)}>
+                  $51-$150
+                </button>
+              </li>
+            </ul>
+          </details> */}
         </div>
       </div>
       <div>

diff --git a/src/Dashbord/AdminPages/AddUpcoming.jsx b/src/Dashbord/AdminPages/AddUpcoming.jsx
@@ -145,6 +145,8 @@ const AddUpcoming = ({ isOpen, setisOpen, refetch }) => {
                             type="number"
                             className=" input input-disabled w-full"
                             name=" likes"
+                            defaultValue={0}
+                            disabled
                             {...register("likes")}
                             required
                             id=""

diff --git a/src/Dashbord/AdminPages/Addmeal.jsx b/src/Dashbord/AdminPages/Addmeal.jsx
@@ -116,6 +116,8 @@ const Addmeal = () => {
               type="number"
               className=" input input-disabled w-full"
               name=" likes"
+              defaultValue={0}
+              disabled
               {...register("likes")}
               required
               id=""

diff --git a/src/Dashbord/AdminPages/AllMeals.jsx b/src/Dashbord/AdminPages/AllMeals.jsx
@@ -7,10 +7,14 @@ import { FaEdit } from "react-icons/fa";
 import useAxiosSecqur from "../../Hooks/useAxiosSecqur";
 import Swal from "sweetalert2";
 import toast from "react-hot-toast";
+import { useState } from "react";
+// import { useMemo } from "react";
 
 const AllMeals = () => {
   const axioscommon = useAxiosCommon();
   const axiosSec = useAxiosSecqur();
+  const [sortByLikes, setSortByLikes] = useState(false);
+
   const {
     data: meals = [],
     isLoading,
@@ -19,9 +23,18 @@ const AllMeals = () => {
     queryKey: ["meals"],
     queryFn: async () => {
       const { data } = await axioscommon.get("/meals");
-      return data;
+      return sortByLikes ? data.sort((a, b) => b.likes - a.likes) : data;
     },
   });
+
+  // const { data: reviews = [], isLoading: loding } = useQuery({
+  //   queryKey: ["reviews"],
+  //   queryFn: async () => {
+  //     const { data } = await axiosSec.get("/reviews");
+  //     return data;
+  //   },
+  // });
+
   const handeldelet = (id) => {
     Swal.fire({
       title: "Are you sure?",
@@ -41,6 +54,10 @@ const AllMeals = () => {
       refetch();
     });
   };
+  const handleSortByLikes = () => {
+    setSortByLikes(true);
+    refetch();
+  };
 
   if (isLoading) return <LogingSpiner></LogingSpiner>;
   return (
@@ -52,8 +69,11 @@ const AllMeals = () => {
             <tr>
               <th>#</th>
               <th>Title</th>
-              <th>Likes</th>
-              <th>Reviews</th>
+              <th>
+                <button className="btn" onClick={handleSortByLikes}>
+                  Likes
+                </button>{" "}
+              </th>
               <th>Distributor Name</th>
               <th>Action</th>
               <th>Detail button</th>
@@ -65,7 +85,6 @@ const AllMeals = () => {
                 <th>{inx + 1} </th>
                 <td>{meal.title}</td>
                 <td>{meal.likes}</td>
-                <td>Blue</td>
                 <td>{meal.admin_name}</td>
                 <td className=" flex gap-2">
                   <button onClick={() => handeldelet(meal._id)} className="btn">

diff --git a/src/Dashbord/AdminPages/AllReviews.jsx b/src/Dashbord/AdminPages/AllReviews.jsx
@@ -1,4 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { FaEdit } from "react-icons/fa";
+import { MdDelete } from "react-icons/md";
+import Swal from "sweetalert2";
 import useAxiosSecqur from "../../Hooks/useAxiosSecqur";
 import LogingSpiner from "../../Sheare/LogingSpiner";
 
@@ -15,16 +19,76 @@ const AllReviews = () => {
       return data;
     },
   });
-  console.log(reviews);
+  const handeldelet = (id) => {
+    Swal.fire({
+      title: "Are you sure?",
+      text: "you deleted thid item",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#3085d6",
+      cancelButtonColor: "#d33",
+      confirmButtonText: "Yes, delete it!",
+    }).then(async (result) => {
+      if (result.isConfirmed) {
+        const res = await axiosSec.delete(`/review/${id}`);
+        if (res.data.deletedCount > 0) {
+          toast.success("deleted successfully !");
+        }
+      }
+      refetch();
+    });
+  };
+
   if (isLoading) return <LogingSpiner></LogingSpiner>;
   return (
     <div>
       <div className="md:flex justify-around">
         <h2 className="text-3xl hont-bold">All Reviews</h2>
         <h2 className="text-3xl hont-bold">
-          Total Reviews :({reviews.length} ){" "}
+          Total Reviews :({reviews.length})
         </h2>
       </div>
+      <div>
+        <div className="overflow-x-auto">
+          <table className="table overflow-x-auto">
+            {/* head */}
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Title</th>
+                <th>Likes</th>
+                <th>Review</th>
+                <th>Action</th>
+                <th>Meal</th>
+              </tr>
+            </thead>
+            <tbody>
+              {reviews.map((meal, inx) => (
+                <tr key={meal._id}>
+                  <th>{inx + 1} </th>
+                  <td>{meal.mealtitle}</td>
+                  <td>{meal.likes}</td>
+                  <td>{meal.review}</td>
+                  {/* <td>{meal.name}</td> */}
+                  <td className=" flex gap-2">
+                    <button
+                      onClick={() => handeldelet(meal._id)}
+                      className="btn"
+                    >
+                      <MdDelete></MdDelete>
+                    </button>
+                  </td>
+                  <td>
+                    <button className="btn btn-outline btn-primary">
+                      view meal
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/src/Sheare/MealsDetails.jsx b/src/Sheare/MealsDetails.jsx
@@ -79,7 +79,7 @@ const MealsDetails = () => {
       }
       refetch();
     } else {
-      naviget("/login");
+      toast.error("you are not buy Membership pakag ");
     }
   };
 
@@ -105,6 +105,12 @@ const MealsDetails = () => {
       if (res.data.insertedId) {
         toast.success("revies successfilly !");
       }
+      const reviecCount = reviews?.length + 1;
+      axioscommon.patch(`/reviusCount/${meal._id}`, {
+        reviecCount: reviecCount,
+      });
+
+      refetch();
       refetch();
     } else {
       naviget("/login");
@@ -121,6 +127,15 @@ const MealsDetails = () => {
     }
   };
 
+  // const handelClick = async (id, reviews) => {
+  //   const reviecCount = reviews?.length + 1;
+  //   const res = await axioscommon.patch(`/reviusCount/${id}`, {
+  //     reviecCount: reviecCount,
+  //   });
+  //   console.log(res);
+  //   refetch();
+  // };
+
   if (isLoading) return <LogingSpiner></LogingSpiner>;
 
   return (