Home.js 3.37 KB
Newer Older
Kim, Subin's avatar
Kim, Subin committed
1
import React, { useState, useEffect, useRef } from 'react';
kusang96's avatar
kusang96 committed
2
import { Link } from 'react-router-dom';
3
4
5
import ListCard from '../Components/ListCard';
import axios from 'axios';
import catchError from '../utils/catchErrors';
kusang96's avatar
kusang96 committed
6
import { Container, Row } from 'react-bootstrap';
7

Kim, Subin's avatar
Kim, Subin committed
8
9

function Home() {
kusang96's avatar
kusang96 committed
10
11
12
13
14
    const INIT_PRODUCT = {
        bestProduct: [],
        newProduct: [],
    }
    const [productlist, setProductlist] = useState(INIT_PRODUCT)
15
    const [error, setError] = useState('')
kusang96's avatar
kusang96 committed
16

17
18
19
20
21
22
    useEffect(() => {
        getProductlist()
    }, [])

    async function getProductlist() {
        try {
kusang96's avatar
kusang96 committed
23
            setError('')
24
            const response = await axios.get(`/api/product/getproduct`)
kusang96's avatar
kusang96 committed
25
            setProductlist({ bestProduct: response.data.bestProduct, newProduct: response.data.newProduct })
26
27
28
29
        } catch (error) {
            catchError(error, setError)
        }
    }
kusang96's avatar
kusang96 committed
30

Kim, Subin's avatar
Kim, Subin committed
31
    return (
kusang96's avatar
kusang96 committed
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
        <Container>
            <style type="text/css">
                {`
                a, a:hover, a:active {
                    color: #000;
                    text-decoration: none;
                `}
            </style>
            <div className="my-4">
                <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
                <Row className="justify-content-center mx-0">
                    {productlist.bestProduct.map(pro => (
                        <Link to={{
                            pathname: `/product/${pro._id}`,
                            state: {
                                id: pro._id,
                                name: pro.pro_name,
                                price: pro.price,
                                colors: pro.colors,
                                sizes: pro.sizes,
                                description: pro.description,
                                main_img: pro.main_imgUrl,
                                detail_imgs: pro.detail_imgUrls
                            }
                        }}>
kusang96's avatar
card    
kusang96 committed
57
                            <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} status={'list'} />
kusang96's avatar
kusang96 committed
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
                        </Link>
                    ))}
                </Row>
            </div>
            <div className="my-4">
                <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
                <Row className="justify-content-center mx-0">
                    {productlist.newProduct.map(pro => (
                        <Link to={{
                            pathname: `/product/${pro._id}`,
                            state: {
                                id: pro._id,
                                name: pro.pro_name,
                                price: pro.price,
                                colors: pro.colors,
                                sizes: pro.sizes,
                                description: pro.description,
                                main_img: pro.main_imgUrl,
                                detail_imgs: pro.detail_imgUrls
                            }
                        }}>
kusang96's avatar
card    
kusang96 committed
79
                            <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} status={'list'} />
kusang96's avatar
kusang96 committed
80
81
82
83
84
                        </Link>
                    ))}
                </Row>
            </div>
        </Container>
Kim, Subin's avatar
Kim, Subin committed
85
86
87
88
    )
}

export default Home