48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { h } from 'preact';
|
|
import { route } from 'preact-router';
|
|
import { useSelector } from 'react-redux'
|
|
|
|
import { State } from './../store';
|
|
import * as toast from './../toast';
|
|
|
|
import OfferGroup from './../components/offer.group';
|
|
|
|
const GroupNav = (want) => {
|
|
const href = want._count.offers ? `#${want.release}` : null;
|
|
return (
|
|
<div class=''>
|
|
<a href={href}>{want.data.artists_sort} - {want.data.title}</a>
|
|
<span>{want._count.offers}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function Home() {
|
|
const offers = useSelector((state: State) => state.offers);
|
|
const wants = useSelector((state: State) => state.wants);
|
|
|
|
if (offers && offers.length === 0) {
|
|
toast.info('no offers', 'You have no offers yet, search for some more items.');
|
|
route('/search');
|
|
}
|
|
|
|
if (!offers || !wants) return <div>loading...</div>;
|
|
|
|
return (
|
|
<main >
|
|
<nav>
|
|
<div class='header'>
|
|
<span>record</span>
|
|
<span>offers</span>
|
|
</div>
|
|
{wants.map(GroupNav)}
|
|
</nav>
|
|
<div class={'offers'}>
|
|
{offers.map(OfferGroup)}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default Home;
|