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

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)
+)