Search.js 10.3 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
baesangjune's avatar
정리.    
baesangjune committed
2
import { Link } from 'react-router-dom';
Kim, Chaerin's avatar
?    
Kim, Chaerin committed
3
4
import ohuh from '../ohuh-sm.PNG';
import Place from '../Components/Place';
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
5
import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Nav } from 'react-bootstrap';
Kim, Chaerin's avatar
?    
Kim, Chaerin committed
6
import Paginations from '../Components/Paginations';
baesangjune's avatar
.    
baesangjune committed
7
import axios from 'axios';
baesangjune's avatar
baesangjune committed
8
import queryString from 'query-string'
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
9
import * as Icon from 'react-bootstrap-icons';
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
10
import { isAuthenticated } from '../utils/auth';
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
11
import catchErrors from '../utils/catchErrors'
Kim, Chaerin's avatar
Kim, Chaerin committed
12
13

function Search(props) {
baesangjune's avatar
baesangjune committed
14

Kim, Chaerin's avatar
Kim, Chaerin committed
15
    const [state, setState] = useState(false);
16
    const [index, setIndex] = useState(1);
17
    const [showSet, setShowSet] = useState([false, false, false, false]);
Kim, Chaerin's avatar
Kim, Chaerin committed
18
    const [search, setSearch] = useState(queryString.parse(props.location.search).keyword);
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
19
    const [bookmark, setBookmark] = useState([false, false, false, false])
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
20
    const user = isAuthenticated()
21
    const [mobile, setMobile] = useState();
baesangjune's avatar
baesangjune committed
22
23
24
    const [association, setAssociation] = useState([{ name: " ", address: " ", img: " " }])
    const [pagePlace, setPagePlace] = useState([{ name: " ", address: " ", img: " " }, { name: " ", address: " ", img: " " }])
    const [endPage, setEndPage] = useState(1)
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
25
26
27
28
29
30
31
32
33
34
    const [error, setError] = useState('')

    async function getBookmark() {
        try {
            const response = await axios.get(`/api/users/bookmark?ID=${user}`)
            // setBookmark(response.data.bookmark)
        } catch (error) {
            catchErrors(error, setError)
        }
    }
baesangjune's avatar
.    
baesangjune committed
35

baesangjune's avatar
baesangjune committed
36
    const getAssociation = () => {
Kim, Chaerin's avatar
Kim, Chaerin committed
37
        axios.get(`/api/search/association?keyword=${search}`)
baesangjune's avatar
baesangjune committed
38
39
40
41
42
43
44
            .then(res => {
                console.log("Associations = ", res.data)
                setAssociation(res.data)
            })
            .catch(err => {
                console.log("search.associations 에러 발생", err)
            })
baesangjune's avatar
.    
baesangjune committed
45
46
    }

baesangjune's avatar
.    
baesangjune committed
47

48
49

    useEffect(() => {
baesangjune's avatar
.    
baesangjune committed
50
        getAssociation()
baesangjune's avatar
baesangjune committed
51
52
53
    }, []);

    useEffect(() => {
baesangjune's avatar
baesangjune committed
54
55
56
57
58
59
60
        if (association.length < 3) {
            setPagePlace(paginate(association, index, association.length))
        }
        else {
            setPagePlace(paginate(association, index, 4))
        }
        setEndPage(Math.floor((association.length / 4)))
61
62
<<<<<<< HEAD
=======
63
        console.log("7489309484839", endPage)
64
>>>>>>> origin/cherry
baesangjune's avatar
baesangjune committed
65
66

    }, [association, index])
baesangjune's avatar
baesangjune committed
67
68
69

    useEffect(() => {
        getAssociation()
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
70
        if (state) {
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
71
72
73
74
75
            // window.location.reload()
            // return <Redirect to={{
            //         pathname: `/search?keyword=${search}`,
            //         state: { id: search },
            //     }} />;
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
76
77
            props.history.push('/search?keyword=' + search)
            setState(false)
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
78
            // console.log("search야", search)
79
80
        } window.addEventListener("scroll", infiniteScroll);
        return () => { window.removeEventListener("scroll", infiniteScroll); }
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
81
    }, [state]);
baesangjune's avatar
baesangjune committed
82

83
84
85
86
87
88
89
90
    const infiniteScroll = () => {
        const { documentElement, body } = document;
        const scrollHeight = Math.max(documentElement.scrollHeight, body.scrollHeight);
        const scrollTop = Math.max(documentElement.scrollTop, body.scrollTop);
        const clientHeight = documentElement.clientHeight;
        if (scrollTop + clientHeight >= scrollHeight) {
            // getReview();
            console.log("더불러")
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
91
        }
92
93
        console.log(scrollHeight, scrollTop, clientHeight)
    }
baesangjune's avatar
.    
baesangjune committed
94
95


96
    const places = [{
97
        name: "한라산",
98
        address: "제주 서귀포시 토평동 산15-1",
baesangjune's avatar
.    
baesangjune committed
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
        img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg/269px-KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg?size=200x200",
    }, {
        name: "성산일출봉(sungsan)",
        address: "제주 서귀포시 성산읍 성산리 1",
        img: "https://www.jeju.go.kr/pub/site/geopark/images/sub/sub03/02%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84%EC%9D%B4%EC%95%BC%EA%B8%B0/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84_%EC%84%B1%EC%82%B0%EC%9D%BC%EC%B6%9C%EB%B4%89/1412402261.jpg?400/400",
    }, {
        name: "해녀의 집(haenyeo)",
        address: "제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집",
        img: "https://mblogthumb-phinf.pstatic.net/MjAxNjExMTdfMTc0/MDAxNDc5MzU3ODU0ODQy.KZYXCjzsXT3rCsE4HXBfxyCg2buvluBvN_7NxVp7BSwg.loJc89d8JjGXdNCn-4yMd7aMWPjfrZn21TI9Hyzemkog.JPEG.icocam11/20161010_100205.jpg?type=w800",
    }, {
        name: "오설록 티 뮤지엄(osulloc)",
        address: "제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록",
        img: "https://cdnweb01.wikitree.co.kr/webdata/editor/202007/01/img_20200701143323_2ced7627.webp",
    }, {
        name: "오설록 티 뮤지엄(osulloc)",
        address: "제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록",
        img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg/269px-KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg",
116
117
    }]

Kim, Chaerin's avatar
Kim, Chaerin committed
118
    if (state !== false) {
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
119
120
121
122
123
124
125
126
        // console.log(queryString.parse(props.location.search))
        //  = {keyword:search}
        // return <Redirect to={{
        //     pathname: `/search?keyword=${search}`,
        //     state: { id: search },
        // }} />;
        // history.pushState(null, null, "?"+queryParams.toString());
        // return <Redirect to={`/search?keyword=${search}`} />;
127
    }
Kim, Chaerin's avatar
Kim, Chaerin committed
128

129
130
    const handlePage = (num) => {
        setIndex(num);
baesangjune's avatar
baesangjune committed
131
132
        console.log("pagenation num", num)
        console.log(index)
133
134
135
    }


Kim, Chaerin's avatar
Kim, Chaerin committed
136
137
138
    const handleChange = (e) => {
        setSearch(e.target.value);
    }
Kim, Chaerin's avatar
Kim, Chaerin committed
139

Kim, Chaerin's avatar
Kim, Chaerin committed
140
    const handleSubmit = (e) => {
baesangjune's avatar
baesangjune committed
141
        e.preventDefault()
baesangjune's avatar
baesangjune committed
142
143
        setState(true)
        setIndex(1)
Kim, Chaerin's avatar
Kim, Chaerin committed
144
    }
145

Kim, Chaerin's avatar
Kim, Chaerin committed
146
    function paginate(items, pageNumber, itemNumber) {
147
        const page = [];
Kim, Chaerin's avatar
Kim, Chaerin committed
148
149
        const startIndex = (pageNumber - 1) * itemNumber
        for (var i = 0; i < itemNumber; i++) {
baesangjune's avatar
baesangjune committed
150

151
152
            page.push(items[(startIndex + i)])
        }
baesangjune's avatar
baesangjune committed
153
        console.log("뿌릴 data22222222222222222", page)
154
155
        return page
    }
baesangjune's avatar
baesangjune committed
156
    //usestate 쓰거나 한번에 useeffect에 넣기
157

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
158
    async function handlebookmark(index) {
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
159
        if (!bookmark[index]) {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
160
            console.log(pagePlace[index])
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
161
162
163
164
165
166
            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)
167
                console.log("bookmark=", bookmark)
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
168
169
170
            } catch (error) {
                catchErrors(error, setError)
            }
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
171
        } else {
Lee SeoYeon's avatar
0127    
Lee SeoYeon committed
172
173
174
175
176
177
178
179
180
181
            try {
                const response = await axios.delete(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
                alert(response.data, '저장된 북마크가 삭제되었습니다.')
                const showArr = bookmark
                showArr[index] = false
                setBookmark(showArr)
                console.log("bookmark=", bookmark)
            } catch (error) {
                catchErrors(error, setError)
            }
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
182
183
        }
    }
baesangjune's avatar
baesangjune committed
184

baesangjune's avatar
.    
baesangjune committed
185
186

    let time = new Date()
187

Kim, Chaerin's avatar
Kim, Chaerin committed
188
    return (
189
        <Container >
Kim, Chaerin's avatar
Kim, Chaerin committed
190
            <Link to="/path" className="d-flex justify-content-center"><Image src={ohuh} /></Link>
191
192
            <Row className="mb-2" className="d-flex justify-content-center">
                <Form style={{ width: "90vw" }} onSubmit={handleSubmit}>
193
194
195
196
197
198
199
200
201
202
203
204
                    <InputGroup size="lg">
                        <FormControl
                            placeholder="검색어를 입력하세요."
                            value={search}
                            aria-label="Large"
                            aria-describedby="inputGroup-sizing-sm"
                            onChange={handleChange}
                        />
                        <InputGroup.Append>
                            <Button type="submit" variant="outline-secondary" >검색</Button>
                        </InputGroup.Append>
                    </InputGroup>
205
                </Form>
Kim, Chaerin's avatar
Kim, Chaerin committed
206
            </Row>
207
            {/* {time.toLocaleString()} */}
208
            <Row className="d-flex flex-wrap">
baesangjune's avatar
baesangjune committed
209
210

                {console.log("#####################33", pagePlace)}
211
212
                {pagePlace.map((place, index) => {
                    return (
213
214
                        <Col key={index} md={6} >
                            <Card align="center" border="info" style={{ margin: "3%" }}>
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
215
216
217
218
219
220
221
222
223
224

                                <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>
225
                                <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={place.img} />
Kim, Chaerin's avatar
Kim, Chaerin committed
226
                                <Card.Body>
227
                                    <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
228
                                        {place.address} </Card.Text>
Kim, Chaerin's avatar
Kim, Chaerin committed
229
230
231
                                    <Link to={`/place?id=${index}&place=${place.name}`} >
                                        <Button variant="primary"> {place.name} 자세히 살펴보기</Button>
                                    </Link>
232
233
234
                                </Card.Body>
                            </Card>
                        </Col>
235
236
237
                    )
                })}
            </Row>
238
            <Row className="mt-2 d-flex justify-content-center">
239
                <Paginations index={index} endPage={endPage} handlePage={handlePage}></Paginations>
240
            </Row>
Kim, Chaerin's avatar
Kim, Chaerin committed
241
        </Container >
Kim, Chaerin's avatar
Kim, Chaerin committed
242
243
244
    );
}

245
export default Search;