Admin.js 3.72 KB
Newer Older
kusang96's avatar
kusang96 committed
1
import React, { useState, useEffect, useRef } from 'react';
kusang96's avatar
DSAD    
kusang96 committed
2
import AllCard from '../Components/AllCard';
kusang96's avatar
kusang96 committed
3
import Pagination from "../Components/Pagination";
kusang96's avatar
kusang96 committed
4
5
import axios from 'axios';
import catchError from '../utils/catchErrors';
kusang96's avatar
DSAD    
kusang96 committed
6
import { Row, Form, FormControl, Button, Container } from 'react-bootstrap';
Kim, Subin's avatar
Kim, Subin committed
7
8

function Admin() {
kusang96's avatar
kusang96 committed
9
    const INIT_STATUS = { indexOfFirst: 0, indexOfLast: 10 }
kusang96's avatar
kusang96 committed
10
    const [search, setSearch] = useState({ word: '' })
kusang96's avatar
kusang96 committed
11
    const [productlist, setProductlist] = useState([])
kusang96's avatar
kusang96 committed
12
    const [status, setStatus] = useState(INIT_STATUS)
kusang96's avatar
kusang96 committed
13
    const [currentPage, setCurrentPage] = useState(1)
kusang96's avatar
kusang96 committed
14
    const [error, setError] = useState('')
kusang96's avatar
kusang96 committed
15
    const searchref = useRef(null)
kusang96's avatar
kusang96 committed
16
    const per = 10;
kusang96's avatar
kusang96 committed
17
18
19
20
21

    useEffect(() => {
        getProductlist()
    }, [])

kusang96's avatar
kusang96 committed
22
23
24
    useEffect(() => {
        setStatus({ indexOfFirst: (currentPage - 1) * per, indexOfLast: currentPage * per })
    }, [currentPage])
kusang96's avatar
kusang96 committed
25

kusang96's avatar
kusang96 committed
26
    function currentPosts(items) {
kusang96's avatar
kusang96 committed
27
        let currentPosts = 0;
kusang96's avatar
kusang96 committed
28
29
        currentPosts = items.slice(status.indexOfFirst, status.indexOfLast);
        return currentPosts
kusang96's avatar
kusang96 committed
30
31
    }

kusang96's avatar
kusang96 committed
32
33
    async function getProductlist() {
        try {
kusang96's avatar
kusang96 committed
34
            setError('')
kusang96's avatar
kusang96 committed
35
36
            const response = await axios.get(`/api/product/getproduct/all`)
            setProductlist(response.data)
kusang96's avatar
kusang96 committed
37
            setCurrentPage(1)
kusang96's avatar
kusang96 committed
38
39
40
41
42
        } catch (error) {
            catchError(error, setError)
        }
    }

kusang96's avatar
kusang96 committed
43
44
    function handleChange(event) {
        setSearch({ word: event.target.value })
kusang96's avatar
kusang96 committed
45
46
    }

kusang96's avatar
kusang96 committed
47
    async function handleSubmit(e) {
kusang96's avatar
kusang96 committed
48
        e.preventDefault()
kusang96's avatar
kusang96 committed
49
50
51
52
        try {
            setError('')
            const response = await axios.get(`/api/product/getproduct/all?product=${search.word}`)
            setProductlist(response.data)
kusang96's avatar
kusang96 committed
53
            setCurrentPage(1)
kusang96's avatar
kusang96 committed
54
55
        } catch (error) {
            catchError(error, setError)
kusang96's avatar
kusang96 committed
56
57
        } finally {
            searchref.current.value = ''
kusang96's avatar
kusang96 committed
58
        }
59
    }
Kim, Subin's avatar
Kim, Subin committed
60

kusang96's avatar
kusang96 committed
61
62
63
64
65
66
    if (error) {
        alert(`${error}`)
        setError('')
        searchref.current.value = ''
    }

Kim, Subin's avatar
Kim, Subin committed
67
    return (
kusang96's avatar
kusang96 committed
68
        <Container>
69
70
71
72
73
74
            <style type="text/css">
                {`
                .btn {
                    background-color: #CDC5C2;
                    border-color: #CDC5C2;
                }
kusang96's avatar
kusang96 committed
75
76
77
78
79
80
81
82
83
84
                .btn:hover {
                    background-color: #91877F;
                    border-color: #91877F;
                }
                .btn-primary.focus, .btn-primary:focus {
                    background-color: #91877F;
                    border-color: #91877F;
                    box-shadow: 0 0 0 0;
                }
                .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
85
86
87
88
89
                    background-color: #91877F;
                    border-color: #91877F;
                }
                `}
            </style>
kusang96's avatar
kusang96 committed
90
            <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
kusang96's avatar
kusang96 committed
91
                <FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
kusang96's avatar
kusang96 committed
92
93
94
95
96
97
                <Button type="submit" className="px-2">
                    <img src="icon/search.svg" width="20" height="20" />
                </Button>
                <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
            </Row>
            <Row className="justify-content-center m-5">
kusang96's avatar
kusang96 committed
98
                {currentPosts(productlist).map(pro => (
kusang96's avatar
DSAD    
kusang96 committed
99
                    <AllCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
kusang96's avatar
kusang96 committed
100
101
                ))}
            </Row>
kusang96's avatar
kusang96 committed
102
            <Pagination index={currentPage} totalPages={Math.ceil(productlist.length / per)} handlePage={setCurrentPage} />
kusang96's avatar
kusang96 committed
103
        </Container>
Kim, Subin's avatar
Kim, Subin committed
104
105
106
107
    )
}

export default Admin