Adding CRUD functionality | Creating an E-commerce Website with the MERN Stack

Project Goals

In this fourth stage of the MERN project, you will:

Add a NavBar component that will display on all pages of the frontend app.
Add components and pages to support updating and deleting product data for the MongoDB database.

Adding a NavBar component

Follow these steps to create a NavBar component for including on every page component of your frontend app.

In your frontend/src/components sub-folder, create a new text file named NavBar.jsx.

Paste the following code into this file:

import React from "react";
import { useNavigate } from "react-router-dom";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

const NavBar = () => {
  // Using the useNavigate hook from react-router-dom to get the navigate function
  const navigate = useNavigate();

  // Function to navigate to the home page
  const goToHome = () => {
    navigate("/");
  };

  // Function to navigate to the add product page
  const goToAddProduct = () => {
    navigate("/addProduct");
  };

  // The component returns a Box containing an AppBar, which in turn contains a Toolbar.
  // The Toolbar contains a Typography component for the title and two Button components for navigation.
  return (
    <>
      <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
          <Toolbar>
            <Typography
              variant="h6"
              component="div"
              sx={{
                flexGrow: 1,
              }}
            >
              E-COM
            </Typography>
            <Button color="inherit" onClick={goToHome}>
              Home
            </Button>
            <Button color="inherit" onClick={goToAddProduct}>
              Add product
            </Button>
          </Toolbar>
        </AppBar>
      </Box>
    </>
  );
};

export default NavBar;

The useNavigate hook, imported from the React Router DOM library, enables users to navigate between different pages of the app. The constant navigate is assigned the useNavigate hook. This hook enables the app to programmatically navigate between different pages.

The goToHome() and goToAddProduct() functions are defined to handle navigation when the “Home” or “Add product” button is clicked on the NavBar. They call the navigate function with a string argument representing the path of the page that the user wants to navigate to.

The Toolbar component contains a Typography component that displays the text "E-COM" and the "Home" and "Add product" buttons. When either button is clicked, the appropriate function (goToHome() or goToAddProduct()) is called to navigate to the desired page.

Adding AddProduct and ProductUpdate components

Follow these steps to create components for adding a new product and updating an existing one.

In your frontend/src/components sub-folder, download the following two files: AddProduct.jsx UpdateProduct.jsx

In your frontend/src/pages sub-folder, create a new text file named AddProductPage.jsx and paste the code below into it:


  import React, { useEffect, useState } from "react";
  import NavBar from "../components/NavBar";
  import AddProduct from "../components/AddProduct";
                      
  const AddProductPage = () => {
      return (
          <>
              <NavBar />
              <AddProduct />
          </>
      );
  };
                      
  export default AddProductPage;

Also in your frontend/src/pages sub-folder, create a new text file named UpdateProductPage.jsx and paste the code below into it:


import React, { useEffect, useState } from "react";
import NavBar from "../components/NavBar";
import UpdateProduct from "../components/UpdateProduct";
                    
const UpdateProductPage = () => {
    return (
        <>
            <NavBar />
            <UpdateProduct />
        </>
    );
};
                    
export default UpdateProductPage;

In your frontend/src sub-folder, update your App.jsx file with the code below:


// Import Route and Routes from the React router library
import { Route, Routes } from "react-router-dom";
import HomePage from "./pages/HomePage";
import AddProductPage from "./pages/AddProductPage";
import UpdateProductPage from "./pages/UpdateProductPage";
                
function App() {
    return (
        <Routes>
            {/* Use Home component for the root path */}
            <Route index element={<HomePage />} />
            <Route path="/addProduct" element={<AddProductPage />} />
            <Route path="/update/:id" element={<UpdateProductPage />} />
        </Routes>
    );
}
                
export default App;

Updating your ProductCard component

In order to implement the update and delete functionalities, you need to make some modifications to ProductCard.jsx in your frontend/src/components sub-folder.

Add four new import statements to the top of the file:


import CardActions from "@mui/material/CardActions";
import { Button } from "@mui/material";
import { useNavigate } from "react-router";
import axios from "axios";

Now, inside the ProductCard function, add a handleUpdate function that is responsible for navigating to the update page when called.


// Use the useNavigate hook from react-router-dom to get the navigate function
const navigate = useNavigate();

const handleUpdate = (id) => {
    // Use the navigate function to go to the update page for the product with the given ID
    navigate("/update/" + id);
};

Next add a handleDelete function:


const handleDelete = async (id) => {
    try {
        const response = await axios.delete("http://localhost:5000/delete/" + id);
        console.log(response.data);
        // If the server responds with "Product deleted!", call the getProduct function from the props
        // This will likely refresh the list of products
        if (response.data === "Product deleted!") {
            props.getProduct();
            }
        } catch (e) {
            console.log(e);
    }
};

Finally, after closing the </CardContent> tag, include the CardActions component below:


<CardActions>
    <Stack direction="row" gap={2}>
        <Button
            color="primary"
            variant="contained"
            onClick={() => handleUpdate(product._id)}
            >
            Update
        </Button>
        <Button
            color="error"
            variant="contained"
            onClick={() => handleDelete(product._id)}
            >
            Delete
        </Button>
    </Stack>
</CardActions>

With these changes, the card component is now able to offer product update and delete functions.