Bookmark.js 2.47 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
9
10
const INIT_PAGE = {
    bookmark: ['성산일출봉', '제주도', '한라산', '주상절리', '오설록 티 뮤지엄'],
  
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
11
12
}

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
13
14
const user = isAuthenticated()

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

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

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

    async function getBookmark( ) {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
26
27
        try {
            setError('')
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
28
29
30
31
            console.log(page)
            console.log(userId)
            await axios.post(`/api/users/bookmark`, {bookmark: page, userId: userId})
        
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
39
40
41
42
43
44
45
46
47
48
49
50
    // 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])
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
51
52


Lee SeoYeon's avatar
.    
Lee SeoYeon committed
53
54
55
56
57
58
59
60

    return (
        <Container>
            <Navbar bg="primary" variant="dark">
                <Navbar.Brand href="/">북마크</Navbar.Brand>
                <Nav className="mr-auto">
                    <Nav.Link href="/">Home</Nav.Link>
                </Nav>
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
61
                <Button type='submit' onClick={getBookmark}>저장</Button>
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
62
63
64
            </Navbar>
                <Form>
                    <ListGroup>
Lee SeoYeon's avatar
..    
Lee SeoYeon committed
65
66
67
68
69
                        <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>
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
70
71
72
73
74
75
76
                    </ListGroup>
                </Form>
        </Container>
    )
}

export default Bookmark