import React, { useState, useEffect } from 'react'; import { Link, Redirect } from 'react-router-dom'; import ohuh from '../ohuh-sm.PNG'; import Place from '../Components/Place'; import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button } 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'; function Search(props) { const [state, setState] = useState(false); const [index, setIndex] = useState(1); const [showSet, setShowSet] = useState([false, false, false, false]); const [search, setSearch] = useState(queryString.parse(props.location.search).keyword); const [bookmark, setBookmark] = useState([false, false, false, false]) const user = isAuthenticated() const [mobile, setMobile] = useState(); const [association, setAssociation] = useState([{ name: " ", address: " ", img: " " }]) const [pagePlace, setPagePlace] = useState([{ name: " ", address: " ", img: " " }, { name: " ", address: " ", img: " " }]) const [endPage, setEndPage] = useState(1) 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)) } console.log("뿌릴 data1", pagePlace) setEndPage(Math.floor((association.length / 4))) console.log("7489309484839",endPage) }, [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 places = [{ name: "한라산", address: "제주 서귀포시 토평동 산15-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?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", }] if (state !== false) { // console.log(queryString.parse(props.location.search)) // = {keyword:search} // return ; // history.pushState(null, null, "?"+queryParams.toString()); // return ; } 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) } 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 } //usestate 쓰거나 한번에 useeffect에 넣기 async function handlebookmark(index) { if (!bookmark[index]) { console.log(pagePlace[index]) 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) } else { 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) } } let time = new Date() return (
{/* {time.toLocaleString()} */} {console.log("#####################33", pagePlace)} {pagePlace.map((place, index) => { return ( {place.name} {user ? : null} {place.address} setShowSet([false, false, false, false])} /> ) })}
); } export default Search;