API & Client : add a link to display user detail in admin - #15

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

@@ -2,6 +2,7 @@ import { format } from 'date-fns'
 import React from 'react'
 import { connect } from 'react-redux'
 import { Helmet } from 'react-helmet'
+import { Link } from 'react-router-dom'
 
 import Message from '../../Common/Message'
 import { history } from '../../../index'
@@ -39,7 +40,9 @@ class AdminUsers extends React.Component {
                     {users.map(user => (
                       <tr key={user.id}>
                         <th scope="row">{user.id}</th>
-                        <td>{user.username}</td>
+                        <td>
+                          <Link to={`/users/${user.id}`}>{user.username}</Link>
+                        </td>
                         <td>{user.email}</td>
                         <td>
                           {format(

fittrackee_client/src/components/App.jsx

@@ -6,15 +6,16 @@ import './App.css'
 import Admin from './Admin'
 import Activity from './Activity'
 import Activities from './Activities'
+import CurrentUserProfile from './User/CurrentUserProfile'
 import Dashboard from './Dashboard'
 import Footer from './Footer'
 import Logout from './User/Logout'
 import NavBar from './NavBar'
 import NotFound from './Others/NotFound'
-import Profile from './User/Profile'
 import ProfileEdit from './User/ProfileEdit'
 import Statistics from './Statistics'
 import UserForm from './User/UserForm'
+import UserProfile from './User/UserProfile'
 import { getAppData } from '../actions/application'
 
 class App extends React.Component {
@@ -44,9 +45,10 @@ class App extends React.Component {
           />
           <Route exact path="/logout" component={Logout} />
           <Route exact path="/profile/edit" component={ProfileEdit} />
-          <Route exact path="/profile" component={Profile} />
+          <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 path="/activities" component={Activity} />
           <Route path="/admin" component={Admin} />
           <Route component={NotFound} />

fittrackee_client/src/components/User/CurrentUserProfile.jsx

@@ -4,10 +4,10 @@ import { connect } from 'react-redux'
 
 import ProfileDetail from './ProfileDetail'
 
-function Profile({ t, user }) {
+function CurrentUserProfile({ t, user }) {
   return (
     <div>
-      <ProfileDetail t={t} user={user} />
+      <ProfileDetail editable t={t} user={user} />
     </div>
   )
 }
@@ -15,5 +15,5 @@ function Profile({ t, user }) {
 export default withTranslation()(
   connect(state => ({
     user: state.user,
-  }))(Profile)
+  }))(CurrentUserProfile)
 )

fittrackee_client/src/components/User/ProfileDetail.jsx

@@ -11,6 +11,7 @@ import { apiUrl, getFileSize } from '../../utils'
 
 function ProfileDetail({
   appConfig,
+  editable,
   message,
   onDeletePicture,
   onUploadPicture,
@@ -37,13 +38,15 @@ function ProfileDetail({
             <div className="card">
               <div className="card-header userName">
                 {user.username}{' '}
-                <Link
-                  to={{
-                    pathname: '/profile/edit',
-                  }}
-                >
-                  <i className="fa fa-pencil-square-o" aria-hidden="true" />
-                </Link>
+                {editable && (
+                  <Link
+                    to={{
+                      pathname: '/profile/edit',
+                    }}
+                  >
+                    <i className="fa fa-pencil-square-o" aria-hidden="true" />
+                  </Link>
+                )}
               </div>
               <div className="card-body">
                 <div className="row">

fittrackee_client/src/components/User/UserProfile.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { withTranslation } from 'react-i18next'
+import { connect } from 'react-redux'
+
+import ProfileDetail from './ProfileDetail'
+import { getOrUpdateData } from '../../actions'
+
+class UserProfile extends React.Component {
+  componentDidMount() {
+    this.props.loadUser(this.props.match.params.userId)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.match.params.userId !== this.props.match.params.userId) {
+      this.props.loadUser(this.props.match.params.userId)
+    }
+  }
+
+  render() {
+    const { t, currentUser, users } = this.props
+    const [user] = users
+    return (
+      <div>
+        {user && (
+          <ProfileDetail
+            editable={currentUser.id === user.id}
+            t={t}
+            user={user}
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+export default withTranslation()(
+  connect(
+    state => ({
+      currentUser: state.user,
+      users: state.users.data,
+    }),
+    dispatch => ({
+      loadUser: userId => {
+        dispatch(getOrUpdateData('getData', 'users', { id: userId }))
+      },
+    })
+  )(UserProfile)
+)