Day 158 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 158 of my software engineering track! Today, I completed the Admin List Items Page (List.jsx) for my Tomato — Food Delivery App, connecting real-time REST API endpoints to display and delete database records seamlessly! 📦🍔⚡

Managing inventory in an e-commerce platform requires fast data synchronization and immediate visual feedback upon state changes. Here is how I built the list module today.

---

🛠️ Deconstructing the Day 158 Admin List Module

As captured in my code editor and admin frontend views (Screenshot 377, 380, and 381):

1. Dynamic Data Fetching with useEffect

• Created an asynchronous fetchList() function using Axios to hit the backend REST endpoint (/api/food/list).
• Linked it inside useEffect() to automatically pull all active dishes from the MongoDB database as soon as the component renders:

javascript
  const fetchList = async () => {
    const response = await axios.get(backendURL + "/api/food/list");
    if (response.data.success) setList(response.data.data);
  }; const fetchList = async () => {
  const response = await axios.get(backendURL + "/api/food/list");
  if (response.data.success) {
    setList(response.data.data);
  } else {
    toast.error(response.data.message);
  }
};

useEffect(() => {
  fetchList();
}, []); const removeFood = async (id) => {
  const response = await axios.post(backendURL + "/api/food/remove", { id: id });
  await fetchList();
  if (response.data.success) {
    toast.success(response.data.message);
  }
};