44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import { useLoaderData } from "@remix-run/react";
|
|
import type { ErrorBoundaryComponent, LoaderFunction } from "@remix-run/server-runtime";
|
|
|
|
import VideoList from "~/components/VideoList/VideoList";
|
|
import { API_KEY } from "~/lib/constants.server";
|
|
import { getVideos } from "~/lib/getVideos";
|
|
import type { Datum } from "~/types/Videos";
|
|
|
|
export const loader: LoaderFunction = async ({ context, request }) => {
|
|
const { data } = await getVideos(API_KEY);
|
|
const withVideoThumbs = data.map((d) => ({
|
|
...d,
|
|
resolved_thumb_url: `${process.env.PUBLIC_API_URL}${d.vid_thumb_url}`,
|
|
}));
|
|
|
|
return withVideoThumbs;
|
|
};
|
|
|
|
export type Videos = Datum[] & {
|
|
resolved_thumb_url: string;
|
|
};
|
|
|
|
export default function Index() {
|
|
const videos = useLoaderData<Videos>();
|
|
|
|
return (
|
|
<main>
|
|
<VideoList videos={videos} />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export const ErrorBoundary: ErrorBoundaryComponent = ({ error }: { error: Error }) => {
|
|
console.warn(error);
|
|
return (
|
|
<div className="boxed-content">
|
|
<div className="title-bar">
|
|
<h1>Error: </h1>
|
|
<p>{error.message}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|