Send date from react-date picker to backend - node.js

Question

I am trying to learn how to make reservation but i am stuck at the first step.
In particular i created a Redux action that sends the picked date from frontend to backend but it doesn't seem to reach the database.
This is my code:
Model:
import mongoose from 'mongoose';
var daySchema = new mongoose.Schema({
date: { type: Date }
});
const Day = mongoose.model('Day', daySchema);
export default Day;
Router:
import express from 'express';
import expressAsyncHandler from 'express-async-handler';
import Day from '../models/day.js';
const dayRouter = express.Router();
dayRouter.post(
'/day',
expressAsyncHandler(async (req, res) => {
const date = new Day(req.body.date);
const chosenDay = await date.save();
if (chosenDay) {
res.send({
date: chosenDay
});
} else {
res.status(401).send({ message: 'unable to save to database' });
}
})
);
export default dayRouter;
Redux-action:
import Axios from 'axios';
import { DATE_CREATE_FAIL, DATE_CREATE_REQUEST, DATE_CREATE_SUCCESS } from '../constants/dateConstants';
export const createDate = (date) => async (dispatch) => {
try {
dispatch({ type: DATE_CREATE_REQUEST });
const { data } = await Axios.post(
'/api/day',
date,
);
dispatch({
type: DATE_CREATE_SUCCESS,
payload: data,
success: true,
});
} catch (error) {
dispatch({
type: DATE_CREATE_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
Redux-reducer:
import { DATE_CREATE_FAIL, DATE_CREATE_REQUEST, DATE_CREATE_SUCCESS } from '../constants/dateConstants';
export const dateCreateReducer = (state = {}, action) => {
switch (action.type) {
case DATE_CREATE_REQUEST:
return { loading: true };
case DATE_CREATE_SUCCESS:
return { loading: false, date: action.payload, success: true };
case DATE_CREATE_FAIL:
return { loading: false, error: action.payload };
default:
return state;
}
};
Redux-constants:
export const DATE_CREATE_REQUEST = 'DATE_CREATE_REQUEST';
export const DATE_CREATE_SUCCESS = 'DATE_CREATE_SUCCESS';
export const DATE_CREATE_FAIL = 'DATE_CREATE_FAIL';
Server:
import http from 'http';
import express from 'express';
import path from 'path';
import mongoose from 'mongoose';
import bodyParser from 'body-parser';
import config from './config.js';
import dayRouter from './routers/dayRouter.js';
const mongodbUrl = config.MONGODB_URL;
mongoose
.connect(mongodbUrl, {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true,
})
.then(() => console.log('db connected.'))
.catch((error) => console.log(error.reason));
const app = express();
app.use(bodyParser.json());
app.use('/api/day', dayRouter);
const __dirname = path.resolve();
app.use(express.static(path.join(__dirname, '/frontend/build')));
app.get('*', (req, res) => {
res.sendFile(path.join(`${__dirname}/frontend/build/index.html`));
});
app.use((err, req, res, next) => {
res.status(500).send({ message: err.message });
});
const httpServer = http.Server(app);
httpServer.listen(config.PORT, () => {
console.log(`Server started at http://localhost:${config.PORT}`);
});
React component:
import React, { useState } from 'react';
import Button from '#material-ui/core/Button';
import { makeStyles } from '#material-ui/core/styles';
import DatePicker from 'react-datepicker';
import setHours from "date-fns/setHours";
import setMinutes from "date-fns/setMinutes";
import { useDispatch } from 'react-redux';
import { createDate } from '../actions/dateAction';
function DayReservationScreen() {
const [startDate, setStartDate] = useState(
setHours(setMinutes(new Date(), 30), 16)
);
const dispatch = useDispatch();
const submitHandler = (e) => {
e.preventDefault();
dispatch(
createDate({
date: startDate
})
);
console.log(startDate)
};
return (
<div>
<form onSubmit={submitHandler}>
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
showTimeSelect
/* showTimeSelectOnly */
timeIntervals={15}
excludeTimes={[
setHours(setMinutes(new Date(), 0), 17),
setHours(setMinutes(new Date(), 30), 18),
setHours(setMinutes(new Date(), 30), 19),
setHours(setMinutes(new Date(), 30), 17)
]}
dateFormat="MMMM d, yyyy h:mm aa"
/>
<Button
variant="contained"
size="small"
color="primary"
style={{
width: 80,
margin: 5
}}
className={classes.button}
type='submit'
>
Submit
</Button>
</form>
</div>
);
}
export default DayReservationScreen;
What am i doing wrong?

Answer 1

The front-end part is working correctly. But you have server side issues.
You are using the dayRouter at /api/day route and in the router itself you use path /day.
Therefore, the full path to the endpoint will be http://localhost:PORT/api/day/day.
And from the frontend, you send requests to http://localhost:PORT/api/day
Just edit your router:
import express from 'express';
import expressAsyncHandler from 'express-async-handler';
import Day from '../models/day.js';
const dayRouter = express.Router();
dayRouter.post(
'/',
expressAsyncHandler(async (req, res) => {
const date = new Day(req.body.date);
const chosenDay = await date.save();
if (chosenDay) {
res.send({
date: chosenDay
});
} else {
res.status(401).send({ message: 'unable to save to database' });
}
})
);
export default dayRouter;