API & Client : replace id with username to fetch a user

fittrackee_client/src/components/Admin/Users/index.jsx

@@ -41,7 +41,9 @@ class AdminUsers extends React.Component {
                       <tr key={user.id}>
                         <th scope="row">{user.id}</th>
                         <td>
-                          <Link to={`/users/${user.id}`}>{user.username}</Link>
+                          <Link to={`/users/${user.username}`}>
+                            {user.username}
+                          </Link>
                         </td>
                         <td>{user.email}</td>
                         <td>

fittrackee_client/src/components/App.jsx

@@ -48,7 +48,7 @@ class App extends React.Component {
           <Route exact path="/profile" component={CurrentUserProfile} />
           <Route exact path="/activities/history" component={Activities} />
           <Route exact path="/activities/statistics" component={Statistics} />
-          <Route exact path="/users/:userId" component={UserProfile} />
+          <Route exact path="/users/:userName" component={UserProfile} />
           <Route path="/activities" component={Activity} />
           <Route path="/admin" component={Admin} />
           <Route component={NotFound} />

fittrackee_client/src/components/User/UserProfile.jsx

@@ -7,12 +7,12 @@ import { getOrUpdateData } from '../../actions'
 
 class UserProfile extends React.Component {
   componentDidMount() {
-    this.props.loadUser(this.props.match.params.userId)
+    this.props.loadUser(this.props.match.params.userName)
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.match.params.userId !== this.props.match.params.userId) {
-      this.props.loadUser(this.props.match.params.userId)
+    if (prevProps.match.params.userName !== this.props.match.params.userName) {
+      this.props.loadUser(this.props.match.params.userName)
     }
   }
 
@@ -40,8 +40,8 @@ export default withTranslation()(
       users: state.users.data,
     }),
     dispatch => ({
-      loadUser: userId => {
-        dispatch(getOrUpdateData('getData', 'users', { id: userId }))
+      loadUser: userName => {
+        dispatch(getOrUpdateData('getData', 'users', { username: userName }))
       },
     })
   )(UserProfile)