91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
type WatchDataResponse = {
|
|
result: {
|
|
data: {
|
|
json: WatchData
|
|
}
|
|
}
|
|
};
|
|
type WatchData = {
|
|
id: number,
|
|
title: string,
|
|
description: string,
|
|
imageKey: string,
|
|
currentEpisode: string,
|
|
tmdbID: string,
|
|
finished: boolean,
|
|
startedOn: Date,
|
|
createdAt: Date,
|
|
updatedAt: Date,
|
|
createdById: string
|
|
}
|
|
|
|
export default function RecentWatch() {
|
|
const [ data, setData ] = useState<WatchData | null>(null);
|
|
const [ loading, setLoading ] = useState<boolean>(true);
|
|
const [ errorState, setErrorState ] = useState<string>("");
|
|
|
|
useEffect(() => {
|
|
fetch("https://watch.alexav.gg/api/trpc/watchItem.getLatest", {
|
|
method: 'get'
|
|
})
|
|
.then(async (res) => {
|
|
if (res.ok) {
|
|
const json = await res.json() as WatchDataResponse;
|
|
setData(json.result.data.json);
|
|
setLoading(false)
|
|
} else {
|
|
setErrorState("Failed to fetch data!");
|
|
setLoading(false);
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
setLoading(false);
|
|
setErrorState(e.message)
|
|
})
|
|
}, []);
|
|
|
|
const parseDate = (date: Date) => {
|
|
const jsDate = new Date(date);
|
|
return `${jsDate.getFullYear()}/${jsDate.getMonth() + 1}/${jsDate.getDate()}`;
|
|
}
|
|
|
|
return (
|
|
<a href={data?.id ? "https://watch.alexav.gg/?id=" + data?.id : "#"} target="_blank">
|
|
<div className="bg-white text-black p-4">
|
|
{
|
|
loading ? (
|
|
<h1>Loading..</h1>
|
|
) : !errorState ? (
|
|
<div className="flex items-center">
|
|
<img
|
|
src={data?.imageKey}
|
|
width="50"
|
|
/>
|
|
<div className="flex flex-wrap mx-2">
|
|
<h1 className="w-full font-bold">{data?.title}</h1>
|
|
|
|
{
|
|
data?.finished ? (
|
|
<h1 className="w-full font-bold">Finished!</h1>
|
|
) : (
|
|
<h1 className="w-full">Started on {parseDate(new Date(data?.startedOn as Date))}</h1>
|
|
)
|
|
}
|
|
|
|
<h1>{data?.currentEpisode}</h1>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<h1 className="font-bold text-2xl">Failed to fetch :(</h1>
|
|
<p>Check out <a className="underline" href="https://watch.alexav.gg" target="_blank">watch.alexav.gg</a> if this isn't working.</p>
|
|
</>
|
|
)
|
|
}
|
|
</div>
|
|
</a>
|
|
)
|
|
|
|
} |