blob: 0ebc228451bce73b5f5e20a270af52f7d33845a2 (
plain) (
blame)
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
import { useSelector } from "react-redux";
import { RootState } from "../store";
import { useEffect, useState } from "react";
import { Template, getTemplates } from "../api/templates";
import { APIMissingTokenError } from "../api/client";
import StoreItem from "../components/StoreItem";
import styled from "styled-components";
import { Link } from "react-router-dom";
import LoadingBar from "../components/LoadingBar";
const StoreGrid = styled.div`
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 2rem;
margin-left: 1rem;
margin-right: 1rem;
width: 80%;
`;
const StorePage = () => {
const voucherToken = useSelector((state: RootState) => state.authorization.voucherToken);
const [storeItems, setStoreItems] = useState<Template[] | null>(null);
const [permissionDenied, setPermissionDenied] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(true);
useEffect(() => {
getTemplates(true).then((items) => {
setStoreItems(items);
setLoading(false);
}).catch((err: unknown) => {
setStoreItems([]);
setLoading(false);
if (err instanceof APIMissingTokenError) {
setPermissionDenied(true);
}
});
}, [voucherToken]);
return (
<>
<h1>Giveaway Store</h1>
{loading && <LoadingBar />}
<StoreGrid>
{storeItems?.map((item) => (
<StoreItem key={item.template_id} template={item} />
))}
</StoreGrid>
{permissionDenied && (
<>
<p>You need to have a valid voucher code to access the store.</p>
<Link to="/">Redeem a voucher</Link>
</>
)}
</>
);
};
export default StorePage;
|
