add listen stuff, fix header responsiveness
This commit is contained in:
@@ -0,0 +1,90 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
type MusicAPIResponse = {
|
||||
data: {
|
||||
tracks: MusicData[]
|
||||
}
|
||||
}
|
||||
|
||||
type MusicData = {
|
||||
artist: {
|
||||
mbid: string,
|
||||
"#text": string
|
||||
},
|
||||
mbid: string,
|
||||
album: {
|
||||
mbid: string,
|
||||
"#text": string,
|
||||
},
|
||||
name: string,
|
||||
url: string,
|
||||
image: MusicImage[]
|
||||
}
|
||||
|
||||
type MusicImage = {
|
||||
size: string,
|
||||
"#text": string
|
||||
}
|
||||
|
||||
export default function RecentListens() {
|
||||
const [ data, setData ] = useState<MusicData[]>();
|
||||
const [ errorState, setErrorState ] = useState<string>("");
|
||||
const [ loading, setLoading ] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("https://api.alexav.gg/v4/social/music", {
|
||||
method: "get"
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (res.ok) {
|
||||
const data = await res.json() as MusicAPIResponse
|
||||
setData(data.data.tracks);
|
||||
} else {
|
||||
setErrorState("Failed to load! :(")
|
||||
}
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
setErrorState(e.message)
|
||||
})
|
||||
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
if (data) {
|
||||
return (
|
||||
<a href={data[0].url} target="_blank">
|
||||
<div className="bg-white text-black p-4">
|
||||
{
|
||||
(loading) ? (
|
||||
<h1>Loading..</h1>
|
||||
) : (!errorState && data) ? (
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={data[0].image.filter((v) => v.size === "large")[0]['#text']}
|
||||
width="100"
|
||||
/>
|
||||
<div className="flex flex-wrap mx-2">
|
||||
<h1 className="w-full font-bold">{data[0].name}</h1>
|
||||
|
||||
<h1>{data[0].artist['#text']}</h1>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h1 className="font-bold text-2xl">Failed to fetch :(</h1>
|
||||
<p>Check out <a className="underline" href="https://last.fm/user/lulawex" target="_blank">last.fm/lulawex</a> if this isn't working.</p>
|
||||
<p className="text-sm italic">{errorState}</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
} else {
|
||||
<>
|
||||
<h1 className="font-bold text-2xl">No data :(</h1>
|
||||
<p>Check out <a className="underline" href="https://last.fm/user/lulawex" target="_blank">last.fm/lulawex</a> if this isn't working.</p>
|
||||
<p className="text-sm italic">{errorState}</p>
|
||||
</>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
type PhotoDataResponse = {
|
||||
result: {
|
||||
data: {
|
||||
json: PhotoData[]
|
||||
}
|
||||
}
|
||||
};
|
||||
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://photos-cors.alexav.gg", {
|
||||
method: 'get',
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (res.ok) {
|
||||
console.log("ok!")
|
||||
const json = await res.json() as PhotoDataResponse[];
|
||||
setData(json[0].result.data.json);
|
||||
setLoading(false)
|
||||
} else {
|
||||
console.log("not ok :(")
|
||||
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={"https://photos.alexav.gg/"} target="_blank">
|
||||
<div className="bg-white text-black p-4">
|
||||
{
|
||||
(loading) ? (
|
||||
<h1>Loading..</h1>
|
||||
) : (!errorState && data) ? (
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={data[0].imageUrl}
|
||||
width="200"
|
||||
/>
|
||||
<div className="flex flex-wrap mx-2">
|
||||
<h1 className="w-full font-bold">{data[0].name}</h1>
|
||||
|
||||
<h1>{parseDate(data[0].dateTaken as Date)}</h1>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h1 className="font-bold text-2xl">Failed to fetch :(</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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
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-cors.alexav.gg", {
|
||||
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>
|
||||
<p className="text-sm italic">{errorState}</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user