feat : add menu pages

Author: koladev

menu-frontend/src/app/add/page.js

@@ -1,13 +1,15 @@
-"use client";
-
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter } from "next/router";
+
+/**
+ * Sends a POST request to create a new menu item.
+ * @param {Object} data The menu item data to be sent.
+ */
 async function createMenu(data) {
   const res = await fetch("http://127.0.0.1:8000/api/menu/", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      // 'Content-Type': 'application/x-www-form-urlencoded',
     },
     body: JSON.stringify(data),
   });
@@ -21,32 +23,32 @@ async function createMenu(data) {
 
 const Page = () => {
   const router = useRouter();
-  const [formData, setFormData] = useState({
-    name: "",
-    price: "",
-  });
-
+  const [formData, setFormData] = useState({ name: "", price: "" });
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
 
+  /**
+   * Handles the form submission.
+   * @param {Event} event The form submission event.
+   */
   const onFinish = (event) => {
-    setIsLoading(true);
     event.preventDefault();
+    setIsLoading(true);
     createMenu(formData)
       .then(() => {
+        // Navigate to the main page with a query parameter indicating success
         router.replace("/?action=add");
       })
-      .catch((reason) => {
-        setError("An error occured");
+      .catch(() => {
+        setError("An error occurred");
         setIsLoading(false);
       });
   };
 
+  // Cleanup effect for resetting loading state
   useEffect(() => {
-    return () => {
-      setIsLoading(false);
-    };
-  });
+    return () => setIsLoading(false);
+  }, []);
 
   return (
     <form onSubmit={onFinish}>
@@ -57,10 +59,7 @@ const Page = () => {
           name="name"
           value={formData.name}
           onChange={(event) =>
-            setFormData({
-              ...formData,
-              name: event.target.value,
-            })
+            setFormData({ ...formData, name: event.target.value })
           }
         />
       </div>
@@ -72,21 +71,13 @@ const Page = () => {
           name="price"
           value={formData.price}
           onChange={(event) =>
-            setFormData({
-              ...formData,
-              price: event.target.value,
-            })
+            setFormData({ ...formData, price: event.target.value })
           }
         />
       </div>
       {error && <p className="error-message">{error}</p>}
       <div>
-        <button
-          disabled={isLoading}
-          className="add-button"
-          type="submit"
-          name="price"
-        >
+        <button disabled={isLoading} className="add-button" type="submit">
           Submit
         </button>
       </div>

menu-frontend/src/app/page.js

@@ -1,18 +1,20 @@
-"use client";
-
 import { useEffect, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/router";
 
+/**
+ * Fetches menu data from the server.
+ */
 async function getData() {
   const res = await fetch("http://127.0.0.1:8000/api/menu/");
-
   if (!res.ok) {
     throw new Error("Failed to fetch data");
   }
-
   return res.json();
 }
 
+/**
+ * Represents a single menu item.
+ */
 const MenuItem = ({ id, name, price, onEdit, onDelete }) => {
   return (
     <div className="menu-item" data-id={id}>
@@ -21,7 +23,7 @@ const MenuItem = ({ id, name, price, onEdit, onDelete }) => {
         <div className="menu-item-price">${price.toFixed(2)}</div>
       </div>
       <div className="menu-item-actions">
-        <button className="edit-button" onClick={() => onEdit(id)}>
+        <button className="edit-button" onClick={onEdit}>
           Edit
         </button>
         <button className="delete-button" onClick={() => onDelete(id)}>
@@ -31,51 +33,54 @@ const MenuItem = ({ id, name, price, onEdit, onDelete }) => {
     </div>
   );
 };
+
+/**
+ * The main page component.
+ */
 export default function Page() {
   const [menuItems, setMenuItems] = useState(null);
   const router = useRouter();
-  const params = useSearchParams();
 
+  // State for displaying a success message
   const [displaySuccessMessage, setDisplaySuccessMessage] = useState({
     show: false,
-    type: "", // either add or edit
+    type: "", // either 'add' or 'update'
   });
 
-  useEffect(
-    () => async () => {
+  // Fetch menu items on component mount
+  useEffect(() => {
+    const fetchData = async () => {
       const data = await getData();
-      if (data) {
-        setMenuItems(data);
-      }
-    },
-    [],
-  );
+      setMenuItems(data);
+    };
+    fetchData().catch(console.error);
+  }, []);
 
+  // Detect changes in URL parameters for success messages
   useEffect(() => {
-    if (!!params.get("action")) {
+    const action = new URLSearchParams(window.location.search).get("action");
+    if (action) {
       setDisplaySuccessMessage({
-        type: "add",
+        type: action,
         show: true,
       });
-      router.replace("/");
+      // Clear the URL parameter
+      router.replace(router.pathname);
     }
-  }, [params, router]);
+  }, [router]);
 
+  // Automatically hide the success message after 3 seconds
   useEffect(() => {
     const timer = setTimeout(() => {
       if (displaySuccessMessage.show) {
-        setDisplaySuccessMessage({
-          show: false,
-          type: "",
-        });
+        setDisplaySuccessMessage({ show: false, type: "" });
       }
     }, 3000);
     return () => clearTimeout(timer);
   }, [displaySuccessMessage.show]);
 
+  // Handle deletion of a menu item
   const handleDelete = (id) => {
-    // Logic to delete the menu item
-    console.log("Delete item with id:", id);
     setMenuItems((items) => items.filter((item) => item.id !== id));
   };
 
@@ -87,21 +92,22 @@ export default function Page() {
       {displaySuccessMessage.show && (
         <p className="success-message">
           {displaySuccessMessage.type === "add" ? "Added a" : "Modified a"} menu
+          item.
         </p>
       )}
-      {!!menuItems ? (
+      {menuItems ? (
         menuItems.map((item) => (
           <MenuItem
             key={item.id}
             id={item.id}
             name={item.name}
             price={item.price}
-            onEdit={undefined}
+            onEdit={() => router.push(`/update/${item.id}`)}
             onDelete={handleDelete}
           />
         ))
       ) : (
-        <p>Loading</p>
+        <p>Loading...</p>
       )}
     </div>
   );

menu-frontend/src/app/update/[menuId]/page.js

@@ -0,0 +1,108 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+
+/**
+ * Fetches a menu item by ID.
+ * @param {number} id The ID of the menu item to retrieve.
+ */
+async function getMenu(id) {
+  const res = await fetch(`http://127.0.0.1:8000/api/menu/${id}/`);
+  if (!res.ok) {
+    throw new Error("Failed to retrieve menu");
+  }
+  return res.json();
+}
+
+/**
+ * Updates a menu item by ID.
+ * @param {number} id The ID of the menu item to update.
+ * @param {Object} data The updated data for the menu item.
+ */
+async function updateMenu(id, data) {
+  const res = await fetch(`http://127.0.0.1:8000/api/menu/${id}/`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to update menu");
+  }
+  return res.json();
+}
+
+const Page = ({ params }) => {
+  const router = useRouter();
+  const [formData, setFormData] = useState({ name: "", price: "" });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  /**
+   * Handles form submission.
+   * @param {Event} event The form submission event.
+   */
+  const onFinish = (event) => {
+    event.preventDefault();
+    setIsLoading(true);
+    updateMenu(params.menuId, formData)
+      .then(() => {
+        router.replace("/?action=update");
+      })
+      .catch(() => {
+        setError("An error occurred");
+        setIsLoading(false);
+      });
+  };
+
+  // Cleanup effect for resetting loading state
+  useEffect(() => {
+    return () => setIsLoading(false);
+  }, []);
+
+  // Fetch menu item data on component mount
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const data = await getMenu(params.menuId);
+        setFormData({ name: data.name, price: data.price });
+      } catch (error) {
+        setError(error.message);
+      }
+    };
+    fetchData();
+  }, [params.menuId]);
+
+  return (
+    <form onSubmit={onFinish}>
+      <div className="form-item">
+        <label htmlFor="name">Name</label>
+        <input
+          required
+          name="name"
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+        />
+      </div>
+      <div className="form-item">
+        <label htmlFor="price">Price</label>
+        <input
+          required
+          type="number"
+          name="price"
+          value={formData.price}
+          onChange={(e) => setFormData({ ...formData, price: e.target.value })}
+        />
+      </div>
+      {error && <p className="error-message">{error}</p>}
+      <div>
+        <button disabled={isLoading} className="add-button" type="submit">
+          Submit
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default Page;