From d332635d6addc3d0a035f6dcf9249f9ff6d1e9d7 Mon Sep 17 00:00:00 2001
From: Sheldon Lee <sheldon@sheldonlee.com>
Date: Thu, 30 Nov 2023 04:49:16 +0800
Subject: [PATCH] Implement react router

---
 src/App.tsx           | 10 ++++++----
 src/Gallery/index.tsx | 19 ++++++++++++++++---
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f2c6c4e..1c74149 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,14 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import './App.css';
-
 import Gallery from './Gallery/index';
 
 function App() {
   return (
-    <div className="App">
-      <Gallery />
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/photos/*" element={<Gallery />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 
diff --git a/src/Gallery/index.tsx b/src/Gallery/index.tsx
index 5f297db..6925bb8 100644
--- a/src/Gallery/index.tsx
+++ b/src/Gallery/index.tsx
@@ -1,21 +1,34 @@
-import React from 'react';
 import '../App.css';
 import placeholderPng from './placeholder.png';
 import { useState, useEffect } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
 
 function Gallery() {
+  const params = useParams<string>()['*'];
+  const location = useLocation();
+  const navigate = useNavigate();
+
   const [data, setData] = useState<galleryItemInfo[]>([]);
-  const [category, setCategory] = useState('');
+  const [category, setCategory] = useState(params === undefined ? '' : params);
 
   useEffect(() => {
     post(category, (data: galleryItemInfo[]) => {
+      if (data.length === 0) {
+        updateCategory('');
+      }
       setData(data);
     });
   }, [category]);
 
+  useEffect(() => {
+    setData(getPlaceholderData());
+    setCategory(params as string);
+  }, [location]);
+
   const updateCategory = (category: string) => {
-    setData(getPlaceholderData);
+    setData(getPlaceholderData());
     setCategory(category);
+    navigate(`/photos/${category}`);
   };
 
   return (