70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import ProjectComponent from '../ProjectComponent';
|
|
|
|
type PhotoData = {
|
|
id: number,
|
|
name: string,
|
|
imageUrl: string,
|
|
dateTaken: Date
|
|
}
|
|
|
|
export default function RecentPhoto() {
|
|
const [ data, setData ] = useState<PhotoData | null>(null);
|
|
const [ loading, setLoading ] = useState<boolean>(true);
|
|
const [ errorState, setErrorState ] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetch("https://api.alexav.gg/v4/social/photos", {
|
|
method: 'get',
|
|
headers: {
|
|
'content-type': 'application/json'
|
|
}
|
|
})
|
|
.then(async (res) => {
|
|
if (res.ok) {
|
|
console.log("ok!")
|
|
const json = await res.json()
|
|
setData(json.data[0]);
|
|
setLoading(false)
|
|
} else {
|
|
console.log("not ok :(")
|
|
setErrorState("Failed to fetch data!");
|
|
setLoading(false);
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
setLoading(false);
|
|
setErrorState(e.message)
|
|
})
|
|
}, []);
|
|
useEffect(() => {
|
|
console.log(data)
|
|
}, [data])
|
|
|
|
const parseDate = (date: Date) => {
|
|
const jsDate = new Date(date);
|
|
return `${jsDate.getFullYear()}/${jsDate.getMonth() + 1}/${jsDate.getDate()}`;
|
|
}
|
|
|
|
if (data && !loading) {
|
|
return (
|
|
<ProjectComponent
|
|
url={"https://photos.alexav.gg?id=" + data.id}
|
|
header={"Photos I've captured"}
|
|
projectHeader={data.name}
|
|
projectSubheader={parseDate(data.dateTaken as Date)}
|
|
projectImage={data.imageUrl}
|
|
projectImageSize={"85"}
|
|
/>
|
|
)
|
|
} else {
|
|
return (
|
|
<>
|
|
<h1 className="font-bold text-2xl">No data :(</h1>
|
|
<p>Check out <a className="underline" href="https://photos.alexav.gg" target="_blank">photos.alexav.gg</a> if this isn't working.</p>
|
|
<p className="text-sm italic">{errorState}</p>
|
|
</>
|
|
)
|
|
}
|
|
|
|
} |