Implement all basic APIs

ui/src/pages/AlbumDetailPage.tsx

+import {Fragment, useEffect, useState} from "react";
+import {Button, CircularProgress, LinearProgress, TextField} from "@material-ui/core";
+import {Delete, Save} from "@material-ui/icons";
+import {useParams} from "react-router";
+import {ErrorPortal} from "../components/error/ErrorContext";
+import {ErrorAlert} from "../components/error/ErrorAlert";
+import {useGetAlbum} from "../api/useGetAlbum";
+import {useUpdateAlbum} from "../api/useUpdateAlbum";
+import {useDeleteAlbum} from "../api/useDeleteAlbum";
+import {useListImages} from "../api/useListImages";
+import {Image} from "../api/model/Image";
+import {useCreateAlbumImage} from "../api/useCreateAlbumImage";
+import {useReorderAlbum} from "../api/useReorderAlbum";
+import {AlbumImageView} from "../components/AlbumImageView";
+
+export interface AlbumDetailPageParams {
+    albumId: string
+}
+
+export function AlbumDetailPage() {
+    const {albumId} = useParams<AlbumDetailPageParams>();
+    const {data: album, error: albumError, isLoading: albumLoading} = useGetAlbum(albumId);
+    const {mutate: update, error: updateError, isLoading: updateLoading} = useUpdateAlbum();
+    const {mutate: remove, error: removeError, isLoading: removeLoading} = useDeleteAlbum();
+    const [title, setTitle] = useState<string>(album?.title || "");
+    const [description, setDescription] = useState<string>(album?.description || "");
+    useEffect(() => setTitle(album?.title || ""), [album?.title]);
+    useEffect(() => setDescription(album?.description || ""), [album?.description]);
+
+    const [addImage, setAddImage] = useState<string>("");
+    const [imageTitle, setImageTitle] = useState<string>("");
+    const [imageDescription, setImageDescription] = useState<string>("");
+
+    const {data: allImages, error: allImagesError, isLoading: allImagesLoading} = useListImages();
+
+    const {mutate: add, error: addImageError, isLoading: addImageLoading} = useCreateAlbumImage();
+    const {mutate: reorder, error: reorderError, isLoading: reorderLoading} = useReorderAlbum();
+
+    if (album === undefined) {
+        return (
+            <div>Error: 404</div>
+        );
+    }
+
+    return (
+        <Fragment>
+            {albumLoading && (
+                <LinearProgress/>
+            )}
+            <ErrorPortal>
+                <ErrorAlert severity="error" error={albumError}/>
+                <ErrorAlert severity="error" error={allImagesError}/>
+                <ErrorAlert severity="error" error={addImageError}/>
+                <ErrorAlert severity="error" error={updateError}/>
+                <ErrorAlert severity="error" error={removeError}/>
+                <ErrorAlert severity="error" error={reorderError}/>
+            </ErrorPortal>
+            <form onSubmit={(event) => {
+                update({...album, title, description,})
+                event.preventDefault();
+                event.stopPropagation();
+            }}>
+                <TextField
+                    fullWidth
+                    value={title}
+                    onChange={({target: {value}}) =>
+                        setTitle(value)}
+                />
+                <TextField
+                    fullWidth
+                    value={description}
+                    onChange={({target: {value}}) =>
+                        setDescription(value)}
+                />
+                <Button
+                    variant="contained"
+                    color="primary"
+                    type="submit"
+                    disabled={updateLoading}
+                    startIcon={updateLoading ? <CircularProgress style={{color: "#fff"}} size="1em"/> : <Save/>}
+                >Save</Button>
+                <Button
+                    variant="contained"
+                    color="secondary"
+                    disabled={removeLoading}
+                    startIcon={removeLoading ? <CircularProgress style={{color: "#fff"}} size="1em"/> : <Delete/>}
+                    onClick={() => remove(album)}
+                >Delete</Button>
+            </form>
+            <form onSubmit={(event => {
+                add({
+                    album: albumId,
+                    id: addImage,
+                    title: imageTitle,
+                    description: imageDescription
+                });
+                event.preventDefault()
+                event.stopPropagation()
+            })}>
+                {allImagesLoading && (
+                    <CircularProgress/>
+                )}
+                <select
+                    value={addImage}
+                    onChange={({target: {value}}) =>
+                        setAddImage(value)}
+                >
+                    <option value="">Select</option>
+                    {allImages?.map((image: Image) => (
+                        <option value={image.id}>{image.title}</option>
+                    ))}
+                </select>
+                <input
+                    type="text"
+                    value={imageTitle}
+                    onChange={({target: {value}}) =>
+                        setImageTitle(value)}
+                />
+                <input
+                    type="text"
+                    value={imageDescription}
+                    onChange={({target: {value}}) =>
+                        setImageDescription(value)}
+                />
+                <input type="submit"/>
+                {addImageLoading && (
+                    <CircularProgress/>
+                )}
+            </form>
+            <button onClick={() => {
+                const order = album?.images;
+                if (!order) {
+                    console.log("Error: no images");
+                }
+                reorder({
+                    ...album,
+                    images: [...order].reverse()
+                });
+            }}>Swap Order
+            </button>
+            {reorderLoading && (
+                <CircularProgress/>
+            )}
+            <ul>
+                {album?.images?.map(image => (
+                    <AlbumImageView key={image.id} image={image}/>
+                ))}
+            </ul>
+        </Fragment>
+    )
+}

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";
+import {ErrorPortal} from "../components/error/ErrorContext";
+import {ErrorAlert} from "../components/error/ErrorAlert";
+import {AlbumCreateForm} from "../components/AlbumCreateForm";
 
 export function AlbumListPage() {
     const {data: albums, error, isLoading} = useListAlbums();
@@ -15,6 +16,7 @@ export function AlbumListPage() {
             <ErrorPortal>
                 <ErrorAlert severity="error" error={error}/>
             </ErrorPortal>
+            <AlbumCreateForm />
             <ul>
                 {albums?.map(album => (
                     <li>

ui/src/pages/ImageDetailPage.tsx

@@ -18,8 +18,8 @@ import {File, Tag} from "mdi-material-ui";
 import {ImageMetadataView} from "../components/ImageMetadataView";
 import {useGetImage} from "../api/useGetImage";
 import {useParams} from "react-router";
-import {ErrorPortal} from "../components/ErrorContext";
-import {ErrorAlert} from "../components/ErrorAlert";
+import {ErrorPortal} from "../components/error/ErrorContext";
+import {ErrorAlert} from "../components/error/ErrorAlert";
 
 export interface ImageDetailPageParams {
     imageId: string
@@ -44,7 +44,11 @@ export function ImageDetailPage() {
     }
 
     return (
-        <div>
+        <form onSubmit={(event) => {
+            update({...image, title, description,})
+            event.preventDefault();
+            event.stopPropagation();
+        }}>
             {imageLoading && (
                 <LinearProgress/>
             )}
@@ -97,13 +101,9 @@ export function ImageDetailPage() {
                     <Button
                         variant="contained"
                         color="primary"
+                        type="submit"
                         disabled={updateLoading}
                         startIcon={updateLoading ? <CircularProgress style={{color: "#fff"}} size="1em"/> : <Save/>}
-                        onClick={() => update({
-                            ...image,
-                            title,
-                            description,
-                        })}
                     >Save</Button>
                     <Button
                         variant="contained"
@@ -133,6 +133,6 @@ export function ImageDetailPage() {
                     </List>
                 </Grid>
             </Grid>
-        </div>
+        </form>
     )
 }

ui/src/pages/ImageListPage.tsx

@@ -2,8 +2,8 @@ import {Fragment} from "react";
 import {useListImages} from "../api/useListImages";
 import {ImageList, ImageListItem, ImageListItemBar, LinearProgress} from "@material-ui/core";
 import {Link} from "react-router-dom";
-import {ErrorPortal} from "../components/ErrorContext";
-import {ErrorAlert} from "../components/ErrorAlert";
+import {ErrorPortal} from "../components/error/ErrorContext";
+import {ErrorAlert} from "../components/error/ErrorAlert";
 
 export function ImageListPage() {
     const {data: images, error, isLoading} = useListImages();
@@ -19,7 +19,7 @@ export function ImageListPage() {
             <ImageList cols={5}>
                 {images?.map(image => (
                     <ImageListItem component={Link} to={`/i/${image.id}`}>
-                        <img src={image.url} alt={image.title}/>
+                        <img src={image.url+"m"} alt={image.title}/>
                         <ImageListItemBar
                             title={image.title}
                             subtitle={image.original_name}