Commit 7285b5c4 authored by CHAERIN KIM's avatar CHAERIN KIM
Browse files

예약 db저장(ApplyPage), 예약 확인 및 취소 기능 완성(CheckPage)

parent 7b01b433
...@@ -7,6 +7,7 @@ const logger = require('morgan'); ...@@ -7,6 +7,7 @@ const logger = require('morgan');
const indexRouter = require('./routes/index'); const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users'); const usersRouter = require('./routes/users');
const loginRouter = require('./routes/login'); const loginRouter = require('./routes/login');
const reserveRouter = require('./routes/reserves');
const connect = require('./schemas'); const connect = require('./schemas');
const app = express(); const app = express();
...@@ -31,6 +32,7 @@ app.use(express.static(path.join(__dirname, 'public'))); ...@@ -31,6 +32,7 @@ app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter); app.use('/', indexRouter);
app.use('/users', usersRouter); app.use('/users', usersRouter);
app.use('/login', loginRouter); app.use('/login', loginRouter);
app.use('/reserves', reserveRouter);
// catch 404 and forward to error handler // catch 404 and forward to error handler
app.use(function(req, res, next) { app.use(function(req, res, next) {
......
import React, { useState, useEffect } from 'react';
import { Field, Formik } from 'formik';
import axios from 'axios';
import { render } from 'react-dom';
import { Link, Redirect } from 'react-router-dom';
import styled from 'styled-components';
function List(props) {
function remove() {
console.log(props._id)
axios.delete(`/reserves/${props._id}`, { data: { _id: props._id, }})
.then(res => {
if (res.status === 404) return alert(res.data.error)
alert("신청이 완료되었습니다!")
})
.catch(err => {
alert(err.error)
});
};
return (
<div>
<div>날짜 : {props.date}</div>
<div>이름 : {props.name}</div>
<div>강의실 : {props.room}</div>
<div>시간 : {props.time}</div>
<div>사용인원 : {props.num}</div>
<div>{props._id}</div>
<form onSubmit={remove} className="col-sm-3">
<button type="submit" className="btn btn-dark">
신청 취소
</button>
</form>
</div>
)
}
export default List;
\ No newline at end of file
...@@ -33,7 +33,11 @@ function Menu() { ...@@ -33,7 +33,11 @@ function Menu() {
<Link to="/apply" className="nav-link">대관 신청</Link> <Link to="/apply" className="nav-link">대관 신청</Link>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<Link to="/check" className="nav-link">대관 확인/취소</Link> <Link to={{
pathname: `/check/${localStorage.getItem('_id')}`,
state: { id: localStorage.getItem('_id') },
}} className="nav-link">
대관 확인/취소</Link>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<Link to="/notice" className="nav-link">공지사항</Link> <Link to="/notice" className="nav-link">공지사항</Link>
......
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Formik } from 'formik';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import axios from 'axios';
function Apply() { function Apply() {
return ( return (
<div> <div>
<Menu /> <Menu />
<div className="container">apply <div className="container">apply
<Formik
initialValues={{
date: "20201003",
time: "시간",
room: "9-116",
name: "종윤",
_id: "5f6fa20001988e5604603870",
reason: "study hard",
member: "jinju rkyoung",
approve: false,
num: 5,
}}
onSubmit={(values, { setSubmitting }) => {
axios({
method: 'post',
url: '/reserves',
data: values,
}).then(res => {
if (res.status === 404) return alert(res.data.error)
alert("신청이 완료되었습니다!")
})
.catch(err => {
alert(err.error)
});
setTimeout(() => {
setSubmitting(false);
}, 400); // finish the cycle in handler
}}
>
{({
handleSubmit,
isSubmitting,
}) => (
<div className="row justify-content-center align-items-center">
<form onSubmit={handleSubmit} className="col-sm-3">
<button type="submit" className="btn btn-dark" disabled={isSubmitting}>
Sign Up
</button>
</form>
</div>
)}
</Formik>
</div> </div>
</div> </div>
) )
......
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import List from '../Components/List';
import axios from 'axios';
function Check() { function Check(props) {
function getReserve() {
axios.get(`/reserves/${props.match.params.id}`, {
headers: { authorization: localStorage.getItem('token') },
})
.then(res => {
if (res.status !== 201) {
alert(res.data.error);
}
console.log(res.data);
setReserve(res.data);
})
.catch(err => {
alert(err.error)
});
}
const [reserve, setReserve] = useState([]);
useEffect(() => {
getReserve();
}, [])
return ( return (
<div> <div>
<Menu /> <Menu />
<div className="container">check <div className="container">check
{reserve.map((reserve, index) =>
<List id={props.match.params.id} index={index} date={reserve.date} name={reserve.name} room={reserve.room} time={reserve.time} num={reserve.num} _id={reserve._id}/>
)}
</div> </div>
</div> </div>
) )
......
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Field, Form, Formik } from 'formik'; import { Field, Formik } from 'formik';
import * as Yup from 'yup'; import * as Yup from 'yup';
import axios from 'axios'; import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
...@@ -96,71 +96,5 @@ function Find() { ...@@ -96,71 +96,5 @@ function Find() {
); );
} }
// const withFormik = Formik({
// mapPropsToValues: () => ({ color: '' }),
// validationSchema: Yup.object().shape({
// color: Yup.string().required('Color is required!'),
// }),
// handleSubmit: (values, { setSubmitting }) => {
// setTimeout(() => {
// alert(JSON.stringify(values, null, 2));
// setSubmitting(false);
// }, 1000);
// },
// displayName: 'BasicForm', // helps with React DevTools
// });
// const MyForm = props => {
// const {
// values,
// touched,
// errors,
// dirty,
// isSubmitting,
// handleChange,
// handleBlur,
// handleSubmit,
// handleReset,
// } = props;
// return (
// <form onSubmit={handleSubmit}>
// <label htmlFor="email" style={{ display: 'block' }}>
// Color
// </label>
// <select
// name="color"
// value={values.color}
// onChange={handleChange}
// onBlur={handleBlur}
// style={{ display: 'block' }}
// >
// <option value="" label="Select a color" />
// <option value="red" label="red" />
// <option value="blue" label="blue" />
// <option value="green" label="green" />
// </select>
// {errors.color &&
// touched.color &&
// <div className="input-feedback">
// {errors.color}
// </div>}
// <button
// type="button"
// className="outline"
// onClick={handleReset}
// disabled={!dirty || isSubmitting}
// >
// Reset
// </button>
// <button type="submit" disabled={isSubmitting}>
// Submit
// </button>
// <DisplayFormikState {...props} />
// </form>
// );
// };
export default Find; export default Find;
...@@ -45,7 +45,7 @@ function Login() { ...@@ -45,7 +45,7 @@ function Login() {
}).then(res => { }).then(res => {
if (res.status === 404) return alert(res.data.error) if (res.status === 404) return alert(res.data.error)
localStorage.setItem('token', res.data.token); localStorage.setItem('token', res.data.token);
localStorage.setItem('id', res.data.users._id); localStorage.setItem('_id', res.data.users._id);
localStorage.setItem('name', res.data.users.name); localStorage.setItem('name', res.data.users.name);
setState(true); setState(true);
}) })
......
...@@ -27,7 +27,7 @@ ReactDOM.render( ...@@ -27,7 +27,7 @@ ReactDOM.render(
<Route path="/home" component={Home} /> <Route path="/home" component={Home} />
<Route path="/signup" component={Signup} /> <Route path="/signup" component={Signup} />
<Route path="/apply" component={Apply} /> <Route path="/apply" component={Apply} />
<Route path="/check" component={Check} /> <Route path="/check/:id" component={Check} />
<Route path="/notice" component={Notice} /> <Route path="/notice" component={Notice} />
<Route path="/find" component={Find} /> <Route path="/find" component={Find} />
<Route path="/change" component={Change}/> <Route path="/change" component={Change}/>
......
...@@ -55,6 +55,8 @@ router.post('/find', function (req, res, next) { ...@@ -55,6 +55,8 @@ router.post('/find', function (req, res, next) {
User.findOne({ id: req.body.id }, 'id question answer', function (err, users) { User.findOne({ id: req.body.id }, 'id question answer', function (err, users) {
if (err) return res.status(500).json({ error: err }); if (err) return res.status(500).json({ error: err });
if (!users) return res.status(404).json({ error: '해당 학번이 존재하지 않습니다.' });
if (users.question === req.body.question) { if (users.question === req.body.question) {
if (users.answer === req.body.answer) { if (users.answer === req.body.answer) {
return res.status(201).json({users}); return res.status(201).json({users});
......
const express = require('express');
const Reserve = require('../schemas/reserve');
const { verifyToken } = require('./middlewares');
const router = express.Router();
router.post('/', function (req, res, next) {
console.log('/reserve post req.body', req.body)
const reserve = new Reserve({
date: req.body.date,
time: req.body.time,
room: req.body.room,
name: req.body.name,
id: req.body._id,
reason: req.body.reason,
member: req.body.member,
approve: req.body.approve,
num: req.body.num,
});
reserve.save()
.then((result) => {
console.log(result);
res.status(201).json(result);
})
.catch((err) => {
console.error(err);
next(err);
});
});
// router.get('/:_id', verifyToken, function (req, res, next) {
router.get('/:_id', function (req, res, next) {
console.log('/reserves get req.params', req.params)
Reserve.find({ id: req.params._id }, function (err, reserve) {
if (err) return res.status(500).json({ error: err });
console.log('reserve list',reserve)
res.status(201).json(reserve);
})
});
router.delete('/:_id', function (req, res, next) {
console.log('/reserves delete req.params', req.params)
Reserve.findOne({ _id: req.params._id }, function (err, reserve) {
if (err) return res.status(500).json({ error: err });
reserve.remove()
.then(() => {
console.log();
res.status(201).json();
})
.catch((err) => {
console.error(err);
next(err);
});
})
});
module.exports = router;
const mongoose = require('mongoose'); const mongoose = require('mongoose');
const { Schema } = mongoose; const { Schema } = mongoose;
const { Types: { ObjectId } } = Schema;
const reserveSchema = new Schema({ const reserveSchema = new Schema({
date: { id: {
type: String, type: ObjectId,
}, required: true,
time: { ref: 'User',
type: String, },
date: {
}, type: String,
room:{ },
type: String, time: {
type: String,
},
name: { //대표자 이름 },
type: String, room: {
type: String,
},
id:{ },
type: Number, name: { //대표자 이름
type: String,
},
reason: { },
type: String, reason: {
type: String,
},
member: { },
type: String, member: {
type: String,
},
approve: { },
type: Boolean, approve: {
type: Boolean,
}, default: false,
num: {
type: Number, },
num: {
}, type: Number,
},
}); });
module.exports = mongoose.model('Reserve', reserveSchema); module.exports = mongoose.model('Reserve', reserveSchema);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment