-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
40 lines (37 loc) · 1.62 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import {FC, useEffect, useState} from 'react';
import {data} from '../../../data';
import {useQuery} from '../../hooks';
import {Loading} from '../../Loading';
import {Image} from '../Image';
import {useGallery} from '../Context';
import {empty} from '@ryandur/sand';
import {Source} from '../../../data/artGallery/types/resource';
import './Gallery.scss';
import './Gallery.layout.scss';
export const ArtGallery: FC = () => {
const {art, updateArt, reset} = useGallery();
const [loading, isLoading] = useState(false);
const [errored, hasErrored] = useState(false);
const {queryObj: {page, size, search, tab}} =
useQuery<{ page: number, size: number, tab: Source, search?: string }>();
useEffect(() => {
data.artGallery.getAllArt({page, size, search, source: tab})
.onPending(isLoading)
.onSuccess(updateArt)
.onSuccess(data => hasErrored(empty(data.pieces)))
.onFailure(() => hasErrored(true));
return reset;
}, [page, search, tab, size]);
return <section id="art-gallery">
{art?.pieces.map(piece => <figure
className="frame" key={piece.id}>
<Image className="piece" piece={piece}/>
<figcaption className="title">{piece.title}</figcaption>
</figure>)}
{loading && <Loading className="loader" testId="gallery-loading"/>}
{!loading && errored && <img src="https://img.icons8.com/ios/100/000000/no-image-gallery.png"
id="empty-gallery"
alt="empty gallery"
data-testid="empty-gallery"/>}
</section>;
};