From 780ad8612750813f694fccc5fd6e12bab8218c2f Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <janne@kuschku.de>
Date: Thu, 5 Aug 2021 17:58:20 +0200
Subject: [PATCH] Create simple album list
---
ui/src/App.tsx | 11 +++++++++++
ui/src/pages/AlbumListPage.tsx | 31 +++++++++++++++++++++++++++++++
2 files changed, 42 insertions(+)
create mode 100644 ui/src/pages/AlbumListPage.tsx
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 4c75a65..106dcbf 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -5,6 +5,7 @@ import {BrowserRouter, Link, Route} from "react-router-dom";
import {Redirect, Switch} from "react-router";
import {AppBar, Button, Toolbar, Typography} from "@material-ui/core";
import {useErrorDisplay} from "./components/ErrorContext";
+import {AlbumListPage} from "./pages/AlbumListPage";
import {ImageDetailPage} from './pages/ImageDetailPage';
import {ImageListPage} from "./pages/ImageListPage";
import {UploadView} from "./components/UploadView";
@@ -37,6 +38,13 @@ export function App() {
>
Images
</Button>
+ <Button
+ color="inherit"
+ component={Link}
+ to="/albums"
+ >
+ Albums
+ </Button>
</Toolbar>
</AppBar>
<ErrorDisplay/>
@@ -51,6 +59,9 @@ export function App() {
<Route path="/i/:imageId">
<ImageDetailPage/>
</Route>
+ <Route path="/albums">
+ <AlbumListPage/>
+ </Route>
<Redirect from="/" to="/images"/>
</Switch>
</ErrorWrapper>
diff --git a/ui/src/pages/AlbumListPage.tsx b/ui/src/pages/AlbumListPage.tsx
new file mode 100644
index 0000000..5b675fc
--- /dev/null
+++ b/ui/src/pages/AlbumListPage.tsx
@@ -0,0 +1,31 @@
+import {useListAlbums} from "../api/useListAlbums";
+import {Fragment} from "react";
+import {LinearProgress} from "@material-ui/core";
+import {ErrorPortal} from "../components/ErrorContext";
+import {ErrorAlert} from "../components/ErrorAlert";
+
+export function AlbumListPage() {
+ const {data: albums, error, isLoading} = useListAlbums();
+
+ return (
+ <Fragment>
+ {isLoading && (
+ <LinearProgress/>
+ )}
+ <ErrorPortal>
+ <ErrorAlert severity="error" error={error}/>
+ </ErrorPortal>
+ <ul>
+ {albums?.map(album => (
+ <li>
+ <p><a href={`/a/${album.id}`}>{album.id}</a></p>
+ <p>{album.title}</p>
+ <p>{album.description}</p>
+ <p>{album.created_at}</p>
+ <p>{album.updated_at}</p>
+ </li>
+ ))}
+ </ul>
+ </Fragment>
+ );
+}
--
GitLab