Bookmark.js 5.31 KB
Newer Older
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
1
import React, { useState, useEffect } from 'react'
2
import { Col, Card, Container, Row, Button, Nav, Navbar, Image } from "react-bootstrap"
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
3
import axios from "axios"
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
4
import catchErrors from './utils/catchErrors.js'
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
5
import { isAuthenticated } from './utils/auth'
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
6
import * as Icon from 'react-bootstrap-icons';
7
8
import { Link } from 'react-router-dom'
import ohuh from './ohuh-sm.PNG';
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
9

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
10

Lee SeoYeon's avatar
..    
Lee SeoYeon committed
11
const INIT_PAGE = {
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
12
    bookmark: []
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
13
14
}

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
15

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
16
function Bookmark() {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
17
    const [page, setPage] = useState(INIT_PAGE)
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
18
    const [index, setIndex] = useState(1);
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
19
    const [error, setError] = useState('')
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
20
    const [state, setState] = useState(false);
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
21
22
23
    const [bookmark, setBookmark] = useState([false, false, false, false])
    const [pagePlace, setPagePlace] = useState([])
    const [showSet, setShowSet] = useState([false, false, false, false]);
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
24

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
25
26
    const user = isAuthenticated()

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
27
    async function getBookmark() {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
28
        try {
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
29
30
            const response = await axios.get(`/api/users/bookmark?ID=${user}`)
            setPagePlace(response.data.bookmark)
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
31
32
        } catch (error) {
            catchErrors(error, setError)
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
33
        }
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
34
35
    }

Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

    async function handleBookmark(index) {
        if (!bookmark[index]) {
            console.log(pagePlace[index])
            try {
                const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
                alert(response.data, '북마크가 저장되었습니다.')
                const showArr = bookmark
                showArr[index] = true
                setBookmark(showArr)
                console.log("bookmark=", bookmark)
            } catch (error) {
                catchErrors(error, setError)
            }
        } else {
            try {
                const response = await axios.delete(`/api/users/bookmark?ID=${user}`)
                alert(response.data, '저장된 북마크가 삭제되었습니다.')
                const showArr = bookmark
                showArr[index] = false
                setBookmark(showArr)
                console.log("bookmark=", bookmark)
            } catch (error) {
                catchErrors(error, setError)
            }
        }
    }
    useEffect(() => {
        getBookmark()
    }, [])


Lee SeoYeon's avatar
.    
Lee SeoYeon committed
68
69
    return (
        <Container>
70
71
72
            <Link to="/" className="d-flex justify-content-center">
                <Image style={{margin:"1%"}} src={ohuh} />
            </Link>
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
73
            <Navbar bg="info" variant="dark">
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
74
75
76
77
78
                <Navbar.Brand href="/">북마크</Navbar.Brand>
                <Nav className="mr-auto">
                    <Nav.Link href="/">Home</Nav.Link>
                </Nav>
            </Navbar>
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
            <Row className="d-flex flex-wrap">
                {console.log("#####################33", pagePlace)}
                {pagePlace.map((place, index) => {
                    return (
                        <Col key={index} md={6} >
                            <Card align="center" border="info" style={{ margin: "3%" }}>

                                <Card.Title className="d-flex justify-content-center" style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place.name}
                                    {user ?
                                        <Button
                                            variant={bookmark[index] ? "primary" : "light"}
                                            onClick={() => handleBookmark(index, place)}>
                                            <Icon.BookmarkStarFill size={35} />
                                            {console.log("bookmark", bookmark)}
                                            {console.log("bookmark[index]", bookmark[index])}</Button> : null}
                                </Card.Title>
                                <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={place.img} />
                                <Card.Body >
                                    <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
                                        {place.address} </Card.Text>
                                    <Button variant="info" onClick={() => {
                                        const showArr = [false, false, false, false]
                                        showArr[index] = true
                                        setShowSet(showArr)
                                    }}>{place.name} 자세히 살펴보기</Button>
                                    {/* <Place place={place} index={index} show={showSet[index]} onHide={() => setShowSet([false, false, false, false])} /> */}
                                </Card.Body>
                            </Card>
                        </Col>
                    )
                })}


            </Row>
113
        </Container >
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
114
115
116
    )
}

Lee SeoYeon's avatar
..    
Lee SeoYeon committed
117
118
119
120
export default Bookmark


    // async function handleSubmit(e){
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
121
        //     setState(true);  //버튼이 눌려서 handlesubmit이될때 setState값이 true로 바뀐다
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
122
123
124
125
126
127
128
129
130
131
132
133
    //     try { //respons 서버에 post로 요청하여 데이터를 받아온다
    //         const response = await axios.post('/api/users/bookmark', page)
    //         setSuccess(true)
    //     } catch (error) {
    //         console.log(error)
    //         catchErrors(error, setError)
    //     }
    // }

    // useEffect(() => {
    //     getBookmark(user)
    // }, [user])