API & Client - remove id in user data

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

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom'
 import Message from '../../Common/Message'
 import { history } from '../../../index'
 import { getOrUpdateData } from '../../../actions'
+import { apiUrl } from '../../../utils'
 
 class AdminUsers extends React.Component {
   componentDidMount() {
@@ -28,7 +29,7 @@ class AdminUsers extends React.Component {
                 <table className="table">
                   <thead>
                     <tr>
-                      <th>{t('administration:id')}</th>
+                      <th>#</th>
                       <th>{t('user:Username')}</th>
                       <th>{t('user:Email')}</th>
                       <th>{t('user:Registration Date')}</th>
@@ -38,8 +39,18 @@ class AdminUsers extends React.Component {
                   </thead>
                   <tbody>
                     {users.map(user => (
-                      <tr key={user.id}>
-                        <th scope="row">{user.id}</th>
+                      <tr key={user.username}>
+                        <td>
+                          {user.picture === true && (
+                            <img
+                              alt="Avatar"
+                              src={`${apiUrl}users/${
+                                user.username
+                              }/picture?${Date.now()}`}
+                              className="img-fluid App-nav-profile-img"
+                            />
+                          )}
+                        </td>
                         <td>
                           <Link to={`/users/${user.username}`}>
                             {user.username}

fittrackee_client/src/components/NavBar/index.jsx

@@ -8,7 +8,7 @@ import { apiUrl } from '../../utils'
 
 class NavBar extends React.PureComponent {
   render() {
-    const { admin, id, isAuthenticated, picture, t, username } = this.props
+    const { admin, isAuthenticated, picture, t, username } = this.props
     return (
       <header>
         <nav className="navbar navbar-expand-lg navbar-light bg-light">
@@ -120,7 +120,7 @@ class NavBar extends React.PureComponent {
                 {picture === true && (
                   <img
                     alt="Avatar"
-                    src={`${apiUrl}users/${id}/picture?${Date.now()}`}
+                    src={`${apiUrl}users/${username}/picture?${Date.now()}`}
                     className="img-fluid App-nav-profile-img"
                   />
                 )}
@@ -161,7 +161,6 @@ class NavBar extends React.PureComponent {
 export default withTranslation()(
   connect(({ user }) => ({
     admin: user.admin,
-    id: user.id,
     isAuthenticated: user.isAuthenticated,
     picture: user.picture,
     username: user.username,

fittrackee_client/src/components/User/ProfileDetail.jsx

@@ -89,7 +89,7 @@ function ProfileDetail({
                         <img
                           alt="Profile"
                           src={
-                            `${apiUrl}users/${user.id}/picture` +
+                            `${apiUrl}users/${user.username}/picture` +
                             `?${Date.now()}`
                           }
                           className="img-fluid App-profile-img-small"

fittrackee_client/src/components/User/UserProfile.jsx

@@ -23,7 +23,7 @@ class UserProfile extends React.Component {
       <div>
         {user && (
           <ProfileDetail
-            editable={currentUser.id === user.id}
+            editable={currentUser.username === user.username}
             t={t}
             user={user}
           />