Skip to content

Commit d28a176

Browse files
modularcodermodularcoder
committed
Migrate project to typescript
1 parent 6d67b7f commit d28a176

File tree

16 files changed

+210
-159
lines changed

16 files changed

+210
-159
lines changed

‎src/Administration/Administration.js renamed to ‎src/Administration/Administration.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import React from 'react'
2-
import { Route } from 'react-router-dom'
2+
import { Route, match as Match } from 'react-router-dom'
33
import UsersList from './Users/UsersList'
4-
import UserEditor from './Users/UsersEditor/UsersEditor'
4+
import UserEditor from './Users/UsersEditor'
55

6-
const Administration = ({ match }) => {
6+
export type AdministrationRouteParams = {
7+
userId: string
8+
}
9+
10+
export type AdministrationProps = {
11+
match: Match<AdministrationRouteParams>
12+
}
13+
14+
const Administration: React.FC<AdministrationProps> = ({ match }) => {
715
return (
816
<>
917
<Route exact path={`${match.path}/users`} component={UsersList} />
@@ -14,7 +22,7 @@ const Administration = ({ match }) => {
1422
<Route
1523
path={`${match.path}/users/:userId/edit`}
1624
render={(props) => (
17-
<UserEditor {...props} userId={parseInt(props.match.params.userId)} />
25+
<UserEditor {...props} userId={parseInt(match.params.userId)} />
1826
)}
1927
/>
2028
</>

‎src/Administration/Users/UsersEditor/UsersEditor.js renamed to ‎src/Administration/Users/UsersEditor/UsersEditor.tsx

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
import React, { useEffect, useState } from 'react'
2-
import PropTypes from 'prop-types'
3-
4-
import api from '@/_api'
5-
6-
import BasePageContainer from '@/_common/BasePageContainer'
7-
import BasePageToolbar from '@/_common/BasePageToolbar'
8-
import { Save as SaveIcon } from '@material-ui/icons/'
1+
import React, { useEffect, useState, ChangeEvent, FormEvent } from 'react'
2+
import { match as Match } from 'react-router-dom'
93
import {
104
Input,
115
Select,
@@ -17,26 +11,40 @@ import {
1711
makeStyles,
1812
Grid,
1913
} from '@material-ui/core'
14+
import { Save as SaveIcon } from '@material-ui/icons/'
15+
16+
import api from '_api'
17+
18+
import { UserSubmissionData } from '_api/_types/User'
19+
import BasePageContainer from '_common/BasePageContainer'
20+
import BasePageToolbar from '_common/BasePageToolbar'
2021

21-
const UserEditor = (props) => {
22+
export type UserEditorProps = {
23+
userId?: number
24+
match: Match
25+
}
26+
27+
const UserEditor: React.FC<UserEditorProps> = (props) => {
2228
const classes = useStyles()
2329

2430
const { userId } = props
25-
const [user, setUser] = useState({
31+
const [user, setUser] = useState<UserSubmissionData>({
2632
avatarUrl: '',
2733
email: '',
2834
firstName: '',
2935
globalRole: '',
3036
lastName: '',
31-
userToOrganizations: [{}],
3237
username: '',
3338
})
3439

3540
useEffect(() => {
3641
if (!userId) {
3742
return
3843
}
44+
3945
async function fetchUser() {
46+
if (!userId) return
47+
4048
try {
4149
const userDataRes = await api.users.getOne(userId)
4250
setUser(userDataRes)
@@ -47,19 +55,19 @@ const UserEditor = (props) => {
4755
fetchUser()
4856
}, [userId])
4957

50-
const onChangeHandler = (e) =>
58+
const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) =>
5159
setUser({
5260
...user,
5361
[e.target.name]: e.target.value,
5462
})
5563

56-
const setGlobalRole = (e) =>
64+
const setGlobalRole = (e: ChangeEvent<any>) =>
5765
setUser({
5866
...user,
5967
globalRole: e.target.value,
6068
})
6169

62-
const handleSubmit = async (e) => {
70+
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
6371
e.preventDefault()
6472
try {
6573
if (userId) {
@@ -83,7 +91,7 @@ const UserEditor = (props) => {
8391
value={user.firstName}
8492
name="firstName"
8593
className={classes.width}
86-
onChange={(e) => onChangeHandler(e)}
94+
onChange={onChangeHandler}
8795
/>
8896
</FormControl>
8997
<FormControl className={classes.control}>
@@ -92,7 +100,7 @@ const UserEditor = (props) => {
92100
value={user.lastName}
93101
name="lastName"
94102
className={classes.width}
95-
onChange={(e) => onChangeHandler(e)}
103+
onChange={onChangeHandler}
96104
/>
97105
</FormControl>
98106
<FormControl className={classes.control}>
@@ -101,7 +109,7 @@ const UserEditor = (props) => {
101109
value={user.username}
102110
name="username"
103111
className={classes.width}
104-
onChange={(e) => onChangeHandler(e)}
112+
onChange={onChangeHandler}
105113
/>
106114
</FormControl>
107115
<FormControl className={classes.control}>
@@ -110,7 +118,7 @@ const UserEditor = (props) => {
110118
value={user.email}
111119
name="email"
112120
className={classes.width}
113-
onChange={(e) => onChangeHandler(e)}
121+
onChange={onChangeHandler}
114122
/>
115123
</FormControl>
116124
<FormControl className={classes.control}>
@@ -142,10 +150,6 @@ const UserEditor = (props) => {
142150
)
143151
}
144152

145-
UserEditor.propTypes = {
146-
userId: PropTypes.number,
147-
}
148-
149153
const useStyles = makeStyles((theme) => ({
150154
box: {
151155
padding: 16,

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

Whitespace-only changes.

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

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

‎src/Administration/Users/UsersList/UsersList.js renamed to ‎src/Administration/Users/UsersList/UsersList.tsx

Lines changed: 66 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React, { useEffect, useState } from 'react'
2-
// import PropTypes from 'prop-types'
3-
2+
import { match as Match } from 'react-router-dom'
43
import Grid from '@material-ui/core/Grid'
54
import {
6-
makeStyles,
5+
// makeStyles,
76
Paper,
87
Table,
98
TableCell,
@@ -14,71 +13,79 @@ import {
1413
TableContainer,
1514
TableSortLabel,
1615
} from '@material-ui/core'
17-
1816
import { Alert, AlertTitle } from '@material-ui/lab'
1917

20-
import api from '@/_api'
18+
import { User } from '_api/_types/User'
19+
import api from '_api'
2120

22-
import BasePageContainer from '@/_common/BasePageContainer'
23-
import BasePageToolbar from '@/_common/BasePageToolbar'
24-
import { BaseTablePagination } from '@/_common/BaseTable'
21+
import BasePageContainer from '_common/BasePageContainer'
22+
import BasePageToolbar from '_common/BasePageToolbar'
23+
import { BaseTablePagination } from '_common/BaseTable'
2524

2625
import UsersListAction from './UsersListActions'
2726
import UsersListTableItems from './UsersListTableItems'
2827

29-
const UsersList = ({ match }) => {
30-
const classes = useStyles()
28+
const tableColumns = [
29+
{
30+
id: 'avatarUrl',
31+
label: '',
32+
isSortable: false,
33+
},
34+
{
35+
id: 'firstName',
36+
label: 'First Name',
37+
isSortable: true,
38+
},
39+
{
40+
id: 'lastName',
41+
label: 'Last Name',
42+
isSortable: true,
43+
},
44+
{
45+
id: 'username',
46+
label: 'Username',
47+
isSortable: true,
48+
},
49+
{
50+
id: 'email',
51+
label: 'Email',
52+
isSortable: true,
53+
},
54+
{
55+
id: 'status',
56+
label: 'Status',
57+
isSortable: true,
58+
},
59+
{
60+
id: 'createdAt',
61+
label: 'Created',
62+
isSortable: true,
63+
},
64+
]
3165

66+
type UsersListRouteParams = {}
67+
68+
export type UsersListProps = {
69+
match: Match<UsersListRouteParams>
70+
}
71+
72+
type UsersData = {
73+
users: User[]
74+
count: number
75+
}
76+
77+
const UsersList: React.FC<UsersListProps> = ({ match }) => {
3278
const [status, setStatus] = React.useState('idle')
3379
const [statusMessage, setStatusMessage] = React.useState('')
3480
const [page, setPage] = React.useState(0)
35-
const [usersData, setUsersData] = useState({ users: [], count: 0 })
81+
const [usersData, setUsersData] = useState<UsersData>({ users: [], count: 0 })
3682
const [rowsPerPage, setRowsPerPage] = React.useState(10)
3783
const [order, setOrder] = React.useState({
3884
order: 'desc',
3985
orderBy: 'createdAt',
4086
})
4187

4288
const { users, count } = usersData
43-
// const rowsExpected = count ? Math.max(count - rowsPerPage * page, 0) : rowsPerPage
44-
45-
const tableColumns = [
46-
{
47-
id: 'avatarUrl',
48-
label: '',
49-
isSortable: false,
50-
},
51-
{
52-
id: 'firstName',
53-
label: 'First Name',
54-
isSortable: true,
55-
},
56-
{
57-
id: 'lastName',
58-
label: 'Last Name',
59-
isSortable: true,
60-
},
61-
{
62-
id: 'username',
63-
label: 'Username',
64-
isSortable: true,
65-
},
66-
{
67-
id: 'email',
68-
label: 'Email',
69-
isSortable: true,
70-
},
71-
{
72-
id: 'status',
73-
label: 'Status',
74-
isSortable: true,
75-
},
76-
{
77-
id: 'createdAt',
78-
label: 'Created',
79-
isSortable: true,
80-
},
81-
]
8289

8390
// Request users
8491
useEffect(() => {
@@ -105,16 +112,19 @@ const UsersList = ({ match }) => {
105112
fetchUsers()
106113
}, [order, page, rowsPerPage])
107114

108-
const handleChangePage = (event, newPage) => {
115+
const handleChangePage = (event: any, newPage: number) => {
109116
setPage(newPage)
110117
}
111118

112-
const handleChangeRowsPerPage = (event) => {
119+
const handleChangeRowsPerPage = (event: any) => {
113120
setRowsPerPage(parseInt(event.target.value, 10))
114121
setPage(0)
115122
}
116123

117-
const handelChangeOrder = (event, columnId) => {
124+
const handelChangeOrder = (
125+
event: React.MouseEvent<HTMLSpanElement>,
126+
columnId: string,
127+
) => {
118128
setOrder({
119129
// If the sorting column has changed
120130
order: columnId !== order.orderBy || order.order === 'desc' ? 'asc' : 'desc',
@@ -126,7 +136,7 @@ const UsersList = ({ match }) => {
126136
<BasePageContainer>
127137
<BasePageToolbar
128138
title={'Users Adminstration'}
129-
actionsComponent={UsersListAction}
139+
ActionsComponent={UsersListAction}
130140
></BasePageToolbar>
131141
<Grid container spacing={3}>
132142
<Grid item xs={12}>
@@ -139,7 +149,7 @@ const UsersList = ({ match }) => {
139149

140150
{status !== 'error' && (
141151
<TableContainer component={Paper}>
142-
<Table className={classes.table} aria-label="custom pagination table">
152+
<Table aria-label="custom pagination table">
143153
<TableHead>
144154
<TableRow>
145155
{tableColumns.map((column) => (
@@ -148,7 +158,7 @@ const UsersList = ({ match }) => {
148158
{column.isSortable && (
149159
<TableSortLabel
150160
active={order.orderBy === column.id}
151-
direction={order.orderBy === column.id ? order.order : 'asc'}
161+
direction={order.orderBy === column.id ? 'desc' : 'asc'}
152162
onClick={(event) => handelChangeOrder(event, column.id)}
153163
>
154164
{column.label}
@@ -173,7 +183,6 @@ const UsersList = ({ match }) => {
173183
page={page}
174184
rowsPerPage={rowsPerPage}
175185
count={count}
176-
order={order}
177186
onChangePage={handleChangePage}
178187
onChangeRowsPerPage={handleChangeRowsPerPage}
179188
/>
@@ -188,13 +197,4 @@ const UsersList = ({ match }) => {
188197
)
189198
}
190199

191-
const useStyles = makeStyles((theme) => ({
192-
root: {
193-
flexShrink: 0,
194-
marginLeft: theme.spacing(2.5),
195-
},
196-
}))
197-
198-
UsersList.propTypes = {}
199-
200200
export default UsersList

‎src/Administration/Users/UsersList/UsersListActions.js renamed to ‎src/Administration/Users/UsersList/UsersListActions.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,14 @@ import {
1414

1515
// import usersListContext from './usersListContext'
1616

17-
const DashboardActions = () => {
17+
const UsersListActions: React.FC = () => {
1818
const classes = useStyles()
1919
const [search, setSearch] = useState('')
2020
// const { filter } = useContext(usersListContext)
2121

22-
const handleChangeSearchInput = (event) => {
22+
const handleChangeSearchInput: React.ChangeEventHandler<
23+
HTMLInputElement | HTMLTextAreaElement
24+
> = (event) => {
2325
setSearch(event.target.value)
2426
}
2527

@@ -134,4 +136,4 @@ const useStyles = makeStyles((theme) => ({
134136
},
135137
}))
136138

137-
export default DashboardActions
139+
export default UsersListActions

0 commit comments

Comments
 (0)