From 52dddca2532d3742568c3de35ec7690ef2279e38 Mon Sep 17 00:00:00 2001 From: Tiago Brito <69848652+britotiago03@users.noreply.github.com> Date: Fri, 10 May 2024 05:12:54 +0200 Subject: [PATCH] Implemented Navigation.js --- frontend/src/components/Navigation.js | 41 +++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 frontend/src/components/Navigation.js diff --git a/frontend/src/components/Navigation.js b/frontend/src/components/Navigation.js new file mode 100644 index 0000000..fe3d16c --- /dev/null +++ b/frontend/src/components/Navigation.js @@ -0,0 +1,41 @@ +// Navigation.js +import React, { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import '../css/Navigation.css' + +function Navigation() { + const [categories, setCategories] = useState([]); + const [error, setError] = useState(null); + + useEffect(() => { + fetchCategories(); + }, []); + + const fetchCategories = async () => { + try { + const response = await fetch('http://localhost:5000/categories'); // Adjust this URL to where your API is hosted + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + setCategories(data); + } catch (error) { + console.error('Error fetching categories:', error); + setError(error.message); + } + }; + + if (error) return <p>Error loading categories: {error}</p>; + + return ( + <nav className="category-nav"> + <ul> + {categories.map(category => ( + <li key={category.CategoryID}> + <Link to={`/category/${category.Name}`}>{category.Name}</Link> + </li> + ))} + </ul> + </nav> + ); +} + +export default Navigation; -- GitLab