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

server/app.js

@@ -7,6 +7,7 @@ const logger = require('morgan');
 const indexRouter = require('./routes/index');
 const usersRouter = require('./routes/users');
 const loginRouter = require('./routes/login');
+const reserveRouter = require('./routes/reserves');
 const connect = require('./schemas');
 
 const app = express();
@@ -31,6 +32,7 @@ app.use(express.static(path.join(__dirname, 'public')));
 app.use('/', indexRouter);
 app.use('/users', usersRouter);
 app.use('/login', loginRouter);
+app.use('/reserves', reserveRouter);
 
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {

server/client/src/Components/List.js

+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

server/client/src/Components/Menu.js

@@ -33,7 +33,11 @@ function Menu() {
                         <Link to="/apply" className="nav-link">대관 신청</Link>
                     </li>
                     <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 className="nav-item">
                         <Link to="/notice" className="nav-link">공지사항</Link>

server/client/src/Pages/ApplyPage.js

 import React, { useState, useEffect } from 'react';
+import { Formik } from 'formik';
 import Menu from '../Components/Menu';
+import axios from 'axios';
 
 function Apply() {
     return (
         <div>
             <Menu />
             <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>
     )

server/client/src/Pages/CheckPage.js

 import React, { useState, useEffect } from 'react';
 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 (
         <div>
             <Menu />
             <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>
     )

server/client/src/Pages/FindPage.js

 import React, { useState } from 'react';
-import { Field, Form, Formik } from 'formik';
+import { Field, Formik } from 'formik';
 import * as Yup from 'yup';
 import axios from 'axios';
 import 'bootstrap/dist/css/bootstrap.css';
@@ -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;

server/client/src/Pages/LoginPage.js

@@ -45,7 +45,7 @@ function Login() {
                             }).then(res => {
                               if (res.status === 404) return alert(res.data.error)
                               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);
                               setState(true);
                             })

server/client/src/index.js

@@ -27,7 +27,7 @@ ReactDOM.render(
       <Route path="/home" component={Home} />
       <Route path="/signup" component={Signup} />
       <Route path="/apply" component={Apply} />
-      <Route path="/check" component={Check} />
+      <Route path="/check/:id" component={Check} />
       <Route path="/notice" component={Notice} />
       <Route path="/find" component={Find} />
       <Route path="/change" component={Change}/>

server/routes/login.js

@@ -55,6 +55,8 @@ router.post('/find', function (req, res, next) {
     User.findOne({ id: req.body.id }, 'id question answer', function (err, users) {
         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.answer === req.body.answer) {
                 return res.status(201).json({users});

server/routes/reserves.js

+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;

server/schemas/reserve.js

 const mongoose = require('mongoose');
 
 const { Schema } = mongoose;
+const { Types: { ObjectId } } = Schema;
 const reserveSchema = new Schema({
-    date: {
-        type: String,
-    },
-    time: {
-        type: String,
-        
-    },
-    room:{
-        type: String,
-        
-    },
-    name: { //대표자 이름
-        type: String,
-    
-    },
-    id:{
-      type: Number,
-      
-    },
-    reason: {
-      type: String,
-
-    },
-    member: {
-      type: String,
-      
-    },
-    approve: {
-      type: Boolean,
-     
-    },
-    num: {
-      type: Number,
-    
-    },
-  
-    
+  id: {
+    type: ObjectId,
+    required: true,
+    ref: 'User',
+  },
+  date: {
+    type: String,
+  },
+  time: {
+    type: String,
+
+  },
+  room: {
+    type: String,
+
+  },
+  name: { //대표자 이름
+    type: String,
+
+  },
+  reason: {
+    type: String,
+
+  },
+  member: {
+    type: String,
+
+  },
+  approve: {
+    type: Boolean,
+    default: false,
+
+  },
+  num: {
+    type: Number,
+  },
+
+
 });
 
 module.exports = mongoose.model('Reserve', reserveSchema);