-
Notifications
You must be signed in to change notification settings - Fork 2
/
Offers.tsx
100 lines (92 loc) · 2.38 KB
/
Offers.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import {
Button,
Card,
CardBody,
CardFooter,
Heading,
Stack,
Image,
Text,
Box,
} from '@chakra-ui/react';
import { useEffect, useState } from 'react';
import GenericService from '../service/GenericService';
import Job from '../dto/Job';
import GenericResponse from '../dto/GenericResponse';
import Pagination from './Pagination';
import PaginationUtil from '../util/PaginationUtil';
export default function Offers() {
const [offers, setOffers] = useState<Array<Job>>(new Array<Job>());
const [itemsCount, setItemsCount] = useState(0);
const [loaded, setLoaded] = useState(false);
useEffect(() => {
if (!loaded) {
GenericService.getAll<Array<Job>>('api/v1/job/offers/0').then((data) => {
GenericService.get<GenericResponse<number>>(
'api/v1/job/count/offers'
).then((genericResponse) => {
setOffers(data);
setItemsCount(genericResponse.value);
});
});
setLoaded(true);
}
}, []);
const goToPage = (page: number) => {
GenericService.getAll<Array<Job>>('api/v1/job/offers/' + page).then(
(data) => {
setOffers(data);
window.scrollTo(0, 0);
}
);
};
return (
<>
<Box>
{offers &&
offers.map((item, idx) => (
<Offer
key={idx}
title={item.title}
description={item.description}
/>
))}
</Box>
<Pagination
callback={goToPage}
numberOfPages={PaginationUtil.calculatePageNumber(itemsCount)}
/>
</>
);
}
interface Offer {
title: string;
description: string;
}
function Offer({ title, description }: Offer) {
return (
<Card
direction={{ base: 'column', sm: 'row' }}
overflow="hidden"
variant="outline"
>
<Image
objectFit="cover"
maxW={{ base: '100%', sm: '200px' }}
src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
alt="Caffe Latte"
/>
<Stack>
<CardBody>
<Heading size="md">{title}</Heading>
<Text py="2">{description}</Text>
</CardBody>
<CardFooter>
<Button variant="solid" colorScheme="blue">
{title}
</Button>
</CardFooter>
</Stack>
</Card>
);
}