-
Notifications
You must be signed in to change notification settings - Fork 0
/
TasksList.tsx
101 lines (91 loc) · 2.54 KB
/
TasksList.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
101
import { Theme } from '@material-ui/core';
import Box from '@material-ui/core/Box';
import List from '@material-ui/core/List';
import Paper from '@material-ui/core/Paper';
import { makeStyles } from '@material-ui/core/styles';
import Pagination from '@material-ui/lab/Pagination';
import debug from 'debug';
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import React, { useState } from 'react';
import { When } from 'react-if';
import { tasksPerPage } from '../../../contants';
import { Task } from '../../../entities/Task';
import { useTypedSelector } from '../../../store/index';
import { tasksSelector } from '../../../store/selectors';
import { TasksListItem } from '../TasksListItem';
const log = debug('TasksList');
interface TasksListProps {
tasks: Task[];
loading: boolean;
canDelete?: boolean;
deleteTask?: (id: string) => void;
}
export function TasksList({
loading,
tasks = [],
canDelete,
deleteTask,
}: TasksListProps) {
const classes = useStyles();
const [page, setPage] = useState(1);
const sliceTasksTo = tasksPerPage * page;
const sliceTasksFrom = tasksPerPage * (page - 1);
const numberOfPAges =
Number((tasks.length / tasksPerPage).toFixed()) + 1;
log('tasks: %O', tasks);
log('page: ', page);
log('numberOfPAges: ', numberOfPAges);
if (loading || isEmpty(tasks) || get(tasks, 'empty')) {
return null;
}
return (
<Paper className={classes.paper}>
<List className={classes.list}>
{tasks.slice(sliceTasksFrom, sliceTasksTo).map((task) => {
return (
<TasksListItem
key={task.id}
task={task}
canDelete={canDelete}
deleteTask={deleteTask}
/>
);
})}
</List>
<When condition={tasks.length > tasksPerPage}>
<Box display="flex" justifyContent="center">
<Pagination
count={numberOfPAges}
onChange={(e, pageNumber) => setPage(pageNumber)}
/>
</Box>
</When>
</Paper>
);
}
function useStyles() {
return makeStyles((theme: Theme) => {
return {
list: {
width: '100%',
},
paper: {
width: '10000px',
maxWidth: '100%',
margin: '0 auto',
padding: theme.spacing(1),
},
};
})();
}
// TODO add props types
export default function TasksListContainer(props: any) {
const tasks = useTypedSelector(tasksSelector);
const mergeProps = {
...props,
loading: tasks === undefined,
tasks,
};
return <TasksList {...mergeProps} />;
}