SubNav.js 1.35 KB
Newer Older
Kim, Subin's avatar
Kim, Subin committed
1
import React, { useState, useEffect, useRef } from 'react';
kusang96's avatar
kusang96 committed
2
3
import { Link } from 'react-router-dom';
import { Navbar, Nav } from 'react-bootstrap';
kusang96's avatar
kusang96 committed
4
5
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
Kim, Subin's avatar
Kim, Subin committed
6
7

function SubNav() {
Jiwon Yoon's avatar
Jiwon Yoon committed
8
    const [categoriesDiv, setCategoriesDiv] = useState([])
kusang96's avatar
kusang96 committed
9
10
11
12
13
    const [error, setError] = useState('')


    useEffect(async () => {
        try {
Jiwon Yoon's avatar
Jiwon Yoon committed
14
            const response = await axios.get('/api/categories')
kusang96's avatar
kusang96 committed
15
16
            let list = []
            Object.keys(response.data[0]).forEach((ele) => {
kusang96's avatar
kusang96 committed
17
                const url = ele.toLowerCase()
kusang96's avatar
kusang96 committed
18
                list.push(
19
                    <Nav.Link as={Link} to={`/categories/${url}`}>{ele}</Nav.Link>
kusang96's avatar
kusang96 committed
20
21
                )
            })
Jiwon Yoon's avatar
Jiwon Yoon committed
22
            setCategoriesDiv(list)
kusang96's avatar
kusang96 committed
23
24
25
26
        } catch (error) {
            catchErrors(error, setError)
        }
    }, [])
Kim, Subin's avatar
Kim, Subin committed
27
28

    return (
kusang96's avatar
kusang96 committed
29
        <Navbar sticky="top" className="flex-nowrap" style={{ top: "62px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}>
30
31
32
33
34
35
36
            <style type="text/css">
                {`
                .nav-link, .nav-link:hover, .nav-link:active {
                    color: #91877F;
                }
                `}
            </style>
Jiwon Yoon's avatar
Jiwon Yoon committed
37
38
            <Nav style={{overflowX: "auto"}}>
                {categoriesDiv.map(item => item)}
39
40
            </Nav>
        </Navbar>
Kim, Subin's avatar
Kim, Subin committed
41
42
43
44
    )
}

export default SubNav