boxes-fe/src/App.js

68 lines
2.1 KiB
JavaScript

// src/App.js
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import Login from './components/Login';
import Boxes from './components/Boxes';
import Items from './components/Items';
import Navbar from './components/Navbar'; // Correct import here
import Admin from './components/Admin'; // Correct import here
import { createContext } from 'react';
import ErrorBoundary from './components/ErrorBoundary';
import './styles.css'
export const AppContext = createContext();
export const PRIMARY_COLOR = '#333';
export const SECONDARY_COLOR = '#ffffff';
export const BACKGROUND_COLOR = '#dddddd';
function App() {
const [token, setToken] = useState(localStorage.getItem('token'));
useEffect(() => {
if (token) {
localStorage.setItem('token', token);
}
}, [token]);
return (
<AppContext.Provider value={{ token, setToken }}>
<ErrorBoundary>
<Router>
<Navbar />
<AppRoutes token={token} setToken={setToken} />
</Router>
</ErrorBoundary>
</AppContext.Provider>
);
}
function AppRoutes({ token, setToken }) {
const { id } = useParams(); // Move useParams here
return (
<>
<Routes>
<Route path="/api/v1/login" element={<Login setToken={setToken} />} />
<Route
path="/api/v1/boxes"
element={token ? <Boxes token={token} /> : <Navigate to="/api/v1/login" replace />}
/>
<Route
path="/api/v1/items"
element={token ? <Items token={token} /> : <Navigate to="/api/v1/login" replace />}
/>
<Route
path="/api/v1/boxes/:id/items"
element={token ? <Items box_id={id} token={token} /> : <Navigate to="/api/v1/login" replace />}
/>
<Route
path="/api/v1/admin"
element={token ? <Admin token={token}/> : <Navigate to="/api/v1/login" replace />}
/>
<Route path="*" element={<Navigate to={token ? "/api/v1/boxes" : "/api/v1/login"} replace />} />
</Routes>
</>
);
}
export default App;