/
Timelines.js
64 lines (59 loc) · 2.13 KB
/
Timelines.js
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
/* eslint-disable prettier/prettier */
import React, { useEffect, useState } from 'react'
import { get } from '../../utilities/util'
import {
CRow,
CSpinner,
CPagination,
CPaginationItem,
} from '@coreui/react'
import TimelineCard from 'src/components/TimelineCard'
const Timelines = () => {
const [page, setPage] = useState(1)
const [count, setCount] = useState(2)
const apiURL = "timelines/timelines/?page=" + page.toString();
const [timelines, setTimelines] = useState(null);
useEffect(() => {
get(apiURL).then(res => {
console.log(res);
setTimelines(res.results);
setCount(Math.floor(res.count / 12) + 1);
})
}, [apiURL]);
var pages = []
for (var i = 1; i <= count; i++) {
pages.push(i);
}
return (<>
{timelines != null ? timelines.length? (<><CRow>
{timelines && timelines.map((time, index) => (
<TimelineCard key={time.id} time={time} />
))}
</CRow>
<CPagination aria-label="Page navigation example" style={{ marginTop: '20px' }}>
<div >
{page <= 1 ? (<CPaginationItem aria-label="Previous" disabled>
<span aria-hidden="true" >«</span>
</CPaginationItem>) : (<CPaginationItem aria-label="Previous" onClick={() => setPage(page - 1)}>
<span aria-hidden="true">«</span>
</CPaginationItem>)}
</div>
{pages && pages.map((i, index) => (
<div key={i} >
{i == page ? (<CPaginationItem style={{ backgroundColor: "#005b54", color: "white" }}>{i}</CPaginationItem>) : (<CPaginationItem onClick={() => setPage(i)}>{i}</CPaginationItem>)}
</div>
))}
<div >
{
page >= count ? (<CPaginationItem aria-label="Next" disabled>
<span aria-hidden="true">»</span>
</CPaginationItem>) : (<CPaginationItem aria-label="Next" onClick={() => setPage(page + 1)}>
<span aria-hidden="true">»</span>
</CPaginationItem>)
}
</div>
</CPagination>
</>): <span>Create your first timeline</span> : <CSpinner className="spinner" />}
</>);
}
export default Timelines;