Commit 5e8130f8 authored by Lee SeoYeon's avatar Lee SeoYeon
Browse files

0127

parent c4a0efaf
This diff is collapsed.
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { Alert, Col, Card, Container, Form, Row, Button, Nav, Navbar, ListGroup, Image, Table } from "react-bootstrap" import { Alert, Col, Card, Container, Form, Row, Button, Nav, Navbar } from "react-bootstrap"
import axios from "axios" import axios from "axios"
import catchErrors from './utils/catchErrors.js' import catchErrors from './utils/catchErrors.js'
import { isAuthenticated } from './utils/auth' import { isAuthenticated } from './utils/auth'
import * as Icon from 'react-bootstrap-icons';
import Place from './Components/Place.js'
const INIT_PAGE = { const INIT_PAGE = {
bookmark: ['성산일출봉', '제주도', '한라산', '주상절리', '오설록 티 뮤지엄',] bookmark: []
} }
function Bookmark() { function Bookmark() {
const [page, setPage] = useState(INIT_PAGE) const [page, setPage] = useState(INIT_PAGE)
const [index, setIndex] = useState(1);
const [error, setError] = useState('') const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
const [state, setState] = useState(false); 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() const user = isAuthenticated()
const userId = localStorage.getItem('loginStatus')
async function getBookmark() { async function getBookmark() {
try { try {
setError('') const response = await axios.get(`/api/users/bookmark?ID=${user}`)
console.log(page.bookmark) setPagePlace(response.data.bookmark)
const bookmark = page.bookmark } catch (error) {
console.log(userId) catchErrors(error, setError)
const response = await axios.put(`/api/users/bookmark`, { bookmark: bookmark, userId: userId }) }
console.log(response.data) }
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) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
}
useEffect(() => {
getBookmark()
}, [])
return ( return (
<Container> <Container>
<Navbar style={"#"} bg="primary" variant="dark"> <Navbar bg="info" variant="dark">
<Navbar.Brand href="/">북마크</Navbar.Brand> <Navbar.Brand href="/">북마크</Navbar.Brand>
<Nav className="mr-auto"> <Nav className="mr-auto">
<Nav.Link href="/">Home</Nav.Link> <Nav.Link href="/">Home</Nav.Link>
</Nav> </Nav>
<Button type='submit' onClick={getBookmark}>저장</Button>
</Navbar> </Navbar>
<Form> <Row className="d-flex flex-wrap">
<ListGroup> {console.log("#####################33", pagePlace)}
<ListGroup.Item>{page.bookmark[0]}</ListGroup.Item> {pagePlace.map((place, index) => {
<ListGroup.Item>{page.bookmark[1]}</ListGroup.Item> return (
<ListGroup.Item>{page.bookmark[2]}</ListGroup.Item> <Col key={index} md={6} >
<ListGroup.Item>{page.bookmark[3]}</ListGroup.Item> <Card align="center" border="info" style={{ margin: "3%" }}>
<ListGroup.Item>{page.bookmark[4]}</ListGroup.Item>
</ListGroup> <Card.Title className="d-flex justify-content-center" style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place.name}
</Form> {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>
<Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={place.img} />
<Card.Body >
<Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
{place.address} </Card.Text>
<Button variant="info" onClick={() => {
const showArr = [false, false, false, false]
showArr[index] = true
setShowSet(showArr)
}}>{place.name} 자세히 살펴보기</Button>
{/* <Place place={place} index={index} show={showSet[index]} onHide={() => setShowSet([false, false, false, false])} /> */}
</Card.Body>
</Card>
</Col>
)
})}
</Row>
</Container> </Container>
) )
} }
......
...@@ -8,7 +8,7 @@ function Paginations(props) { ...@@ -8,7 +8,7 @@ function Paginations(props) {
return ( return (
<> <>
{(props.endPage > 5) ? {(props.endPage > 5) ?
<Pagination> <Pagination >
<Pagination.First onClick={() => props.handlePage(1)} /> <Pagination.First onClick={() => props.handlePage(1)} />
{props.index === 1 ? <Pagination.Prev onClick={() => props.handlePage(props.index)} /> : <Pagination.Prev onClick={() => props.handlePage(props.index - 1)} />} {props.index === 1 ? <Pagination.Prev onClick={() => props.handlePage(props.index)} /> : <Pagination.Prev onClick={() => props.handlePage(props.index - 1)} />}
{props.index === props.endPage - 1 ? <Pagination.Item onClick={() => props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""} {props.index === props.endPage - 1 ? <Pagination.Item onClick={() => props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
......
...@@ -2,12 +2,13 @@ import React, { useState, useEffect } from 'react'; ...@@ -2,12 +2,13 @@ import React, { useState, useEffect } from 'react';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import ohuh from '../ohuh-sm.PNG'; import ohuh from '../ohuh-sm.PNG';
import Place from '../Components/Place'; import Place from '../Components/Place';
import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button } from 'react-bootstrap'; import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Nav } from 'react-bootstrap';
import Paginations from '../Components/Paginations'; import Paginations from '../Components/Paginations';
import axios from 'axios'; import axios from 'axios';
import queryString from 'query-string' import queryString from 'query-string'
import * as Icon from 'react-bootstrap-icons'; import * as Icon from 'react-bootstrap-icons';
import { isAuthenticated } from '../utils/auth'; import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors'
function Search(props) { function Search(props) {
...@@ -21,8 +22,16 @@ function Search(props) { ...@@ -21,8 +22,16 @@ function Search(props) {
const [association, setAssociation] = useState([{ name: " ", address: " ", img: " " }]) const [association, setAssociation] = useState([{ name: " ", address: " ", img: " " }])
const [pagePlace, setPagePlace] = useState([{ name: " ", address: " ", img: " " }, { name: " ", address: " ", img: " " }]) const [pagePlace, setPagePlace] = useState([{ name: " ", address: " ", img: " " }, { name: " ", address: " ", img: " " }])
const [endPage, setEndPage] = useState(1) const [endPage, setEndPage] = useState(1)
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)
}
}
const getAssociation = () => { const getAssociation = () => {
axios.get(`/api/search/association?keyword=${search}`) axios.get(`/api/search/association?keyword=${search}`)
...@@ -147,19 +156,27 @@ function Search(props) { ...@@ -147,19 +156,27 @@ function Search(props) {
async function handlebookmark(index) { async function handlebookmark(index) {
if (!bookmark[index]) { if (!bookmark[index]) {
console.log(pagePlace[index]) console.log(pagePlace[index])
try {
const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`) const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
alert(response.data, '북마크가 저장되었습니다.') alert(response.data, '북마크가 저장되었습니다.')
const showArr = bookmark const showArr = bookmark
showArr[index] = true showArr[index] = true
setBookmark(showArr) setBookmark(showArr)
console.log("bookmark=", bookmark) console.log("bookmark=", bookmark)
} catch (error) {
catchErrors(error, setError)
}
} else { } else {
try {
const response = await axios.delete(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`) const response = await axios.delete(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
alert(response.data, '저장된 북마크가 삭제되었습니다.') alert(response.data, '저장된 북마크가 삭제되었습니다.')
const showArr = bookmark const showArr = bookmark
showArr[index] = false showArr[index] = false
setBookmark(showArr) setBookmark(showArr)
console.log("bookmark=", bookmark) console.log("bookmark=", bookmark)
} catch (error) {
catchErrors(error, setError)
}
} }
} }
...@@ -197,9 +214,7 @@ function Search(props) { ...@@ -197,9 +214,7 @@ function Search(props) {
<Card.Title className="d-flex justify-content-center" style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place.name} <Card.Title className="d-flex justify-content-center" style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place.name}
{user ? {user ?
<Button <Button
variant={bookmark[index] ? "primary" : "light"} variant={bookmark[index] ? "primary" : "light"}
style={{}}
onClick={() => handlebookmark(index, place)}> onClick={() => handlebookmark(index, place)}>
<Icon.BookmarkStarFill size={35} /> <Icon.BookmarkStarFill size={35} />
{console.log("bookmark", bookmark)} {console.log("bookmark", bookmark)}
...@@ -209,7 +224,7 @@ function Search(props) { ...@@ -209,7 +224,7 @@ function Search(props) {
<Card.Body > <Card.Body >
<Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} > <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
{place.address} </Card.Text> {place.address} </Card.Text>
<Button variant="primary" onClick={() => { <Button variant="info" onClick={() => {
const showArr = [false, false, false, false] const showArr = [false, false, false, false]
showArr[index] = true showArr[index] = true
setShowSet(showArr) setShowSet(showArr)
......
...@@ -56,18 +56,19 @@ const search = async (req, res, next) => { ...@@ -56,18 +56,19 @@ const search = async (req, res, next) => {
const find = (req, res, next) => { const find = (req, res, next) => {
console.log("7", req.query.keyword) console.log("7", req.query.keyword)
const keyword = req.query.keyword const keyword = req.query.keyword
if (req.body.db) { res.send("dkssud")
next() // if (req.body.db) {
} // next()
Review.find({ keyword: keyword }, function (err, reviews) { // }
req.reviews = [] // Review.find({ keyword: keyword }, function (err, reviews) {
if (reviews) { // req.reviews = []
if (reviews.length > 10) { // if (reviews) {
res.status(200).send({ review: reviews, db: true }) // if (reviews.length > 10) {
} // res.status(200).send({ review: reviews, db: true })
req.reviews = reviews // }
} // req.reviews = reviews
next() // }
}) // next()
// })
} }
export default { search, find } export default { search, find }
...@@ -47,30 +47,13 @@ const userById = async (req, res, next, id) => { ...@@ -47,30 +47,13 @@ const userById = async (req, res, next, id) => {
} }
const getBookmark = async (req, res) => { const getBookmark = async (req, res) => {
const { bookmark, userId } = req.body await User.findOne({ _id: req.query.ID }).populate('bookmark').exec((err, bookmark) => {
console.log(bookmark, userId) console.log(bookmark, "dkssud")
// const bookpage = req.body.bookmark res.send(bookmark)
console.log('page:', bookmark) })
// const user = req.user.userId
console.log('userId:', userId)
const updatedUser = await User.findOne({ _id: userId })
if (updatedUser) {
updatedUser.bookmark = bookmark
updatedUser.save()
}
// const updatedUser = await new User({ bookmark }).save()
// res.json(updatedUser)
console.log(updatedUser)
res.send(updatedUser)
} }
const setBookmark = async (req, res) => { const setBookmark = async (req, res) => {
// const place = await Place.findOne(address)
// const bookmarkUser = await User.findOne({ place }.populate(bookmark))
// if (bookmarkUser) {
// bookmarkUser.save()
// }
console.log(req.query.ID, req.query.place, "여기에요 여기!!!!") console.log(req.query.ID, req.query.place, "여기에요 여기!!!!")
await User.updateOne({ _id: req.query.ID }, { $push: { bookmark: req.query.place } }) await User.updateOne({ _id: req.query.ID }, { $push: { bookmark: req.query.place } })
res.send("추가완료") res.send("추가완료")
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment