Create simple album list

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>

ui/src/pages/AlbumListPage.tsx

+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>
+    );
+}