user edit in progress

Author: zhorakh

src/Administration/Administration.js

@@ -2,11 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Route } from 'react-router-dom'
 import UsersList from './Users/UsersList'
+import UserEditor from "./Users/UsersEditor/UsersEditor";
 
 const Administration = ({ match }) => {
   return (
     <>
-      <Route path={`${match.path}/users`} component={UsersList} />
+      <Route exact path={`${match.path}/users`} component={UsersList} />
+      <Route path={`${match.path}/users/:userId/edit`} component={UserEditor} />
     </>
   )
 }

src/Administration/Users/UsersEditor/UsersEditor.js

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+
+import api from '@/_api'
+
+const UserEditor = ({ match }) => {
+  const [user, setUser] = useState([])
+
+  useEffect(() => {
+    async function fetchUser() {
+      const userId = match.params.userId;
+      try {
+        const userDataRes = await api.users.getOne(userId)
+        setUser(userDataRes)
+      } catch (err) {
+        console.log('error', err.message)
+      }
+    }
+    fetchUser()
+  }, [])
+
+  return (
+    <>
+      UserEditor
+    </>
+  )
+}
+
+UserEditor.propTypes = {}
+
+export default UserEditor

src/Administration/Users/UsersList/UsersListTableItems.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedDate } from 'react-intl'
-
+import { Link } from 'react-router-dom'
 import { makeStyles, TableCell, TableRow, Avatar } from '@material-ui/core'
 import { Skeleton } from '@material-ui/lab'
 
@@ -60,7 +60,9 @@ const UsersListTableItems = ({ users, rowsPerPage = 10, rowsExpected = 10 }) =>
             />
           </TableCell>
           <TableCell>
-            <EditIcon />
+            <Link to={{ pathname: `users/${row.id}/edit` }}>
+              <EditIcon />
+            </Link>
             <DeleteIcon />
           </TableCell>
         </TableRow>