import React, { useState, useEffect } from 'react' import { Alert, Col, Card, Container, Form, Row, Button, Nav, Navbar } from "react-bootstrap" import axios from "axios" import catchErrors from './utils/catchErrors.js' import { isAuthenticated } from './utils/auth' import * as Icon from 'react-bootstrap-icons'; import Place from './Components/Place.js' const INIT_PAGE = { bookmark: [] } function Bookmark() { const [page, setPage] = useState(INIT_PAGE) const [index, setIndex] = useState(1); const [error, setError] = useState('') const [state, setState] = useState(false); const [bookmark, setBookmark] = useState([false, false, false, false]) const [pagePlace, setPagePlace] = useState([]) const [showSet, setShowSet] = useState([false, false, false, false]); const user = isAuthenticated() async function getBookmark() { try { const response = await axios.get(`/api/users/bookmark?ID=${user}`) setPagePlace(response.data.bookmark) } catch (error) { catchErrors(error, setError) } } 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() }, []) return ( 북마크 {console.log("#####################33", pagePlace)} {pagePlace.map((place, index) => { return ( {place.name} {user ? : null} {place.address} {/* setShowSet([false, false, false, false])} /> */} ) })} ) } export default Bookmark // async function handleSubmit(e){ // setState(true); //버튼이 눌려서 handlesubmit이될때 setState값이 true로 바뀐다 // 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])