how to delete a user from the client side mern stack?

Question

hi eveyone i am having issue to delete a user from client side app and also delete the user from the data base, i want the client side to delete a user from the data base, i have checked my api on the server side and in postman i am deleting the user successfully, when i try to make the same request from the client side im not deleting instead when i make the request with the id to delete the user im getting back id undefined, this is a mern stack app which i am making, any help would be much appreciated

controller

export const deleteOneUser = async (req, res, next) => {
  const { id } = req.body;
  try {
    const user = await UserModal.findByIdAndRemove(req.params.id);

    return res.status(200).json({
      oneUserDeleted: true,
      data: user,
    });
  } catch (error) {
    return res.status(500).json({
      sucess: false,
      cannotDeleteUser: "Server Error",
    });
  }
};

export const getOneUser = async (req, res, next) => {
  try {
    const user = await UserModal.findById(req.params.id);

    if (!user) {
      return res.status(404).json({
        success: false,
        error: "No user found",
      });
    }

    return res.status(200).json({
      oneUserFound: true,
      data: user,
    });
  } catch (error) {
    return res.status(500).json({
      sucess: false,
      error: "Server Error",
    });
  }
};

user Routes

import express from "express";
const router = express.Router();
import auth from "../middleware/auth.js";

import {
  getOneUser,
  deleteOneUser,
 } from "../controllers/user.js";

router.delete("/userId/:id", deleteOneUser);

router.get("/userId/:id", getOneUser);

export default router;

index.js

import express from "express";
import mongoose from "mongoose";
import cors from "cors";
import colors from "colors";
import morgan from "morgan";

import userRouter from "./routes/user.js";
import transactionsRouter from "./routes/transactions.js";

const app = express();

app.use(express.json({ limit: "30mb", extended: true }));
app.use(express.urlencoded({ limit: "30mb", extended: true }));
app.use(cors());
app.use(morgan("dev"));

app.use("/user", userRouter);
app.use("/login/account/transactions", transactionsRouter);

const CONNECTION_URL =
  "CONNECTED TO MONGO DB CLUSTER";
const PORT = process.env.PORT || 5000;

mongoose
  .connect(CONNECTION_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() =>
    app.listen(PORT, () =>
      console.log(`Server running on port ${PORT}`.cyan.bold)
    )
  )
  .catch((error) => console.log(error.message));

mongoose.set("useFindAndModify", false);

Client Side React.js --> GLOBAL STATE

import React, { createContext, useReducer } from "react";
import AppReducer from "./AppReducer";
import axios from "axios";

// Initial state
const initialState = {
  transactions: [],
  accounts: [],
  error: null,
  loading: true,
  user: [],
};

// Create context
export const GlobalContext = createContext(initialState);
console.log(initialState);

// Provider Component
export const GlobalProvider = ({ children }) => {
  const [state, dispatch] = useReducer(AppReducer, initialState);

  // Actions
  async function getTransactions() {
    try {
      const res = await axios.get("/login/account/transactions");

      dispatch({
        type: "GET_TRANSACTIONS",
        payload: res.data.data,
      });
    } catch (error) {
      dispatch({
        type: "TRANSACTIONS_ERROR",
        payload: error.response.data.error,
      });
    }
  }


  async function deleteUser(id, user) {
    try {
      await axios.delete(`/user/userId/${id}`, user);

      dispatch({
        type: "DELETE_ONE_USER",
        payload: id,
      });
    } catch (error) {
      dispatch({
        type: "TRANSACTIONS_ERROR",
        payload: error.response.data.error,
      });
    }
  }

  async function addTransaction(transaction, amount) {
    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };

    try {
      const res = await axios.post(
        "/login/account/transactions",
        transaction,
        config
      );

      dispatch({
        type: "ADD_TRANSACTION",
        payload: res.data.data,
        amount: +amount,
      });
    } catch (error) {
      dispatch({
        type: "TRANSACTION_ERROR",
        payload: error.response.data.error,
      });
    }
  }

  async function deleteTransaction(transaction, amount) {
    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };

    try {
      const res = await axios.post(
        "/login/account/transactions",
        transaction,
        config
      );

      dispatch({
        type: "DELETE_TRANSACTION",
        payload: res.data.data,
        amount: -amount,
      });
    } catch (error) {
      dispatch({
        type: "TRANSACTION_ERROR",
        payload: error.response.data.error,
      });
    }
  }



  return (
    
      {children}
    
  );
};

AppReducer

/* eslint-disable import/no-anonymous-default-export */

export default (state, action) => {
  switch (action.type) {
    case "GET_TRANSACTIONS":
      return {
        ...state,
        loading: false,
        transactions: action.payload,
      };
    case "DELETE_ONE_USER":
      return {
        ...state,
        loading: false,
        user: state.users.filter((user) => user._id === action.payload),
      };
    case "ADD_TRANSACTION":
      return {
        ...state,
        transactions: [...state.transactions, action.payload],
      };
    case "DELETE_TRANSACTION":
      return {
        ...state,
        transactions: [...state.transactions, action.payload],
      };
    case "TRANSACTION_ERROR":
      return {
        ...state,
        error: action.payload,
      };
    default:
      return state;
  }
};

Account Transactions --> THIS IS WHERE IM TRYING TO EXECUTE THE CODE TO DELETE USER

import React, { useState, useContext, useEffect } from "react";
import { GlobalContext } from "../../context/GlobalState";

import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const AccountTransactions = () => {
  const {
    deleteTransaction,
    addTransaction,
    user: userId,
    deleteUser,
  } = useContext(GlobalContext);


  const [amount, setAmount] = useState("");
  const [depositMoney, setDepositMoney] = useState({ DepositMoney: "" });
  const [withdrawMoney, setWithdrawMoney] = useState({ WithdrawMoney: "" });
  const [user, setUser] = useState({
    name: "",
    password: "",
    firstName: "",
    lastName: "",
    email: "",
  });


  const onSubmitUser = (e) => {
    e.preventDefault(e);
    deleteUser(userId);

    setUser({ ...user, [e.target.name]: e.target.value });
    e.target.reset(user);
  };

  const onSubmit = (e) => {
    e.preventDefault(e);
    notifyDeposit();

    const newTransaction = {
      amount: +amount,
    };

    setDepositMoney({ ...depositMoney, [e.target.name]: e.target.value });
    addTransaction(newTransaction);
    e.target.reset(depositMoney);
  };

  const onSubmitWithdraw = (e) => {
    e.preventDefault(e);
    notifyWithdrawal();

    const Transaction = {
      amount: -amount,
    };

    setWithdrawMoney({ ...withdrawMoney, [e.target.name]: e.target.value });
    deleteTransaction(Transaction);
    e.target.reset(withdrawMoney);
  };

  const notifyDeposit = () =>
    toast.success("Successfully Deposited!", {
      className: "custom Toast",
      draggable: true,
      position: toast.POSITION.TOP_CENTER,
    });

  const notifyWithdrawal = () =>
    toast.warn("successfull withdraw!", {
      className: "custom Toast",
      draggable: true,
      position: toast.POSITION.TOP_CENTER,
    });

  return (
    
      
        
          
            
              Deposit Money
              
                
                   setAmount(e.target.value)}
                  />

                  
                
              
            
          

          
            
              Withdraw Money
              
                
                   setAmount(e.target.value)}
                  />
                  
                
              
            
          

          
            Close Account
            
              
                
                   setUser(e.target.value)}
                  />

                   setUser(e.target.value)}
                    value={user.lastName}
                  />
                   setUser(e.target.value)}
                    value={user.firstName}
                  />
                   setUser(e.target.value)}
                    value={user.email}
                  />

                   setUser(e.target.value)}
                    value={user.password}
                  />
                  
                
              
            
          
        
      
    
  );
};

export default AccountTransactions;

how to delete a user from the client side mern stack?

0 Answers