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 (
-
-
-
+
+
+ } />
+
+
);
}
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()['*'];
+ const location = useLocation();
+ const navigate = useNavigate();
+
const [data, setData] = useState([]);
- 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 (