A
Anonymous

Coffee Orders

Import React, { useState, useEffect } from "react"; import Navbar from "./Navbar"; import { FaEye, FaEdit, FaTrash } from "react icons/fa"; import { Link } from "react router dom"; const GetAllCoffee = () => { const [coffees, setCoffees] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchCoffees = async () => { try { const response = await fetch("http://localhost:4000/coffees"); if (!response.ok) { throw new Error("Network response was not ok"); } const data = await response.json(); setCoffees(data); } catch (err) { setError("Error fetching coffee data. Please try again later."); } finally { setLoading(false); } }; fetchCoffees(); }, []); const handleDelete = async (id) => { const confirmDelete = window.confirm("Are you sure you want to delete this Coffee?"); if (confirmDelete) { try { const response = await fetch(`http://localhost:4000/coffees/${id}`, { method: 'DELETE' }); if (!response.ok) { throw new Error("Error deleting coffee item"); } setCoffees(coffees.filter((coffee) => coffee._id !== id)); } catch (err) { alert("Error deleting Coffee: " + err.message); } } }; if (loading) { return ( <div className="flex items center justify center h screen"> <div className="animate spin rounded full h 32 w 32 border t 2 border b 2 border gray 900"></div> </div> ); } if (error) { return ( <div className="bg red 100 border border red 400 text red 700 px 4 py 3 rounded relative" role="alert"> <strong className="font bold">Error!</strong> <span className="block sm:inline"> {error}</span> </div> ); } return ( <div className="bg gray 900 min h screen text white"> <Navbar /> <div className="container mx auto p 6" style={{marginTop:"40px"}}> <h2 className="text 3xl font bold mb 6">Coffee Orders</h2> <div className="overflow x auto bg gray 800 shadow md rounded lg"> <table className="min w full table auto"> <thead> <tr className="bg gray 700 text gray 300 uppercase text sm leading normal"> <th className="py 3 px 6 text left">Customer ID</th> <th className="py 3 px 6 text left">Customer Name</th> <th className="py 3 px 6 text left">Order Item</th> <th className="py 3 px 6 text center">Number of Items</th> <th className="py 3 px 6 text center">Table Number</th> <th className="py 3 px 6 text center">Category</th> <th className="py 3 px 6 text center">Actions</th> </tr> </thead> <tbody className="text gray 300 text sm font light"> {coffees.map((coffee) => ( <tr key={coffee._id} className="border b border gray 600 hover:bg gray 700"> <td className="py 3 px 6 text left whitespace nowrap">{coffee.Customer_id}</td> <td className="py 3 px 6 text left">{coffee.Customer_Name}</td> <td className="py 3 px 6 text left">{coffee.Order_item}</td> <td className="py 3 px 6 text center">{coffee.No_Of_Item}</td> <td className="py 3 px 6 text center">{coffee.Table_No}</td> <td className="py 3 px 6 text center">{coffee.Category}</td> <td className="py 3 px 6 text center"> <div className="flex justify center space x 4"> <Link to={`/coffees/${coffee._id}`} className="text blue 500 hover:text blue 700"> <FaEye size={20} /> </Link> <Link to={`/Coffees/update/${coffee._id}`} className="text yellow 500 hover:text yellow 700"> <FaEdit size={20} /> </Link> <button onClick={() => handleDelete(coffee._id)} className="text red 500 hover:text red 700" > <FaTrash size={20} /> </button> </div> </td> </tr> ))} </tbody> </table> </div> <div className="flex justify start p 5"> <Link to="/Coffees/add" className="bg blue 500 text white font bold py 2 px 4 rounded hover:bg blue 600 transition duration 300 ease in out"> Add Data </Link> </div> </div> </div> ); }; export default GetAllCoffee; update this code make more beautiful and atractive

Prompt
Component Preview

About

Explore and manage your coffee orders seamlessly with our React component. View, edit, or delete orders with ease and enhance your coffee shop's efficiency.

Share

Last updated 1 month ago