Bookmark.js 2.51 KB
Newer Older
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
1
2
3
import React, { useState, useEffect } from 'react'
import { Alert, Col, Card, Container, Form, Row, Button, Nav, Navbar, ListGroup, Image, Table } from "react-bootstrap"
import axios from "axios"
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
4
import catchErrors from './utils/catchErrors.js'
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
5
import { isAuthenticated } from './utils/auth'
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
6

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
7

Lee SeoYeon's avatar
..    
Lee SeoYeon committed
8
const INIT_PAGE = {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
9
10
    bookmark: ['성산일출봉', '제주도', '한라산', '주상절리', '오설록 티 뮤지엄',]

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
11
12
}

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
13

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
14
function Bookmark() {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
15
    const [page, setPage] = useState(INIT_PAGE)
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
16
    const [error, setError] = useState('')
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
17
18
    const [success, setSuccess] = useState(false)
    const [state, setState] = useState(false);
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
19

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
20
21
    const user = isAuthenticated()

Lee SeoYeon's avatar
..    
Lee SeoYeon committed
22
23
    const userId = localStorage.getItem('loginStatus')

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
24
    async function getBookmark() {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
25
26
        try {
            setError('')
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
27
28
            console.log(page.bookmark)
            const bookmark = page.bookmark
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
29
            console.log(userId)
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
30
31
            const response = await axios.put(`/api/users/bookmark`, { bookmark: bookmark, userId: userId })
            console.log(response.data)
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
32
33
        } catch (error) {
            catchErrors(error, setError)
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
34
        }
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
35
36
    }

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
37
38
    return (
        <Container>
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
39
            <Navbar style={"#"} bg="primary" variant="dark">
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
40
41
42
43
                <Navbar.Brand href="/">북마크</Navbar.Brand>
                <Nav className="mr-auto">
                    <Nav.Link href="/">Home</Nav.Link>
                </Nav>
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
44
                <Button type='submit' onClick={getBookmark}>저장</Button>
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
45
            </Navbar>
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
46
47
48
49
50
51
52
53
54
            <Form>
                <ListGroup>
                    <ListGroup.Item>{page.bookmark[0]}</ListGroup.Item>
                    <ListGroup.Item>{page.bookmark[1]}</ListGroup.Item>
                    <ListGroup.Item>{page.bookmark[2]}</ListGroup.Item>
                    <ListGroup.Item>{page.bookmark[3]}</ListGroup.Item>
                    <ListGroup.Item>{page.bookmark[4]}</ListGroup.Item>
                </ListGroup>
            </Form>
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
55
56
57
58
        </Container>
    )
}

Lee SeoYeon's avatar
..    
Lee SeoYeon committed
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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])