Skip to content

Commit 8e1d04f

Browse files
zhorakhzhorakh
committed
administration folder structure
1 parent 4bcf92c commit 8e1d04f

File tree

5 files changed

+191
-174
lines changed

5 files changed

+191
-174
lines changed

‎src/Administration/Administration.js‎

Lines changed: 6 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -1,181 +1,13 @@
1-
import React, { useEffect, useState } from 'react'
1+
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import api from '../_api'
4-
import Table from '@material-ui/core/Table'
5-
import TableBody from '@material-ui/core/TableBody'
6-
import TableCell from '@material-ui/core/TableCell'
7-
import TableContainer from '@material-ui/core/TableContainer'
8-
import TableHead from '@material-ui/core/TableHead'
9-
import TableRow from '@material-ui/core/TableRow'
10-
import Paper from '@material-ui/core/Paper'
11-
import Avatar from '@material-ui/core/Avatar'
12-
import { makeStyles, useTheme } from '@material-ui/core/styles'
13-
import TableFooter from '@material-ui/core/TableFooter'
14-
import TablePagination from '@material-ui/core/TablePagination'
15-
import IconButton from '@material-ui/core/IconButton'
16-
import FirstPageIcon from '@material-ui/icons/FirstPage'
17-
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'
18-
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'
19-
import LastPageIcon from '@material-ui/icons/LastPage'
20-
import EditIcon from '@material-ui/icons/Edit'
21-
import DeleteIcon from '@material-ui/icons/Delete'
22-
23-
const useStyles1 = makeStyles(theme => ({
24-
root: {
25-
flexShrink: 0,
26-
marginLeft: theme.spacing(2.5),
27-
},
28-
}))
29-
30-
function TablePaginationActions(props) {
31-
const classes = useStyles1()
32-
const theme = useTheme()
33-
const { count, page, rowsPerPage, onChangePage } = props
34-
35-
const handleFirstPageButtonClick = event => {
36-
onChangePage(event, 0)
37-
}
38-
39-
const handleBackButtonClick = event => {
40-
onChangePage(event, page - 1)
41-
}
42-
43-
const handleNextButtonClick = event => {
44-
onChangePage(event, page + 1)
45-
}
46-
47-
const handleLastPageButtonClick = event => {
48-
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
49-
}
50-
51-
return (
52-
<div className={classes.root}>
53-
<IconButton
54-
onClick={handleFirstPageButtonClick}
55-
disabled={page === 0}
56-
aria-label="first page"
57-
>
58-
{theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
59-
</IconButton>
60-
<IconButton
61-
onClick={handleBackButtonClick}
62-
disabled={page === 0}
63-
aria-label="previous page"
64-
>
65-
{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
66-
</IconButton>
67-
<IconButton
68-
onClick={handleNextButtonClick}
69-
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
70-
aria-label="next page"
71-
>
72-
{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
73-
</IconButton>
74-
<IconButton
75-
onClick={handleLastPageButtonClick}
76-
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
77-
aria-label="last page"
78-
>
79-
{theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
80-
</IconButton>
81-
</div>
82-
)
83-
}
84-
85-
TablePaginationActions.propTypes = {
86-
count: PropTypes.number.isRequired,
87-
onChangePage: PropTypes.func.isRequired,
88-
page: PropTypes.number.isRequired,
89-
rowsPerPage: PropTypes.number.isRequired,
90-
}
91-
92-
const useStyles2 = makeStyles({
93-
table: {
94-
minWidth: 500,
95-
},
96-
})
3+
import { Route } from 'react-router-dom'
4+
import UsersList from './Users/UsersList'
975

986
const Administration = ({ match }) => {
99-
const [usersData, setUsersData] = useState({ users: [], count: 0 })
100-
useEffect(() => {
101-
api.users.getList().then(res => setUsersData(res))
102-
}, [])
103-
const classes = useStyles2()
104-
const [page, setPage] = React.useState(0)
105-
const [rowsPerPage, setRowsPerPage] = React.useState(10)
106-
107-
const emptyRows =
108-
rowsPerPage - Math.min(rowsPerPage, usersData.users.length - page * rowsPerPage)
109-
110-
const handleChangePage = (event, newPage) => {
111-
setPage(newPage)
112-
}
113-
114-
const handleChangeRowsPerPage = event => {
115-
setRowsPerPage(parseInt(event.target.value, 10))
116-
setPage(0)
117-
}
118-
1197
return (
120-
<TableContainer component={Paper}>
121-
<Table className={classes.table} aria-label="custom pagination table">
122-
<TableHead>
123-
<TableRow>
124-
<TableCell>Avatar</TableCell>
125-
<TableCell>First Name</TableCell>
126-
<TableCell>Last Name</TableCell>
127-
<TableCell>Username</TableCell>
128-
<TableCell>Email</TableCell>
129-
<TableCell>Actions</TableCell>
130-
</TableRow>
131-
</TableHead>
132-
<TableBody>
133-
{(rowsPerPage > 0
134-
? usersData.users.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
135-
: usersData.users
136-
).map(row => (
137-
<TableRow key={row.id}>
138-
<TableCell>
139-
<Avatar alt={row.firstName} src={row.avatarUrl} />
140-
</TableCell>
141-
<TableCell component="th" scope="row">
142-
{row.firstName}
143-
</TableCell>
144-
<TableCell>{row.lastName}</TableCell>
145-
<TableCell>{row.username}</TableCell>
146-
<TableCell>{row.email}</TableCell>
147-
<TableCell>
148-
<EditIcon />
149-
<DeleteIcon />
150-
</TableCell>
151-
</TableRow>
152-
))}
153-
{emptyRows > 0 && (
154-
<TableRow style={{ height: 53 * emptyRows }}>
155-
<TableCell colSpan={6} />
156-
</TableRow>
157-
)}
158-
</TableBody>
159-
<TableFooter>
160-
<TableRow>
161-
<TablePagination
162-
rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
163-
colSpan={12}
164-
count={usersData.users.length}
165-
rowsPerPage={rowsPerPage}
166-
page={page}
167-
SelectProps={{
168-
inputProps: { 'aria-label': 'rows per page' },
169-
native: true,
170-
}}
171-
onChangePage={handleChangePage}
172-
onChangeRowsPerPage={handleChangeRowsPerPage}
173-
ActionsComponent={TablePaginationActions}
174-
/>
175-
</TableRow>
176-
</TableFooter>
177-
</Table>
178-
</TableContainer>
8+
<>
9+
<Route path={`${match.path}/users`} component={UsersList} />
10+
</>
17911
)
18012
}
18113

‎src/Administration/Users/UsersEditor/UsersEditor.js‎

Whitespace-only changes.

‎src/Administration/Users/UsersEditor/index.js‎

Whitespace-only changes.

‎src/Administration/Users/UsersList/UsersList.js‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import React, { useEffect, useState } from 'react'
2+
import PropTypes from 'prop-types'
3+
import api from '../../../_api'
4+
import Table from '@material-ui/core/Table'
5+
import TableBody from '@material-ui/core/TableBody'
6+
import TableCell from '@material-ui/core/TableCell'
7+
import TableContainer from '@material-ui/core/TableContainer'
8+
import TableHead from '@material-ui/core/TableHead'
9+
import TableRow from '@material-ui/core/TableRow'
10+
import Paper from '@material-ui/core/Paper'
11+
import Avatar from '@material-ui/core/Avatar'
12+
import { makeStyles, useTheme } from '@material-ui/core/styles'
13+
import TableFooter from '@material-ui/core/TableFooter'
14+
import TablePagination from '@material-ui/core/TablePagination'
15+
import IconButton from '@material-ui/core/IconButton'
16+
import FirstPageIcon from '@material-ui/icons/FirstPage'
17+
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'
18+
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'
19+
import LastPageIcon from '@material-ui/icons/LastPage'
20+
import EditIcon from '@material-ui/icons/Edit'
21+
import DeleteIcon from '@material-ui/icons/Delete'
22+
23+
const useStyles1 = makeStyles(theme => ({
24+
root: {
25+
flexShrink: 0,
26+
marginLeft: theme.spacing(2.5),
27+
},
28+
}))
29+
30+
function TablePaginationActions(props) {
31+
const classes = useStyles1()
32+
const theme = useTheme()
33+
const { count, page, rowsPerPage, onChangePage } = props
34+
35+
const handleFirstPageButtonClick = event => {
36+
onChangePage(event, 0)
37+
}
38+
39+
const handleBackButtonClick = event => {
40+
onChangePage(event, page - 1)
41+
}
42+
43+
const handleNextButtonClick = event => {
44+
onChangePage(event, page + 1)
45+
}
46+
47+
const handleLastPageButtonClick = event => {
48+
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
49+
}
50+
51+
return (
52+
<div className={classes.root}>
53+
<IconButton
54+
onClick={handleFirstPageButtonClick}
55+
disabled={page === 0}
56+
aria-label="first page"
57+
>
58+
{theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
59+
</IconButton>
60+
<IconButton
61+
onClick={handleBackButtonClick}
62+
disabled={page === 0}
63+
aria-label="previous page"
64+
>
65+
{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
66+
</IconButton>
67+
<IconButton
68+
onClick={handleNextButtonClick}
69+
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
70+
aria-label="next page"
71+
>
72+
{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
73+
</IconButton>
74+
<IconButton
75+
onClick={handleLastPageButtonClick}
76+
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
77+
aria-label="last page"
78+
>
79+
{theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
80+
</IconButton>
81+
</div>
82+
)
83+
}
84+
85+
TablePaginationActions.propTypes = {
86+
count: PropTypes.number.isRequired,
87+
onChangePage: PropTypes.func.isRequired,
88+
page: PropTypes.number.isRequired,
89+
rowsPerPage: PropTypes.number.isRequired,
90+
}
91+
92+
const useStyles2 = makeStyles({
93+
table: {
94+
minWidth: 500,
95+
},
96+
})
97+
98+
const UsersList = ({ match }) => {
99+
const [usersData, setUsersData] = useState({ users: [], count: 0 })
100+
useEffect(() => {
101+
api.users.getList().then(res => setUsersData(res))
102+
}, [])
103+
const classes = useStyles2()
104+
const [page, setPage] = React.useState(0)
105+
const [rowsPerPage, setRowsPerPage] = React.useState(10)
106+
107+
const emptyRows =
108+
rowsPerPage - Math.min(rowsPerPage, usersData.users.length - page * rowsPerPage)
109+
110+
const handleChangePage = (event, newPage) => {
111+
setPage(newPage)
112+
}
113+
114+
const handleChangeRowsPerPage = event => {
115+
setRowsPerPage(parseInt(event.target.value, 10))
116+
setPage(0)
117+
}
118+
119+
return (
120+
<TableContainer component={Paper}>
121+
<Table className={classes.table} aria-label="custom pagination table">
122+
<TableHead>
123+
<TableRow>
124+
<TableCell>Avatar</TableCell>
125+
<TableCell>First Name</TableCell>
126+
<TableCell>Last Name</TableCell>
127+
<TableCell>Username</TableCell>
128+
<TableCell>Email</TableCell>
129+
<TableCell>Actions</TableCell>
130+
</TableRow>
131+
</TableHead>
132+
<TableBody>
133+
{(rowsPerPage > 0
134+
? usersData.users.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
135+
: usersData.users
136+
).map(row => (
137+
<TableRow key={row.id}>
138+
<TableCell>
139+
<Avatar alt={row.firstName} src={row.avatarUrl} />
140+
</TableCell>
141+
<TableCell component="th" scope="row">
142+
{row.firstName}
143+
</TableCell>
144+
<TableCell>{row.lastName}</TableCell>
145+
<TableCell>{row.username}</TableCell>
146+
<TableCell>{row.email}</TableCell>
147+
<TableCell>
148+
<EditIcon />
149+
<DeleteIcon />
150+
</TableCell>
151+
</TableRow>
152+
))}
153+
{emptyRows > 0 && (
154+
<TableRow style={{ height: 53 * emptyRows }}>
155+
<TableCell colSpan={6} />
156+
</TableRow>
157+
)}
158+
</TableBody>
159+
<TableFooter>
160+
<TableRow>
161+
<TablePagination
162+
rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
163+
colSpan={12}
164+
count={usersData.users.length}
165+
rowsPerPage={rowsPerPage}
166+
page={page}
167+
SelectProps={{
168+
inputProps: { 'aria-label': 'rows per page' },
169+
native: true,
170+
}}
171+
onChangePage={handleChangePage}
172+
onChangeRowsPerPage={handleChangeRowsPerPage}
173+
ActionsComponent={TablePaginationActions}
174+
/>
175+
</TableRow>
176+
</TableFooter>
177+
</Table>
178+
</TableContainer>
179+
)
180+
}
181+
182+
UsersList.propTypes = {}
183+
184+
export default UsersList

‎src/Administration/Users/UsersList/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './UsersList'

0 commit comments

Comments
 (0)