Files
aaredb/frontend/src/App.tsx
GotthardG b04c7b8c95 Add Image models and clean up test code structure
Introduced `ImageCreate` and `Image` models to handle image-related data in the backend. Improved the organization and readability of the testing notebook by consolidating and formatting code into distinct sections with markdown cells.
2025-02-26 15:11:20 +01:00

99 lines
4.4 KiB
TypeScript

import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { setUpToken, clearToken } from './utils/auth'; // Import the token utilities
import ResponsiveAppBar from './components/ResponsiveAppBar';
import ShipmentView from './pages/ShipmentView';
import HomePage from './pages/HomeView';
import ResultsView from './pages/ResultsView';
import PlanningView from './pages/PlanningView';
import Modal from './components/Modal';
import AddressManager from './pages/AddressManagerView';
import ContactsManager from './pages/ContactsManagerView';
import LoginView from './pages/LoginView';
import ProtectedRoute from './components/ProtectedRoute';
const App: React.FC = () => {
const [openAddressManager, setOpenAddressManager] = useState(false);
const [openContactsManager, setOpenContactsManager] = useState(false);
const handleOpenAddressManager = () => setOpenAddressManager(true);
const handleCloseAddressManager = () => setOpenAddressManager(false);
const handleOpenContactsManager = () => setOpenContactsManager(true);
const handleCloseContactsManager = () => setOpenContactsManager(false);
const [pgroups, setPgroups] = useState<string[]>([]);
const [activePgroup, setActivePgroup] = useState<string>('');
// On app load, configure the token
useEffect(() => {
setUpToken(); // Ensure token is loaded into OpenAPI on app initialization
}, []);
useEffect(() => {
const updateStateFromLocalStorage = () => {
const user = localStorage.getItem('user');
console.log("[DEBUG] User data in localStorage (update):", user); // Debug
if (user) {
try {
const parsedUser = JSON.parse(user);
if (parsedUser.pgroups && Array.isArray(parsedUser.pgroups)) {
setPgroups(parsedUser.pgroups);
setActivePgroup(parsedUser.pgroups[0] || '');
console.log("[DEBUG] Pgroups updated in state:", parsedUser.pgroups);
} else {
console.warn("[DEBUG] No pgroups found in user data");
}
} catch (error) {
console.error("[DEBUG] Error parsing user data:", error);
}
} else {
console.warn("[DEBUG] No user in localStorage");
}
};
// Run on component mount
updateStateFromLocalStorage();
// Listen for localStorage changes
window.addEventListener('storage', updateStateFromLocalStorage);
// Cleanup listener on unmount
return () => {
window.removeEventListener('storage', updateStateFromLocalStorage);
};
}, []);
const handlePgroupChange = (newPgroup: string) => {
setActivePgroup(newPgroup);
console.log(`pgroup changed to: ${newPgroup}`);
};
return (
<Router>
<ResponsiveAppBar
activePgroup={activePgroup}
onOpenAddressManager={handleOpenAddressManager}
onOpenContactsManager={handleOpenContactsManager}
pgroups={pgroups || []} // Default to an empty array
currentPgroup={activePgroup}
onPgroupChange={handlePgroupChange}
/>
<Routes>
<Route path="/login" element={<LoginView />} />
<Route path="/" element={<ProtectedRoute element={<HomePage />} />} />
<Route path="/shipments" element={<ProtectedRoute element={<ShipmentView pgroups={pgroups} activePgroup={activePgroup} />} />} />
<Route path="/planning" element={<ProtectedRoute element={<PlanningView />} />} />
<Route path="/results" element={<ProtectedRoute element={<ResultsView pgroups={pgroups} activePgroup={activePgroup} />} />} />
</Routes>
<Modal open={openAddressManager} onClose={handleCloseAddressManager} title="Address Management">
<AddressManager pgroups={pgroups} activePgroup={activePgroup} />
</Modal>
<Modal open={openContactsManager} onClose={handleCloseContactsManager} title="Contacts Management">
<ContactsManager pgroups={pgroups} activePgroup={activePgroup} />
</Modal>
</Router>
);
};
export default App;