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: `http://localhost:8000${d.vid_thumb_url}`, })); return withVideoThumbs; }; export type Videos = Datum[] & { resolved_thumb_url: string; }; export default function Index() { const videos = useLoaderData(); return (
); } export const ErrorBoundary: ErrorBoundaryComponent = ({ error }: { error: Error }) => { console.warn(error); return (

Error:

{error.message}

); };