Minor cleanup

src/api/ApiHooks.ts

+import {Content} from "./models/Content";
+import {useQuery} from "react-query";
+import {fetchJson} from "../util/fetchJson";
+import {Instalment} from "./models/Instalment";
+import {useApiEndpoint} from "./ApiEndpointContext";
+import {ContentMeta} from "./models/dto/ContentMeta";
+import {Genre} from "./models/Genre";
+
+export function useShowEpisodes(
+    item: Content | undefined
+): [Instalment[], boolean, unknown] {
+    const apiEndpoint = useApiEndpoint();
+
+    const {data, isLoading, error} = useQuery(
+        ["episodes", item?.ids?.uuid],
+        () => item?.kind === "show"
+            ? fetchJson<Instalment[]>(
+                apiEndpoint,
+                `api/v1/content/${item.ids.uuid}/episodes`,
+                {
+                    method: "GET"
+                }
+            )
+            : []
+    )
+
+    return [data || [], isLoading, error];
+}
+
+export function useSingleContent(
+    id: string
+): [ContentMeta | null, boolean, unknown] {
+    const apiEndpoint = useApiEndpoint();
+
+    const {data, isLoading, error} = useQuery(
+        ["media", id],
+        () => fetchJson<ContentMeta>(
+            apiEndpoint,
+            `api/v1/content/${id}`,
+            {
+                method: "GET"
+            }
+        )
+    )
+
+    return [data || null, isLoading, error];
+}
+
+export function useAllContent(): [Content[], boolean, unknown] {
+    const apiEndpoint = useApiEndpoint();
+
+    const {data, isLoading, error} = useQuery(
+        "media",
+        () => fetchJson<Content[]>(
+            apiEndpoint,
+            `api/v1/content`,
+            {
+                method: "GET"
+            }
+        )
+    );
+
+    return [data || [], isLoading, error];
+}
+
+export function useGenres(): [Genre[], boolean, unknown] {
+    const apiEndpoint = useApiEndpoint();
+
+    const {data, isLoading, error} = useQuery(
+        "media",
+        () => fetchJson<Genre[]>(
+            apiEndpoint,
+            `api/v1/genres`,
+            {
+                method: "GET"
+            }
+        )
+    );
+
+    return [data || [], isLoading, error];
+}
+
+export function useGenreContent(genreId: string): [Content[], boolean, unknown] {
+    const apiEndpoint = useApiEndpoint();
+
+    const {data, isLoading, error} = useQuery(
+        "media",
+        () => fetchJson<Content[]>(
+            apiEndpoint,
+            `api/v1/genres/${genreId}`,
+            {
+                method: "GET"
+            }
+        )
+    );
+
+    return [data || [], isLoading, error];
+}

src/api/hooks.ts

-import {Content} from "./models/Content";
-import {useQuery} from "react-query";
-import {getContent, listEpisodes} from "./queries";
-import {Instalment} from "./models/Instalment";
-import {useApiEndpoint} from "./ApiEndpointContext";
-import {ContentMeta} from "./models/dto/ContentMeta";
-
-export function useEpisodes(item: Content | undefined): [Instalment[], boolean, unknown] {
-    const apiEndpoint = useApiEndpoint();
-
-    const {data, isLoading, error} = useQuery(
-        ["episodes", item?.ids?.uuid],
-        () => item?.kind === "show"
-            ? listEpisodes(apiEndpoint, item.ids.uuid)
-            : []
-    )
-
-    return [data || [], isLoading, error];
-}
-
-export function useContent(id: string): [ContentMeta | null, boolean, unknown] {
-    const apiEndpoint = useApiEndpoint();
-
-    const {data, isLoading, error} = useQuery(
-        ["media", id],
-        () => getContent(apiEndpoint, id)
-    )
-
-    return [data || null, isLoading, error];
-}

src/api/queries.ts

-import {Genre} from "./models/Genre";
-import {GenreWithContent} from "./models/dto/GenreWithContent";
-import {Content} from "./models/Content";
-import {ContentMeta} from "./models/dto/ContentMeta";
-import {Instalment} from "./models/Instalment";
-import {RequestErrorKind} from "../util/request/RequestErrorKind";
-import {RequestError} from "../util/request/RequestError";
-
-async function request<T>(
-    baseUrl: URL,
-    path: string,
-    headers?: RequestInit
-): Promise<T> {
-    const url = new URL(path, baseUrl).toString();
-    const response = await fetch(url, headers);
-    if (response.ok) {
-        return await response.json();
-    } else if (response.status in RequestErrorKind) {
-        throw new RequestError(response.statusText, response.status)
-    } else {
-        throw new RequestError(response.statusText, RequestErrorKind.UnknownError)
-    }
-}
-
-export async function listGenres(baseUrl: URL): Promise<Genre[]> {
-    return await request(baseUrl, `api/v1/genres`, {
-        method: "GET"
-    });
-}
-
-export async function getGenre(baseUrl: URL, genreId: string): Promise<GenreWithContent> {
-    return await request(baseUrl, `api/v1/genres/${genreId}`, {
-        method: "GET"
-    });
-}
-
-export async function listContent(baseUrl: URL): Promise<Content[]> {
-    return await request(baseUrl, `api/v1/content`, {
-        method: "GET"
-    });
-}
-
-export async function getContent(baseUrl: URL, contentId: string): Promise<ContentMeta> {
-    return await request(baseUrl, `api/v1/content/${contentId}`, {
-        method: "GET"
-    });
-}
-
-export async function listEpisodes(baseUrl: URL, contentId: string): Promise<Instalment[]> {
-    return await request(baseUrl, `api/v1/content/${contentId}/episodes`, {
-        method: "GET"
-    });
-}

src/routes/ContentRoute.tsx

 import {PropsWithChildren} from "react";
 import {useParams} from "react-router";
 import {CurrentContentProvider} from "../util/CurrentContentContext";
-import {useContent} from "../api/hooks";
+import {useSingleContent} from "../api/ApiHooks";
 
 export function ContentRoute(props: PropsWithChildren<{}>) {
     const {children} = props;
     const {contentId} = useParams<{ contentId: string }>();
-    const [meta/*, isLoading, error*/] = useContent(contentId);
+    const [meta/*, isLoading, error*/] = useSingleContent(contentId);
 
     return (
         <CurrentContentProvider value={meta}>

src/routes/main/MainPage.tsx

-import {useApiEndpoint} from "../../api/ApiEndpointContext";
 import {Content, getLocalizedName} from "../../api/models/Content";
 import {sortLexicallyAsc} from "../../util/sort/sortLexically";
-import {useQuery} from "react-query";
-import {listContent} from "../../api/queries";
 import {MediaEntry} from "./MediaEntry";
 import {useLocale} from "../../util/locale/LocalizedContext";
+import {useAllContent} from "../../api/ApiHooks";
 
 export function MainPage() {
-    const apiEndpoint = useApiEndpoint();
     const locale = useLocale();
-    const {data/*, isLoading, isError*/} = useQuery(
-        "media",
-        () => listContent(apiEndpoint)
-    );
-    const media = data || [];
+
+    const [media/*, isLoading, error*/] = useAllContent();
 
     return (
         <div>
             {media
                 .sort(sortLexicallyAsc(item => getLocalizedName(item, locale)?.name || ""))
-                .map((item: Content) => (<MediaEntry item={item}/>))}
+                .map((item: Content) => (
+                    <MediaEntry
+                        key={item.ids.uuid}
+                        item={item}/>
+                ))}
         </div>
     );
 }

src/routes/main/MediaEntry.tsx

@@ -3,7 +3,7 @@ import {Fragment} from "react";
 import {Link} from "react-router-dom";
 import {createUseStyles} from "react-jss";
 import {useLocale} from "../../util/locale/LocalizedContext";
-import {useEpisodes} from "../../api/hooks";
+import {useShowEpisodes} from "../../api/ApiHooks";
 import {MediaEpisode} from "./MediaEpisode";
 
 export interface Props {
@@ -16,7 +16,7 @@ export function MediaEntry(
     const locale = useLocale();
     const classes = useStyles();
 
-    const [episodes/*, episodesLoading*/, episodesError] = useEpisodes(item);
+    const [episodes/*, episodesLoading*/, episodesError] = useShowEpisodes(item);
 
     const title = getLocalizedName(item, locale);
     const description = getLocalizedDescription(item, locale);
@@ -25,7 +25,7 @@ export function MediaEntry(
     const backdrop = item.images.find(it => it.kind === "backdrop");
 
     return (
-        <div key={item.ids.uuid} className={classes.movie}>
+        <div className={classes.movie}>
             <h1>{title?.name}</h1>
             <p><strong>{rating?.certification}</strong></p>
             <p><strong>{description?.tagline}</strong></p>
@@ -42,7 +42,10 @@ export function MediaEntry(
                     ) : (
                         <ul>
                             {episodes.map(episode =>
-                                <MediaEpisode item={episode} />)}
+                                <MediaEpisode
+                                    key={episode.content.ids.uuid}
+                                    item={episode}
+                                />)}
                         </ul>
                     )}
                 </Fragment>

src/routes/main/MediaEpisode.tsx

@@ -14,7 +14,7 @@ export function MediaEpisode({item, disabled}: Props) {
     const episodeDescription = getLocalizedDescription(item.content, locale);
 
     return (
-        <li key={item.content.ids.uuid}>
+        <li>
             <p>
                 <strong>S{item.season}E{item.episode}</strong> – {item.airDate}
             </p>

src/routes/player/Player.tsx

@@ -17,7 +17,7 @@ import {Subtitle} from "../../api/models/Subtitle";
 import {MousePosition} from "../../util/mouse/MousePosition";
 import {VideoProvider} from "./video/VideoContext";
 import {SubtitleRenderer} from "./subtitles/SubtitleRenderer";
-import {useEpisodes} from "../../api/hooks";
+import {useShowEpisodes} from "../../api/ApiHooks";
 import {MediaEpisode} from "../main/MediaEpisode";
 import {usePaused} from "../../util/media/usePaused";
 
@@ -33,7 +33,7 @@ export function Player(
     const classes = useStyles();
     const locale = useLocale();
 
-    const [relatedEpisodes/*, relatedEpisodesLoading*/, relatedEpisodesError] = useEpisodes(instalment?.content);
+    const [relatedEpisodes/*, relatedEpisodesLoading*/, relatedEpisodesError] = useShowEpisodes(instalment?.content);
 
     const name = getLocalizedName(content, locale);
     const description = getLocalizedDescription(content, locale);

src/util/fetchJson.ts

+import {RequestErrorKind} from "./request/RequestErrorKind";
+import {RequestError} from "./request/RequestError";
+
+export async function fetchJson<T>(
+    baseUrl: URL,
+    path: string,
+    options?: RequestInit
+): Promise<T> {
+    const url = new URL(path, baseUrl).toString();
+    const response = await fetch(url, options);
+    if (response.ok) {
+        return await response.json();
+    } else if (response.status in RequestErrorKind) {
+        throw new RequestError(response.statusText, response.status)
+    } else {
+        throw new RequestError(response.statusText, RequestErrorKind.UnknownError)
+    }
+}