POST http://localhost:3000/api/devolucions 400 (Bad Request) - node.js

Question

I'm pretty new to javascript, and I'm trying to create a page to return orders for an e-commerce website that I'm creating. I want a customer to be able to start a return when they click the Return Order button on their orders history page. When I click on the Return Order button I'm getting a POST http://localhost:3000/api/devolucions 400 (Bad Request). This post is created in the backend in devolucionRoute.js and called in the frontend in devolucionActions.js. I'm unsure why I am getting this error, and I would really appreciate any help or guidance on how to fix this issue.
Thank you!
Note: devolucion is the name that I used in place of return
devolucionActions.js
import Axios from 'axios';
import {
DEVOLUCION_CREATE_FAIL,
DEVOLUCION_CREATE_REQUEST,
DEVOLUCION_CREATE_SUCCESS,
DEVOLUCION_DETAILS_FAIL,
DEVOLUCION_DETAILS_REQUEST,
DEVOLUCION_DETAILS_SUCCESS,
DEVOLUCION_SUMMARY_REQUEST,
DEVOLUCION_SUMMARY_SUCCESS,
} from '../constants/devolucionConstants';
export const createDevolucion = (devolucion) => async (dispatch, getState) => {
dispatch({ type: DEVOLUCION_CREATE_REQUEST, payload: devolucion });
try {
const {
userSignin: { userInfo },
} = getState();
const { data } = await Axios.post('/api/devolucions', devolucion, {
headers: {
Authorization: `Bearer ${userInfo.token}`,
},
});
dispatch({ type: DEVOLUCION_CREATE_SUCCESS, payload: data.devolucion });
} catch (error) {
dispatch({
type: DEVOLUCION_CREATE_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
export const detailsDevolucion = (devolucionId) => async (dispatch, getState) => {
dispatch({ type: DEVOLUCION_DETAILS_REQUEST, payload: devolucionId });
const {
userSignin: { userInfo },
} = getState();
try {
const { data } = await Axios.get(`/api/devolucions/${devolucionId}`, {
headers: { Authorization: `Bearer ${userInfo.token}` },
});
dispatch({ type: DEVOLUCION_DETAILS_SUCCESS, payload: data });
} catch (error) {
const message =
error.response && error.response.data.message
? error.response.data.message
: error.message;
dispatch({ type: DEVOLUCION_DETAILS_FAIL, payload: message });
}
};
export const summaryDevolucion = () => async (dispatch, getState) => {
dispatch({ type: DEVOLUCION_SUMMARY_REQUEST });
const {
userSignin: { userInfo },
} = getState();
try {
const { data } = await Axios.get('/api/devolucions/summary', {
headers: { Authorization: `Bearer ${userInfo.token}` },
});
dispatch({ type: DEVOLUCION_SUMMARY_SUCCESS, payload: data });
} catch (error) {
dispatch({
type: DEVOLUCION_CREATE_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
Backend
devolucionRouter.js
import express from 'express';
import expressAsyncHandler from 'express-async-handler';
import Order from '../models/orderModel.js';
import Devolucion from '../models/devolucionModel.js';
import User from '../models/userModel.js';
import Product from '../models/productModel.js';
import {isAdmin, isAuth, isSellerOrAdmin} from '../utils.js';
const devolucionRouter = express.Router();
devolucionRouter.get(
'/mine',
isAuth,
expressAsyncHandler(async (req, res) => {
const devolucion= await Devolucion.find({ user: req.user._id });
res.send(devolucion);
})
);
devolucionRouter.post(
'/',
isAuth,
expressAsyncHandler(async (req, res) => {
if (req.body.devolucionItems.length === 0) {
res.status(400).send({ message: 'No Return' });
} else {
const devolucion = new Devolucion({
seller: req.body.orderItems[0].seller,
orderItems: req.body.orderItems,
devolucionItems: req.body.devolucionItems,
shippingAddress: req.body.shippingAddress,
paymentMethod: req.body.paymentMethod,
itemsPrice: req.body.itemsPrice,
itemsProfit: req.body.itemsProfit,
shippingPrice: req.body.shippingPrice,
taxPrice: req.body.taxPrice,
totalPrice: req.body.totalPrice,
totalProfit: req.body.totalProfit,
user: req.user._id,
});
const createdDevolucion = await devolucion.save();
res
.status(201)
.send({ message: 'New Return Created', devolucion: createdDevolucion });
}
})
);
devolucionRouter.get(
'/:id',
isAuth,
expressAsyncHandler(async (req, res) => {
const devolucion = await Devolucion.findById(req.params.id);
if (devolucion) {
res.send(devolucion);
} else {
res.status(404).send({ message: 'Return Not Found' });
}
})
);
export default devolucionRouter;
server.js
import express from 'express';
import mongoose from 'mongoose';
import dotenv from 'dotenv';
import path from 'path';
import userRouter from './routers/userRouter.js';
import productRouter from './routers/productRouter.js';
import orderRouter from './routers/orderRouter.js';
import devolucionRouter from './routers/devolucionRouter.js';
import uploadRouter from './routers/uploadRouter.js';
dotenv.config();
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
mongoose.connect(process.env.MONGODB_URL || 'mongodb://localhost/AM', {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true,
});
app.use('/api/uploads', uploadRouter);
app.use('/api/users', userRouter);
app.use('/api/products', productRouter);
app.use('/api/orders', orderRouter);
app.use('/api/devolucions', devolucionRouter);
app.get('/api/config/paypal', (req, res) => {
res.send(process.env.PAYPAL_CLIENT_ID || 'sb');
});
const __dirname = path.resolve();
app.use('/uploads', express.static(path.join(__dirname, '/uploads')));
app.get('/', (req, res) => {
res.send('Server is ready');
});
app.use((err, req, res, next) => {
res.status(500).send({ message: err.message });
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(`Serve at http://localhost:${port}`);
});
OrderHistoryScreen.js (Frontend)
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { listOrderMine, detailsOrder } from '../actions/orderActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import {createDevolucion } from '../actions/devolucionActions';
import { DEVOLUCION_CREATE_RESET } from '../constants/devolucionConstants';
export default function OrderHistoryScreen(props) {
const orderId = props.match.params.id;
const order = useSelector((state) => state.order);
const devolucionCreate = useSelector((state) => state.devolucionCreate);
const {success, devolucion } = devolucionCreate;
const orderMineList = useSelector((state) => state.orderMineList);
const { loading, error, orders } = orderMineList;
const dispatch = useDispatch();
useEffect(() => {
dispatch(listOrderMine());
dispatch(detailsOrder(orderId));
}, [dispatch, orderId]);
const placeDevolucionHandler = () => {
dispatch(createDevolucion({ ...order, devolucionItems: order.orderItems }));
};
useEffect(() => {
if (success) {
props.history.push(`/devolucion/${devolucion._id}`);
dispatch({ type: DEVOLUCION_CREATE_RESET });
}
}, [dispatch, devolucion, props.history, success]);
return (
<div>
<h1>Order History</h1>
{loading ? (
<LoadingBox></LoadingBox>
) : error ? (
<MessageBox variant="danger">{error}</MessageBox>
) : (
<table className="table">
<thead>
<tr>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
{orders.map((order) => (
<tr key={order._id}>
<td>
<button
type="button"
onClick={placeDevolucionHandler}
className="small"
// disabled={cart.cartItems.length === 0}
>
Return Order
</button>
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
);
}
devolucionReducer.js (Frontend)
import {
DEVOLUCION_CREATE_FAIL,
DEVOLUCION_CREATE_REQUEST,
DEVOLUCION_CREATE_RESET,
DEVOLUCION_CREATE_SUCCESS,
DEVOLUCION_DETAILS_FAIL,
DEVOLUCION_DETAILS_REQUEST,
DEVOLUCION_DETAILS_SUCCESS,
DEVOLUCION_DELETE_REQUEST,
DEVOLUCION_DELETE_SUCCESS,
DEVOLUCION_DELETE_FAIL,
DEVOLUCION_DELETE_RESET,
DEVOLUCION_SUMMARY_REQUEST,
DEVOLUCION_SUMMARY_SUCCESS,
DEVOLUCION_SUMMARY_FAIL,
} from '../constants/devolucionConstants';
export const devolucionCreateReducer = (state = {}, action) => {
switch (action.type) {
case DEVOLUCION_CREATE_REQUEST:
return { loading: true };
case DEVOLUCION_CREATE_SUCCESS:
return { loading: false, success: true, devolucion: action.payload };
case DEVOLUCION_CREATE_FAIL:
return { loading: false, error: action.payload };
case DEVOLUCION_CREATE_RESET:
return {};
default:
return state;
}
};
export const devolucionDetailsReducer = (
state = { loading: true },
action
) => {
switch (action.type) {
case DEVOLUCION_DETAILS_REQUEST:
return { loading: true };
case DEVOLUCION_DETAILS_SUCCESS:
return { loading: false, devolucion: action.payload };
case DEVOLUCION_DETAILS_FAIL:
return { loading: false, error: action.payload };
default:
return state;
}
};
export const devolucionDeleteReducer = (state = {}, action) => {
switch (action.type) {
case DEVOLUCION_DELETE_REQUEST:
return { loading: true };
case DEVOLUCION_DELETE_SUCCESS:
return { loading: false, success: true };
case DEVOLUCION_DELETE_FAIL:
return { loading: false, error: action.payload };
case DEVOLUCION_DELETE_RESET:
return {};
default:
return state;
}
};
export const devolucionSummaryReducer = (
state = { loading: true, summary: {} },
action
) => {
switch (action.type) {
case DEVOLUCION_SUMMARY_REQUEST:
return { loading: true };
case DEVOLUCION_SUMMARY_SUCCESS:
return { loading: false, summary: action.payload };
case DEVOLUCION_SUMMARY_FAIL:
return { loading: false, error: action.payload };
default:
return state;
}
};
store.js (frontend)
import { createStore, compose, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { cartReducer } from './reducers/cartReducers';
import {
devolucionCreateReducer,
devolucionDeleteReducer,
devolucionShipReducer,
devolucionDeliverReducer,
devolucionDetailsReducer,
devolucionListReducer,
devolucionMineListReducer,
devolucionPayReducer,
devolucionSummaryReducer,
} from './reducers/devolucionReducers';
import {
orderCreateReducer,
orderDeleteReducer,
orderShipReducer,
orderDeliverReducer,
orderDetailsReducer,
orderListReducer,
orderMineListReducer,
orderPayReducer,
orderSummaryReducer,
orderReducer,
} from './reducers/orderReducers';
import {
productCategoryListReducer,
productCreateReducer,
productDeleteReducer,
productDetailsReducer,
productListReducer,
productReviewCreateReducer,
productUpdateReducer,
} from './reducers/productReducers';
const initialState = {
userSignin: {
userInfo: localStorage.getItem('userInfo')
? JSON.parse(localStorage.getItem('userInfo'))
: null,
},
cart: {
cartItems: localStorage.getItem('cartItems')
? JSON.parse(localStorage.getItem('cartItems'))
: [],
shippingAddress: localStorage.getItem('shippingAddress')
? JSON.parse(localStorage.getItem('shippingAddress'))
: {},
paymentMethod: 'PayPal',
},
};
const reducer = combineReducers({
devolucionCreate: devolucionCreateReducer,
devolucionDetails: devolucionDetailsReducer,
devolucionDelete: devolucionDeleteReducer,
devolucionSummary: devolucionSummaryReducer,
productList: productListReducer,
productDetails: productDetailsReducer,
cart: cartReducer,
order: orderReducer,
userSignin: userSigninReducer,
userRegister: userRegisterReducer,
orderCreate: orderCreateReducer,
orderDetails: orderDetailsReducer,
orderPay: orderPayReducer,
orderMineList: orderMineListReducer,
orderSummary: orderSummaryReducer,
userDetails: userDetailsReducer,
userUpdateProfile: userUpdateProfileReducer,
userUpdate: userUpdateReducer,
productCreate: productCreateReducer,
productUpdate: productUpdateReducer,
productDelete: productDeleteReducer,
orderList: orderListReducer,
orderDelete: orderDeleteReducer,
orderShip: orderShipReducer,
orderDeliver: orderDeliverReducer,
productReviewCreate: productReviewCreateReducer,
userList: userListReducer,
userDelete: userDeleteReducer,
productCategoryList: productCategoryListReducer,
});
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancer(applyMiddleware(thunk))
);
export default store;