OnlineShop 만들기 - 14) History 기능 만들기

순서

 

먼저 views>HistoryPage>HistoryPage.js파일을 만들어 준다.

import React from 'react'

function HistoryPage() {
    return (
        <div>
            
        </div>
    )
}

export default HistoryPage

 

app.js에 추가해준다.(로그인 한 사람만 볼 수 있게 true)

 

import HistoryPage from './views/HistoryPage/HistoryPage';
          <Route exact path="/history" component={Auth(HistoryPage, true)} />

 

 

상단메뉴에 history 메뉴 추가한다. 

views>Navbars>Sections>RightMenu.js

        <Menu.Item key="history">
          <a href="/history">History</a>
        </Menu.Item>

 

 

history페이지에서 데이터를 가져오게끔 요청한다. 

import Axios from 'axios'
import React,{useEffect, useState} from 'react'

function HistoryPage(props) {

    const [History, setHistory] = useState([])
    useEffect(() => {
        Axios.get('api/users/getHistory')
            .then(response=>{
                if(response.data.success){
                    setHistory(response.data.history)

                }else{
                    alert('이력을 가져오는데에 실패했습니다.')
                }
            })
    }, [])

 

router를 작성한다. 

router.get('/getHistory', auth, (req, res) => {
    User.findOne(
        { _id: req.user._id },
        (err, doc) => {
            let history = doc.history;
            if (err) return res.status(400).send(err)
            return res.status(200).json({ success: true, history })
        }
    )
})

 

 

템플릿을 만들어준다.

    return (
        <div style={{ width: '80%', margin: '3rem auto' }}>
            <div style={{ textAlign: 'center' }}>
                <h1>History</h1>
            </div>
            <br />

            <table>
                <thead>
                    <tr>
                        <th>Payment Id</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Date of Purchase</th>
                    </tr>
                </thead>

                <tbody>

                    {History.map(item=>{
                        <tr key={item._id}>
                            <td>{item.paymentid}</td>
                            <td>{item.price}</td>
                            <td>{item.quantity}</td>
                            <td>{item.dateOfPurchase}</td>
                        </tr>
                    })}
                 </tbody>
            </table>
        </div>
    )
}

 

 

 

만약 axios, router가 아닌 props를 이용한다면 다음과 같다. 

import React from 'react'

function HistoryPage(props) {

    return (
        <div style={{ width: '80%', margin: '3rem auto' }}>
            <div style={{ textAlign: 'center' }}>
                <h1>History</h1>
            </div>
            <br />

            <table>
                <thead>
                    <tr>
                        <th>Payment Id</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Date of Purchase</th>
                    </tr>
                </thead>

                <tbody>

                    {props.user.userData && props.user.userData.history &&
                        props.user.userData.history.map(item => (
                            <tr key={item.id}>
                                <td>{item.id}</td>
                                <td>{item.price}</td>
                                <td>{item.quantity}</td>
                                <td>{item.dateOfPurchase}</td>
                            </tr>
                        ))}


                </tbody>
            </table>
        </div>
    )
}

export default HistoryPage