alex 3
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import RootLayout from "@/components/RootLayout"
|
|
import ReviewCard from "@/components/ReviewCard"
|
|
import React, {useState, useEffect} from 'react';
|
|
import { api } from "@/utils/api";
|
|
|
|
type GenericItemType = {
|
|
name: string,
|
|
image: string
|
|
}
|
|
|
|
export default function Reviews() {
|
|
const {data: itemData} = api.post.getAll.useQuery()
|
|
const [list, setList] = useState<null | JSX.Element[]>(null)
|
|
const [type, setType] = useState("Book")
|
|
|
|
function onCatClick() {
|
|
// probably gonna rework this eventually if needed
|
|
switch(type) {
|
|
case 'Book':
|
|
setType("Movie")
|
|
break;
|
|
case 'Movie':
|
|
setType("TV")
|
|
break;
|
|
case 'TV':
|
|
setType("Game")
|
|
break;
|
|
case 'Game':
|
|
setType("Book")
|
|
break;
|
|
}
|
|
}
|
|
|
|
function sanitizeTitleForLink(title: string) {
|
|
return title.replaceAll(" ", "-").toLowerCase()
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (itemData) {
|
|
const filteredArray = itemData.filter(v => v.type == type.toLowerCase())
|
|
|
|
if (filteredArray.length <= 0) {
|
|
setList(null)
|
|
} else {
|
|
setList(
|
|
filteredArray.map((v: GenericItemType, k) => {
|
|
return <ReviewCard
|
|
key={k}
|
|
title={v.name}
|
|
url={`/reviews/${sanitizeTitleForLink(v.name)}`}
|
|
image={v.image}
|
|
showText={false}
|
|
/>
|
|
})
|
|
)
|
|
}
|
|
}
|
|
}, [itemData, type])
|
|
|
|
return (
|
|
<RootLayout>
|
|
<div className="w-1/2 mx-auto text-white">
|
|
<p className="text-center font-bold text-2xl hover:cursor-pointer hover:underline pb-2" onClick={onCatClick}>
|
|
{type}
|
|
</p>
|
|
|
|
<div className="flex flex-wrap justify-center">
|
|
{
|
|
list ? list
|
|
: <div className="text-center">
|
|
<h1>Nothing here!</h1>
|
|
<p>Try again later :(</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</RootLayout>
|
|
)
|
|
} |