CheckPage.js 3.81 KB
Newer Older
Ha YeaJin's avatar
pages    
Ha YeaJin committed
1
2
import React, { useState, useEffect } from 'react';
import Menu from '../Components/Menu';
CHAERIN KIM's avatar
CHAERIN KIM committed
3
import { Redirect } from 'react-router-dom';
4
import axios from 'axios';
Lee Jin Ju's avatar
Lee Jin Ju committed
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import Table from 'react-bootstrap/Table'
import { Container } from 'react-bootstrap';
import styled from 'styled-components';

const Ta = styled(Table)`
margin-top: 0.5em;

  & th, & td {
    padding: 0;
    vertical-align: middle;
    font-size: 0.9rem;
    margin-left : auto; margin-right : auto;
    border-spacing: initial;
  };

  & tr {
    display: d-flex;
    width: 150px;
  };

  & td {
    align-items: center;
    margin: 10px;
  };

`
Ha YeaJin's avatar
pages    
Ha YeaJin committed
31

32
function Check(props) {
CHAERIN KIM's avatar
CHAERIN KIM committed
33
    const [reserve, setReserve] = useState([]);
CHAERIN KIM's avatar
CHAERIN KIM committed
34
    const [state, setState] = useState()
CHAERIN KIM's avatar
CHAERIN KIM committed
35
36
37
    useEffect(() => {
        getReserve();
    }, [])
38

CHAERIN KIM's avatar
CHAERIN KIM committed
39
40
    if (state) return <Redirect to="/" />;

41
42
43
44
45
    function getReserve() {
        axios.get(`/reserves/${props.match.params.id}`, {
            headers: { authorization: localStorage.getItem('token') },
        })
            .then(res => {
CHAERIN KIM's avatar
CHAERIN KIM committed
46
47
48
49
                if (res.status === 404) {
                    alert(res.data.error);
                }
                if (res.status === 419) {
50
                    alert(res.data.error);
CHAERIN KIM's avatar
CHAERIN KIM committed
51
52
                    localStorage.clear();
                    setState(true);
53
54
                }
                console.log(res.data);
CHAERIN KIM's avatar
CHAERIN KIM committed
55
56
57
58
                const reserves=res.data.filter(function(item) {
                        return item !== '';
                      });
                setReserve(reserves);
59
60
61
62
63
            })
            .catch(err => {
                alert(err.error)
            });
    }
Choi Ga Young's avatar
Choi Ga Young committed
64
65
66
67
    function remove(index) {
        axios.delete(`/reserves/${reserve[index]._id}`)
            .then(res => {
                if (res.status === 404) return alert(res.data.error)
CHAERIN KIM's avatar
CHAERIN KIM committed
68
                alert("삭제되었습니다!");
Choi Ga Young's avatar
Choi Ga Young committed
69
70
71
72
73
74
                getReserve();
            })
            .catch(err => {
                alert(err.error)
            });
    };
75

Ha YeaJin's avatar
pages    
Ha YeaJin committed
76
77
78
    return (
        <div>
            <Menu />
Lee Jin Ju's avatar
Lee Jin Ju committed
79
80
81
            <Container fluid>
                <Ta responsive="lg ml-2rem">
                    <thead className="thead-light">
Choi Ga Young's avatar
Choi Ga Young committed
82
                        <tr>
Lee Jin Ju's avatar
Lee Jin Ju committed
83
84
85
86
87
88
                            <th className="text-center">날짜</th>
                            <th className="text-center">시간</th>
                            <th className="text-center">강의실</th>
                            <th className="text-center">사용인원</th>
                            {/* <th>승인여부</th> */}
                            <th className="text-center">예약취소</th>
Choi Ga Young's avatar
Choi Ga Young committed
89
90
91
92
93
94
                        </tr>
                    </thead>
                    <tbody>
                        {reserve.map((reserve, index) => {
                            return (
                                <tr key={index}>
Lee Jin Ju's avatar
Lee Jin Ju committed
95
96
97
98
99
100
101
                                    <td className="text-center">{reserve.date}</td>
                                    <td className="text-center">{reserve.starttime}~{(Number(reserve.starttime) + reserve.usetime)}</td>
                                    <td className="text-center">{reserve.room}</td>
                                    <td className="text-center">{reserve.num}</td>
                                    {/* <td>{reserve.check ? (reserve.approve ? "사용가능" : "사용불가") : "승인대기중"}</td> */}
                                    <td className="text-center">
                                        <button onClick={() => remove(index)} className="btn btn-danger btn-sm">
Choi Ga Young's avatar
Choi Ga Young committed
102
103
104
105
106
107
108
                                            취소
                                        </button>
                                    </td>
                                </tr>
                            )
                        })}
                    </tbody>
Lee Jin Ju's avatar
Lee Jin Ju committed
109
110
                </Ta>
            </Container>
Ha YeaJin's avatar
pages    
Ha YeaJin committed
111
112
113
114
        </div>
    )
}

Choi Ga Young's avatar
Choi Ga Young committed
115
export default Check