view detail page

Author: rezwanhossen

package-lock.json

@@ -16,6 +16,7 @@
     "firebase": "^10.12.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",
+    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.5",

package.json

@@ -49,7 +49,7 @@ const AllMeals = () => {
                   </Link>
                 </td>
                 <td>
-                  <Link>
+                  <Link to={`/dashbord/vievdetial/${meal._id}`}>
                     <button className="btn btn-outline btn-primary">
                       View Deatils
                     </button>

src/Dashbord/AdminPages/AllMeals.jsx

@@ -1,13 +1,21 @@
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
+import toast from "react-hot-toast";
+import Swal from "sweetalert2";
 import useAxiosCommon from "../../Hooks/useAxiosCommon";
+import useAxiosSecqur from "../../Hooks/useAxiosSecqur";
 import LogingSpiner from "../../Sheare/LogingSpiner";
 import AddUpcoming from "./AddUpcoming";
 
 const Upcommingmeal = () => {
   let [isOpen, setIsOpen] = useState(false);
   const axioscommon = useAxiosCommon();
-  const { data: upcommingmeals = [], isLoading } = useQuery({
+  const axiosSec = useAxiosSecqur();
+  const {
+    data: upcommingmeals = [],
+    isLoading,
+    refetch,
+  } = useQuery({
     queryKey: ["upcommingmeals"],
     queryFn: async () => {
       const { data } = await axioscommon.get("/upcommingmeals");
@@ -16,7 +24,36 @@ const Upcommingmeal = () => {
   });
 
   const handelPublic = (upcom) => {
-    console.log(upcom);
+    const items = {
+      title: upcom?.title,
+      catagory: upcom?.catagory,
+      price: parseFloat(upcom?.price),
+      rating: parseFloat(upcom?.rating),
+      likes: parseFloat(upcom?.likes),
+      ingredients: upcom?.ingredients,
+      description: upcom?.description,
+      admin_name: upcom?.admin_name,
+      email: upcom?.email,
+    };
+
+    Swal.fire({
+      title: "Are you sure?",
+      text: "you punlish 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(`/upcommingmeals/${upcom?._id}`);
+        const posts = await axiosSec.post("/addmeals", items);
+        if (posts.data.insertedId) {
+          toast.success("publish successfully !");
+        }
+      }
+      refetch();
+    });
   };
 
   if (isLoading) return <LogingSpiner></LogingSpiner>;

src/Dashbord/AdminPages/Upcommingmeal.jsx

@@ -0,0 +1,49 @@
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
+import useAxiosCommon from "../../Hooks/useAxiosCommon";
+import LogingSpiner from "../../Sheare/LogingSpiner";
+
+const ViewDeteal = () => {
+  const { id } = useParams();
+  const axiosSeequr = useAxiosCommon();
+  const { data: meal = [], isLoading } = useQuery({
+    queryKey: ["meal", id],
+    queryFn: async () => {
+      const { data } = await axiosSeequr.get(`/meal/${id}`);
+      return data;
+    },
+  });
+  console.log(meal);
+  if (isLoading) return <LogingSpiner></LogingSpiner>;
+  return (
+    <div className=" flex justify-center">
+      <div className=" md:w-2/3 mx-auto bg-slate-300 rounded-xl shadow-xl p-7">
+        <div className="md:flex gap-3">
+          <div className=" flex-1 space-y-3">
+            <h2 className="text-2xl font-bold">{meal.title} </h2>
+            <img className=" w-full" src={meal.image} alt="" />
+            <div className=" flex justify-between">
+              <p>Likes : {meal.likes} </p>
+              <p>Price : ${meal.price} </p>
+            </div>
+          </div>
+          <div className=" flex-1 space-y-3 border-1 p-2">
+            <p> {meal.post_time}</p>
+            <p> {meal.description}</p>
+            <p>rating: {meal.rating}</p>
+            <p>
+              ingredients:
+              {meal.ingredients.map((itm, inx) => (
+                <li key={inx}>{itm} </li>
+              ))}
+            </p>
+            <p>Proviser: {meal.admin_name}</p>
+            <p>Email: {meal.email}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ViewDeteal;

src/Dashbord/AdminPages/ViewDeteal.jsx

@@ -8,6 +8,7 @@ import Addmeal from "../Dashbord/AdminPages/Addmeal";
 import AllMeals from "../Dashbord/AdminPages/AllMeals";
 import Allusers from "../Dashbord/AdminPages/Allusers";
 import Upcommingmeal from "../Dashbord/AdminPages/Upcommingmeal";
+import ViewDeteal from "../Dashbord/AdminPages/ViewDeteal";
 import UserProfil from "../Dashbord/UserProfil";
 import ErrorPage from "../Pages/ErrorPage";
 import Dashboard from "../Root/Dashboard";
@@ -71,6 +72,10 @@ const router = createBrowserRouter([
         path: "allmeals",
         element: <AllMeals></AllMeals>,
       },
+      {
+        path: "vievdetial/:id",
+        element: <ViewDeteal></ViewDeteal>,
+      },
     ],
   },
 ]);

src/Route/Route.jsx

@@ -18,7 +18,7 @@ const MealsDetails = () => {
   return (
     <div>
       <h1 className="text-3xl md:text-5xl font-bold">{title} </h1>
-      <img src={image} alt="" />
+      <img className=" w-[500px]" src={image} alt="" />
     </div>
   );
 };