Further improve image APIs

api/album_get.go

@@ -19,6 +19,19 @@ func GetAlbum(env environment.FrontendEnvironment) http.Handler {
 			http.Error(writer, err.Error(), http.StatusInternalServerError)
 			return
 		}
+		album.Images, err = env.Repositories.AlbumImages.List(album.Id)
+		if err != nil {
+			http.Error(writer, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		for i, image := range album.Images {
+			err = image.LoadUrl(env.Storage, env.Configuration.Storage)
+			if err != nil {
+				http.Error(writer, err.Error(), http.StatusInternalServerError)
+				return
+			}
+			album.Images[i] = image
+		}
 
 		util.ReturnJson(writer, album)
 	})

api/album_list.go

@@ -22,6 +22,22 @@ func ListAlbums(env environment.FrontendEnvironment) http.Handler {
 			http.Error(writer, err.Error(), http.StatusInternalServerError)
 			return
 		}
+		for i, album := range albums {
+			album.Images, err = env.Repositories.AlbumImages.List(album.Id)
+			if err != nil {
+				http.Error(writer, err.Error(), http.StatusInternalServerError)
+				return
+			}
+			for j, image := range album.Images {
+				err = image.LoadUrl(env.Storage, env.Configuration.Storage)
+				if err != nil {
+					http.Error(writer, err.Error(), http.StatusInternalServerError)
+					return
+				}
+				album.Images[j] = image
+			}
+			albums[i] = album
+		}
 
 		util.ReturnJson(writer, albums)
 	})

api/albumimage_get.go

-package api
-
-import (
-	"database/sql"
-	"git.kuschku.de/justjanne/imghost-frontend/environment"
-	"git.kuschku.de/justjanne/imghost-frontend/util"
-	"github.com/gorilla/mux"
-	"net/http"
-)
-
-func GetAlbumImage(env environment.FrontendEnvironment) http.Handler {
-	return http.HandlerFunc(func(writer http.ResponseWriter, request *http.Request) {
-		vars := mux.Vars(request)
-		albumImage, err := env.Repositories.AlbumImages.Get(vars["albumId"], vars["imageId"])
-		if err == sql.ErrNoRows {
-			http.NotFound(writer, request)
-			return
-		} else if err != nil {
-			http.Error(writer, err.Error(), http.StatusInternalServerError)
-			return
-		}
-
-		util.ReturnJson(writer, albumImage)
-	})
-}

api/albumimage_list.go

-package api
-
-import (
-	"database/sql"
-	"git.kuschku.de/justjanne/imghost-frontend/environment"
-	"git.kuschku.de/justjanne/imghost-frontend/util"
-	"github.com/gorilla/mux"
-	"net/http"
-)
-
-func ListAlbumImages(env environment.FrontendEnvironment) http.Handler {
-	return http.HandlerFunc(func(writer http.ResponseWriter, request *http.Request) {
-		vars := mux.Vars(request)
-		albumImages, err := env.Repositories.AlbumImages.List(vars["albumId"])
-		if err == sql.ErrNoRows {
-			http.NotFound(writer, request)
-			return
-		} else if err != nil {
-			http.Error(writer, err.Error(), http.StatusInternalServerError)
-			return
-		}
-
-		util.ReturnJson(writer, albumImages)
-	})
-}

cmd/frontend/main.go

@@ -65,12 +65,6 @@ func main() {
 		api.DeleteAlbum(env)).Methods(http.MethodDelete, http.MethodOptions)
 
 	// Album Image API
-	router.Handle(
-		"/api/v1/albums/{albumId}/images",
-		api.ListAlbumImages(env)).Methods(http.MethodGet, http.MethodOptions)
-	router.Handle(
-		"/api/v1/albums/{albumId}/images/{imageId}",
-		api.GetAlbumImage(env)).Methods(http.MethodGet, http.MethodOptions)
 	router.Handle(
 		"/api/v1/albums/{albumId}/images/{imageId}",
 		api.UpdateAlbumImage(env)).Methods(http.MethodPost, http.MethodOptions)

model/album.go

@@ -12,6 +12,7 @@ type Album struct {
 	Description string       `json:"description" db:"description"`
 	CreatedAt   time.Time    `json:"created_at" db:"created_at"`
 	UpdatedAt   time.Time    `json:"updated_at" db:"updated_at"`
+	Images      []AlbumImage `json:"images"`
 }
 
 func (album Album) VerifyOwner(user User) error {

model/album_image.go

 package model
 
+import (
+	"git.kuschku.de/justjanne/imghost-frontend/configuration"
+	"git.kuschku.de/justjanne/imghost-frontend/storage"
+)
+
 type AlbumImage struct {
 	Album       string `json:"album" db:"album"`
 	Image       string `json:"image" db:"image"`
 	Title       string `json:"title" db:"title"`
 	Description string `json:"description" db:"description"`
+	Url         string `json:"url"`
+}
+
+func (image *AlbumImage) LoadUrl(storage storage.Storage, config configuration.StorageConfiguration) (err error) {
+	image.Url = storage.UrlFor(config.ImageBucket, image.Image).String()
+	return
 }

ui/src/App.tsx

 import React from 'react';
 import './App.css';
-import ImageList from "./ImageList";
+import ImageList from "./components/ImageList";
 import {BaseUrlProvider} from './api/baseUrlContext';
 import {QueryClient, QueryClientProvider} from "react-query";
 

ui/src/ImageList.tsx

-import React from 'react';
-import './App.css';
-import {useListImages} from "./api/useListImages";
-
-export default function ImageList() {
-    const {status, data, error} = useListImages();
-    return (
-        <div>
-            <p>{status}</p>
-            <p>{error as string}</p>
-            <ul>
-                {data?.map(info => (
-                    <li key={info.id}>
-                        <p>{info.id}</p>
-                        <p>{info.owner}</p>
-                        <p>{info.title}</p>
-                        <p>{info.description}</p>
-                        <p>{info.original_name}</p>
-                        <p>{info.mime_type}</p>
-                        <p>{info.created_at}</p>
-                        <p>{info.updated_at}</p>
-                        <p>{info.state}</p>
-                        <p>{info.url}</p>
-                        <img src={info.url+"t"} alt=""/>
-                    </li>
-                ))}
-            </ul>
-        </div>
-    );
-}

ui/src/api/model/Album.ts

+import {AlbumImage} from "./AlbumImage";
+
 export interface Album {
     id: string,
     owner: string,
@@ -5,4 +7,5 @@ export interface Album {
     description: string,
     created_at: string,
     updated_at: string,
+    images: AlbumImage[],
 }

ui/src/api/model/AlbumImage.ts

@@ -3,4 +3,5 @@ export interface AlbumImage {
     image: string,
     title: string,
     description: string,
+    url: string,
 }

ui/src/api/useGetAlbum.ts

+import {useQuery} from "react-query";
+import axios from "axios";
+import {useBaseUrl} from "./baseUrlContext";
+import {Album} from "./model/Album";
+
+export const useGetAlbum = (albumId: string) => {
+    const baseUrl = useBaseUrl();
+    return useQuery(
+        ["album", albumId],
+        () => axios.get<Album>(
+            `api/v1/albums/${albumId}`,
+            {
+                baseURL: baseUrl
+            }
+        ).then(it => it.data),
+        {
+            keepPreviousData: true
+        }
+    );
+}

ui/src/api/useGetImage.ts

+import {useQuery} from "react-query";
+import axios from "axios";
+import {useBaseUrl} from "./baseUrlContext";
+import {Image} from "./model/Image";
+
+export const useGetImage = (imageId: string) => {
+    const baseUrl = useBaseUrl();
+    return useQuery(
+        ["image", imageId],
+        () => axios.get<Image>(
+            `api/v1/images/${imageId}`,
+            {
+                baseURL: baseUrl
+            }
+        ).then(it => it.data),
+        {
+            keepPreviousData: true
+        }
+    );
+}

ui/src/api/useListAlbums.ts

+import {useQuery} from "react-query";
+import axios from "axios";
+import {useBaseUrl} from "./baseUrlContext";
+import {Album} from "./model/Album";
+
+export const useListAlbums = () => {
+    const baseUrl = useBaseUrl();
+    return useQuery(
+        "albums",
+        () => axios.get<Album[]>(
+            "api/v1/albums",
+            {
+                baseURL: baseUrl
+            }
+        ).then(it => it.data),
+        {
+            keepPreviousData: true
+        }
+    );
+}

ui/src/api/useListImages.ts

@@ -6,7 +6,7 @@ import {Image} from "./model/Image";
 export const useListImages = () => {
     const baseUrl = useBaseUrl();
     return useQuery(
-        "connector-deployments",
+        "images",
         () => axios.get<Image[]>(
             "api/v1/images",
             {

ui/src/components/AlbumImageView.tsx

+import React from "react";
+import {AlbumImage} from "../api/model/AlbumImage";
+
+export interface AlbumImageProps {
+    image: AlbumImage
+}
+
+export default function AlbumImageView({image}: AlbumImageProps) {
+    return (
+        <div>
+            <p>{image.image}</p>
+            <p>{image.title}</p>
+            <p>{image.description}</p>
+            <img src={image.url + "t"} alt=""/>
+        </div>
+    )
+}

ui/src/components/AlbumList.tsx

+import React from 'react';
+import '../App.css';
+import {useListAlbums} from "../api/useListAlbums";
+import AlbumView from "./AlbumView";
+
+export default function AlbumList() {
+    const {status, data, error} = useListAlbums();
+    return (
+        <div>
+            <p>{status}</p>
+            <p>{error as string}</p>
+            <ul>
+                {data?.map(album => (
+                    <AlbumView
+                        key={album.id}
+                        album={album}
+                    />
+                ))}
+            </ul>
+        </div>
+    );
+}

ui/src/components/AlbumView.tsx

+import AlbumImageView from "./AlbumImageView";
+import React from "react";
+import {Album} from "../api/model/Album";
+
+export interface AlbumProps {
+    album: Album
+}
+
+export default function AlbumView({album}: AlbumProps) {
+    return (
+        <div>
+            <p>{album.id}</p>
+            <p>{album.owner}</p>
+            <p>{album.title}</p>
+            <p>{album.description}</p>
+            <p>{album.created_at}</p>
+            <p>{album.updated_at}</p>
+            <ul>
+                {album.images.map(image => (
+                    <AlbumImageView
+                        key={image.image}
+                        image={image}
+                    />
+                ))}
+            </ul>
+        </div>
+    );
+}

ui/src/components/ImageList.tsx

+import React from 'react';
+import '../App.css';
+import {useListImages} from "../api/useListImages";
+import ImageView from "./ImageView";
+
+export default function ImageList() {
+    const {status, data, error} = useListImages();
+    return (
+        <div>
+            <p>{status}</p>
+            <p>{error as string}</p>
+            <ul>
+                {data?.map(image => (
+                    <ImageView
+                        key={image.id}
+                        image={image}
+                    />
+                ))}
+            </ul>
+        </div>
+    );
+}

ui/src/components/ImageView.tsx

+import {Image} from "../api/model/Image";
+import React from "react";
+
+export interface ImageProps {
+    image: Image
+}
+
+export default function ImageView({image}: ImageProps) {
+    return (
+        <div>
+            <p>{image.id}</p>
+            <p>{image.owner}</p>
+            <p>{image.title}</p>
+            <p>{image.description}</p>
+            <p>{image.original_name}</p>
+            <p>{image.mime_type}</p>
+            <p>{image.created_at}</p>
+            <p>{image.updated_at}</p>
+            <p>{image.state}</p>
+            <img src={image.url + "t"} alt=""/>
+        </div>
+    )
+}