Compare commits
No commits in common. "76b50ec462e423e36368dee0b2c7c8707a74ca40" and "8743133f05a1893aa4313a652a179520466c308f" have entirely different histories.
76b50ec462
...
8743133f05
2255
package-lock.json
generated
2255
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -47,7 +47,6 @@
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-prettier": "^5.0.1",
|
||||
"prettier": "^3.0.3",
|
||||
"react-router-dom": "^6.20.0",
|
||||
"typescript": "4.9.5"
|
||||
"typescript": "^5.2.2"
|
||||
}
|
||||
}
|
||||
|
@ -38,12 +38,7 @@ body {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.GalleryItem > .ImgLink {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.GalleryItem > .ImgLink > img,
|
||||
.GalleryItem > img,
|
||||
.GalleryItem > video {
|
||||
object-fit: contain;
|
||||
max-height: 80vh;
|
||||
|
10
src/App.tsx
10
src/App.tsx
@ -1,14 +1,12 @@
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import './App.css';
|
||||
|
||||
import Gallery from './Gallery/index';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/photos/*" element={<Gallery />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
<div className="App">
|
||||
<Gallery />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -1,34 +1,21 @@
|
||||
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(params === undefined ? '' : params);
|
||||
const [category, setCategory] = useState('');
|
||||
|
||||
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 (
|
||||
@ -116,9 +103,7 @@ function ImageItem({ thumbnail_url, url, isPlaceholder }: galleryItem) {
|
||||
<a href={url} target="_blank">
|
||||
{getFileName(url)}
|
||||
</a>
|
||||
<a href={url} target="_blank" className="ImgLink">
|
||||
<img src={thumbnail_url} loading="lazy" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user