import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import ohuh from '../ohuh-sm.PNG'; import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Nav } from 'react-bootstrap'; import Paginations from '../Components/Paginations'; import axios from 'axios'; import queryString from 'query-string' import * as Icon from 'react-bootstrap-icons'; import { isAuthenticated } from '../utils/auth'; import catchErrors from '../utils/catchErrors' function Search(props) { const [state, setState] = useState(false); const [index, setIndex] = useState(1); const [search, setSearch] = useState(queryString.parse(props.location.search).keyword); const [bookmark, setBookmark] = useState([false, false, false, false]) const [association, setAssociation] = useState([{ name: " ", address: " ", img: " " }]) const [pagePlace, setPagePlace] = useState([{ name: " ", address: " ", img: " " }, { name: " ", address: " ", img: " " }]) const [endPage, setEndPage] = useState(1) const [error, setError] = useState('') const user = isAuthenticated() async function getBookmark() { try { const response = await axios.get(`/api/users/bookmark?ID=${user}`) // setBookmark(response.data.bookmark) } catch (error) { catchErrors(error, setError(error)) } } const getAssociation = () => { axios.get(`/api/search/association?keyword=${search}`) .then(res => { console.log("Associations = ", res.data) setAssociation(res.data) }) .catch(err => { console.log("search.associations 에러 발생", err) }) } useEffect(() => { getAssociation() }, []); useEffect(() => { if (association.length < 3) { setPagePlace(paginate(association, index, association.length)) } else { setPagePlace(paginate(association, index, 4)) } setEndPage(Math.floor((association.length / 4))) }, [association, index]) useEffect(() => { getAssociation() if (state) { // window.location.reload() // return ; props.history.push('/search?keyword=' + search) setState(false) // console.log("search야", search) } window.addEventListener("scroll", infiniteScroll); return () => { window.removeEventListener("scroll", infiniteScroll); } }, [state]); 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("더불러") } console.log(scrollHeight, scrollTop, clientHeight) } const handlePage = (num) => { setIndex(num); console.log("pagenation num", num) console.log(index) } const handleChange = (e) => { setSearch(e.target.value); } const handleSubmit = (e) => { e.preventDefault() setState(true) setIndex(1) setBookmark([false, false, false, false]) } function paginate(items, pageNumber, itemNumber) { const page = []; const startIndex = (pageNumber - 1) * itemNumber for (var i = 0; i < itemNumber; i++) { page.push(items[(startIndex + i)]) } console.log("뿌릴 data22222222222222222", page) return page } 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}&place=${pagePlace[index]._id}`) alert(response.data, '저장된 북마크가 삭제되었습니다.') const showArr = bookmark showArr[index] = false setBookmark(showArr) console.log("bookmark=", bookmark) } catch (error) { catchErrors(error, setError) } } } return (
{console.log("#####################33", pagePlace)} {pagePlace.map((place, index) => { return ( {place.name} {user ? : null} {place.address} ) })}
); } export default Search;