manage orders

import axios from "axios";
import React, { useEffect, useState } from "react";

const ManageOrders = () => {
  const [manageAllOrders, setManageAllOrders] = useState([]);
  const [status, setStatus] = useState(false);

  useEffect(() => {
    axios
      .get("http://localhost:5000/manageAllOrders")
      .then((res) => setManageAllOrders(res.data));
  }, [status]);

  const handleDelete = (id) => {
    const proceed = window.confirm("Are you sure, you want to delete ?");
    if (proceed) {
      axios.delete(`http://localhost:5000/deleteOrder/${id}`).then((res) => {
        if (res.data.deletedCount > 0) {
          const remaining = manageAllOrders.filter(
            (service) => service._id !== id
          );
          setManageAllOrders(remaining);
        }
      });
    }
  };

  const handleEditStatus = (id) => {
    axios.put(`http://localhost:5000/updateStatus/${id}`).then((res) => {
      if (res.data.modifiedCount) {
        alert("Status Updated to Approved");
        setStatus(true);
      }
    });
  };

  if (!manageAllOrders) {
    return (
      <div
        className=" spinner-border text-primary text-center"
        role="status"
      ></div>
    );
  } else if (manageAllOrders.length === 0) {
    return (
      <div className="container  text-center" style={{ marginBottom: "380px" }}>
        <div>
          <img
            className="img-fluid"
            src="https://i.ibb.co/277JQj1/nos-removebg-preview-1.png"
            alt=""
          />
        </div>
        <h2 className="text-danger">No Result Found !</h2>
      </div>
    );
  } else {
    return (
      <div
        style={{ marginBottom: "300px" }}
        className="container table-responsive "
      >
        <table className="table caption-top mt-3">
          <caption>List of Orders</caption>
          <thead>
            <tr>
              <th scope="col">Sr.</th>
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Date</th>
              <th scope="col">Address</th>
              <th scope="col">Service Name</th>
              <th scope="col">Status</th>
              <th scope="col" className="text-center">
                Edit
              </th>
              <th scope="col" className="text-center">
                Action
              </th>
            </tr>
          </thead>
          <tbody>
            {manageAllOrders.map((order, index) => {
              return (
                <tr>
                  <th scope="row">{index + 1}</th>
                  <td>{order.userName}</td>
                  <td>{order.userEmail}</td>
                  <td>{order.date}</td>
                  <td>{order.address}</td>
                  <td>{order.name}</td>
                  <td>
                    <span className="fs-5">{order.status}</span>
                  </td>
                  <td>
                    {" "}
                    <i
                      className="btn btn-primary mx-4 bi bi-check2-square"
                      onClick={() => handleEditStatus(order._id)}
                    >
                      {" "}
                      Approve
                    </i>
                  </td>
                  <td>
                    <button
                      className="btn btn-danger"
                      onClick={() => handleDelete(order._id)}
                    >
                      <i class="bi bi-trash"></i>
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
};

export default ManageOrders;

// -----------------------------------------------------------------------------
// import React, { useEffect, useState } from "react";

// const ManageOrders = () => {
//   const [services, setServices] = useState([]);

//   useEffect(() => {
//     fetch("http://localhost:5000/manageAllOrders")
//       .then((res) => res.json())
//       .then((data) => setServices(data));
//   }, []);

//   const handleDelete = (id) => {
//     const url = `http://localhost:5000/deleteOrder/${id}`;
//     fetch(url, {
//       method: "DELETE",
//     })
//       .then((res) => res.json())
//       .then((data) => {
//         console.log(data);

//         if (data.deletedCount) {
//           alert("Deleted Succfully");
//           const remaining = services.filter((service) => service._id !== id);
//           setServices(remaining);
//         }
//       });
//   };
//   return (
//     <div>
//       <h1 className="text-4xl text-gray-500 font-extrabold mt-12">
//         Manage Orders
//       </h1>
//       {services.map((service) => (
//         <div className="grid grid-cols-2 md:ml-56  " key={service._id}>
//           <h3 className="text-2xl ">{service.name}</h3>
//           <button
//             onClick={() => handleDelete(service._id)}
//             className="text-white bg-red-500 hover:bg-red-800 focus:ring-4 focus:ring-blue-300 md:w-1/4 w-1/8 mb-2 font-medium rounded-lg text-sm md:px-5 md:py-2 px-16 py-2 text-center"
//           >
//             Delete
//           </button>
//         </div>
//       ))}
//     </div>
//   );
// };

// export default ManageOrders;