From 2e6c03146c4cd1d05a600c94967584e5284db6fb Mon Sep 17 00:00:00 2001
From: Marc Cataford <mcat@riseup.net>
Date: Wed, 20 Dec 2023 22:50:07 -0500
Subject: [PATCH] feat(fe-routing): using router in application root

---
 frontend/src/App.tsx | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bfd559a..07fbd93 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -12,6 +12,8 @@ import AsyncTaskContext from "./contexts/AsyncTaskContext"
 import LocationContext, { useLocationContext } from "./contexts/LocationContext"
 import { useOwnFileList } from "./hooks/files"
 
+import { Router, Route } from "./router"
+
 const routeLabels = {
 	ITEM_DETAILS: "item-details",
 }
@@ -30,14 +32,24 @@ const App = () => {
 		<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
 			<NavigationBar />
 			<Box component="main" sx={{ display: "flex", paddingTop: "10px" }}>
-				<Box component="div" sx={{ flexGrow: 1 }}>
-					<FileList data={data} />
-				</Box>
-				{location.label === routeLabels.ITEM_DETAILS ? (
-					<Box component="div" sx={{ flexGrow: 1 }}>
-						<FileDetails itemId={location.params.itemId} />
-					</Box>
-				) : null}
+				<Router>
+					<Route path="/">
+						<Box component="div" sx={{ flexGrow: 1 }}>
+							<FileList data={data} />
+						</Box>
+					</Route>
+					<Route path="/item/:itemId">
+						<>
+							<Box component="div" sx={{ flexGrow: 1 }}>
+								<FileList data={data} />
+							</Box>
+
+							<Box component="div" sx={{ flexGrow: 1 }}>
+								<FileDetails itemId={location.params.itemId} />
+							</Box>
+						</>
+					</Route>
+				</Router>
 			</Box>
 		</Box>
 	)