"use client";
import { Component } from "@/typings/component";
import { useClient } from "@/hooks/useClient";
import { useQuery } from "@tanstack/react-query";
import { Button } from "@nextui-org/button";
import { Spacer } from "@nextui-org/spacer";
import { VideoCard } from "./VideoCard";
import { LoadingPage } from "@/components/LoadingPage";
import { useSearchParams } from "next/navigation";
import { useMemo } from "react";
import getRegionCodes from "@/utils/getRegionCodes";
import { RegionSwitcher } from "./RegionSwitcher";
import { defaultRegion } from "@/constants";
export const Trending: Component = ({}) => {
const client = useClient();
const searchParams = useSearchParams();
const validRegions = useMemo(() => getRegionCodes(), []);
const specifiedRegion =
searchParams.get("region")?.toUpperCase() ?? defaultRegion;
const [region, regionError] = useMemo(() => {
const foundRegion = validRegions.find(
(validRegion) => validRegion.code === specifiedRegion
);
if (foundRegion === undefined)
return [null, new Error(`Region \`${specifiedRegion}\` is invalid`)];
return [foundRegion, null];
}, [specifiedRegion, validRegions]);
const {
isLoading,
error: fetchError,
refetch,
data
} = useQuery({
queryKey: ["trending", region],
queryFn: () => {
if (region === null) return;
return client.getTrending(region.code);
},
enabled: regionError === null
});
const noDataError = useMemo(() => {
if (data && data.length === 0)
return new Error(
`Could not find any trending video's in region \`${region?.name}\``
);
return null;
}, [data]);
const error: Error | null = regionError ?? fetchError ?? noDataError ?? null;
return (
<>
{isLoading && !data &&