Skip to content
Snippets Groups Projects
Verified Commit ef60ac52 authored by Janne Mareike Koschinski's avatar Janne Mareike Koschinski
Browse files

Minor cleanup

parent d6a8748a
No related branches found
No related tags found
No related merge requests found
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];
}
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];
}
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"
});
}
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}>
......
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>
);
}
......@@ -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>
......
......@@ -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>
......
......@@ -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);
......
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)
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment