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

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
12

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
13

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
14

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
15
function Bookmark() {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
16
    const [error, setError] = useState('')
17
18
19
20
21
    const [bookmark, setBookmark] = useState([true, true, true, true])
    const [pagePlace, setpagePlace] = useState([])
    const [index, setIndex] = useState(1);
    const [endPage, setEndPage] = useState(1)
    const [bookmarkPlace, setBookmarkPlace] = useState([{ name: " ", address: " ", img: " " }])
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
22
23
    const user = isAuthenticated()

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
24
    async function getBookmark() {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
25
        try {
baesangjune's avatar
수정    
baesangjune committed
26
            const bookmarkArr = [];
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
27
            const response = await axios.get(`/api/users/bookmark?ID=${user}`)
28
            setBookmarkPlace(response.data.bookmark)
baesangjune's avatar
수정    
baesangjune committed
29
30
31
        } catch (err) {
            catchErrors(err, setError(err))
            console.log("북마크에러", error)
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
32
        }
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
33
34
    }

Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
35
36
37

    async function handleBookmark(index) {
        if (!bookmark[index]) {
38
            console.log(bookmarkPlace[index])
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
39
            try {
40
                const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${bookmarkPlace[index]._id}`)
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
41
42
43
44
45
46
47
48
49
50
                alert(response.data, '북마크가 저장되었습니다.')
                const showArr = bookmark
                showArr[index] = true
                setBookmark(showArr)
                console.log("bookmark=", bookmark)
            } catch (error) {
                catchErrors(error, setError)
            }
        } else {
            try {
51
                const response = await axios.delete(`/api/users/bookmark?ID=${user}&place=${bookmarkPlace[index]._id}`)
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
52
                alert(response.data, '저장된 북마크가 삭제되었습니다.')
53
                getBookmark()
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
54
55
56
57
58
59
                console.log("bookmark=", bookmark)
            } catch (error) {
                catchErrors(error, setError)
            }
        }
    }
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

    const handlePage = (num) => {
        setIndex(num);
    }

    
    function paginate(items, pageNumber, itemNumber) {
        const startIndex = (pageNumber - 1) * itemNumber

        return _(items)
            .slice(startIndex)
            .take(itemNumber)
            .value();
    }

Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
75
76
    useEffect(() => {
        getBookmark()
77
    }, [])
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
78
79


80
81
82
83
84
    useEffect(() => {
        setpagePlace(paginate(bookmarkPlace, index, 4))
        setEndPage(Math.ceil((bookmarkPlace.length / 4)))
    }, [bookmarkPlace, index])

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
85
86
    return (
        <Container>
87
            <Link to="/"><Image style={{ margin: "1%" }} src={ohuh} /></Link>
Kim, Chaerin's avatar
z    
Kim, Chaerin committed
88
89
90
91
92
            <div class="d-flex align-items-center p-3 text-white bg-info rounded shadow-sm">
                <div >
                    <h1 class="h6 mb-0 text-white">북마크</h1>
                </div>
            </div>
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
93
            <Row className="d-flex flex-wrap">
94
                {console.log("#####################33", bookmarkPlace)}
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
95
96
97
                {pagePlace.map((place, index) => {
                    return (
                        <Col key={index} md={6} >
98
                            <Card border="info" style={{ margin: "3%" }}>
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
99

100
                                <Card.Header  style={{ margin: "0", fontSize: '200%', fontWeight: 'bold' }} >
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
101
102
                                    {user ?
                                        <Button
103
                                        style={{marginRight:"3%"}}
baesangjune's avatar
수정    
baesangjune committed
104
                                            variant={bookmark[index] ? "info" : "light"}
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
105
106
107
108
                                            onClick={() => handleBookmark(index, place)}>
                                            <Icon.BookmarkStarFill size={35} />
                                            {console.log("bookmark", bookmark)}
                                            {console.log("bookmark[index]", bookmark[index])}</Button> : null}
109
                                            {place.name}
110
                                </Card.Header>
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
111
112
                                <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={place.img} />
                                <Card.Body >
baesangjune's avatar
baesangjune committed
113
                                    <Card.Text style={{ overflow: 'auto', fontSize: '150%', width: '100%', height: "65px" }} >
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
114
                                        {place.address} </Card.Text>
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
115
                                    <Link to={`/place?name=${place.name}&src=${place.img}&address=${place.address}`} >
Kim, Chaerin's avatar
z    
Kim, Chaerin committed
116
117
                                        <Button variant="info"> {place.name} 자세히 살펴보기</Button>
                                    </Link>
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
118
119
120
121
122
                                </Card.Body>
                            </Card>
                        </Col>
                    )
                })}
123
124
125
            </Row>
            <Row className="mt-2 d-flex justify-content-center">
                <Paginations index={index} endPage={endPage} handlePage={handlePage}></Paginations>
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
126
            </Row>
127
        </Container >
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
128
129
130
    )
}

Lee SeoYeon's avatar
..    
Lee SeoYeon committed
131
132
133
134
export default Bookmark


    // async function handleSubmit(e){
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
135
        //     setState(true);  //버튼이 눌려서 handlesubmit이될때 setState값이 true로 바뀐다
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
136
137
138
139
140
141
142
143
144
145
146
147
    //     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])