OpenConceptLab/ocl_issues#1617 | user profile and edit styles | copy api token

Author: snyaggarwal

src/components/users/UserEdit.jsx

@@ -8,7 +8,7 @@ const UserEdit = () => {
   const height = 'calc(100vh - 100px)'
   return (
     <div className='col-xs-12 padding-0'>
-      <div className='col-xs-3' style={{height: height, padding: '24px', maxWidth: '20%'}}>
+      <div className='col-xs-3' style={{height: height, padding: '24px 24px 24px 8px', maxWidth: '20%'}}>
         <UserProfile user={user} />
       </div>
       <div className='col-xs-10 padding-0' style={{height: height, maxWidth: '80%'}}>

src/components/users/UserForm.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next'
 import { useHistory } from 'react-router-dom';
-import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
 import InputAdornment from '@mui/material/InputAdornment'
 import TextField from '@mui/material/TextField'
@@ -11,6 +10,7 @@ import { OperationsContext } from '../app/LayoutContext';
 import { LANGUAGES } from '../../common/constants';
 import { refreshCurrentUserCache, getCurrentUser, getResetPasswordURL } from '../../common/utils'
 import Link from '../common/Link'
+import Button from '../common/Button'
 
 const UserForm = ({ user }) => {
   const sessionUser = getCurrentUser()
@@ -179,9 +179,7 @@ const UserForm = ({ user }) => {
             </TextField>
           </div>
         </div>
-        <Button onClick={onSubmit} variant='contained' color='primary' sx={{textTransform: 'none'}}>
-          {t('common.save')}
-        </Button>
+        <Button onClick={onSubmit} label={t('common.save')} color='primary' sx={{margin: '16px 0 24px 0'}} />
       </form>
     </div>
   )

src/components/users/UserHome.jsx

@@ -1,28 +1,24 @@
 import React from 'react';
 import { useParams } from 'react-router-dom'
-import { getCurrentUser, canEditUser } from '../../common/utils'
+import { getCurrentUser } from '../../common/utils'
 import UserProfile from './UserProfile'
 import UserRepositories from './UserRepositories';
 import APIService from '../../services/APIService'
 
 
 const UserHome = () => {
   const [user, setUser] = React.useState({})
-  const [apiToken, setApiToken] = React.useState()
   const params = useParams()
   const height = 'calc(100vh - 100px)'
 
   const fetchUser = () => {
     const currentUser = getCurrentUser()
     if(params.user === currentUser?.username) {
       setUser(currentUser)
-      fetchAPIToken()
     } else {
       APIService.users(params.user).get(null, null, {includeSubscribedOrgs: true}).then(response => {
-        if(response.status === 200) {
+        if(response.status === 200)
           setUser(response.data)
-          fetchAPIToken()
-        }
         else if(response.status)
           window.location.hash = '#/' + response.status
         else if(response.detail === 'Not found.')
@@ -31,21 +27,15 @@ const UserHome = () => {
     }
   }
 
-  const fetchAPIToken = () => {
-    if(canEditUser(params.user) && !apiToken)
-      APIService.users().appendToUrl('api-token/').get().then(response => setApiToken(response?.data?.token))
-  }
-
   React.useEffect(() => {
-    setApiToken(undefined)
     fetchUser()
   }, [params.user])
 
 
   return (
     <div className='col-xs-12 padding-0'>
       <div className='col-xs-3' style={{height: height, padding: '24px 24px 24px 8px', maxWidth: '20%'}}>
-        <UserProfile user={user} apiToken={apiToken} />
+        <UserProfile user={user} />
       </div>
       <div className='col-xs-10 padding-0' style={{backgroundColor: '#FFF', borderRadius: '10px', height: height, maxWidth: '80%'}}>
         {

src/components/users/UserProfile.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import Typography from '@mui/material/Typography'
 import List from '@mui/material/List';
@@ -16,6 +17,7 @@ import UserIcon from './UserIcon';
 import OrgIcon from '../orgs/OrgIcon';
 import Link from '../common/Link'
 import { OperationsContext } from '../app/LayoutContext';
+import APIService from '../../services/APIService';
 
 
 const UserProperty = ({icon, value, label}) => {
@@ -38,15 +40,28 @@ const UserProperty = ({icon, value, label}) => {
 }
 
 
-const UserProfile = ({ user, apiToken }) => {
+const UserProfile = ({ user }) => {
   const { t } = useTranslation()
+  const params = useParams()
+  const [apiToken, setApiToken] = React.useState(undefined)
   const { setAlert } = React.useContext(OperationsContext);
   const iconStyle = {fontSize: '24px', color: 'secondary.main'}
   const userOrgs = getCurrentUserOrgs()
   const onCopyToken = () => {
     copyToClipboard(apiToken)
     setAlert({message: t('user.copy_token_success'), severity: 'success', duration: 2000})
   }
+  const canEdit = canEditUser(params?.user)
+
+  const fetchAPIToken = () => {
+    if(canEdit && !apiToken)
+      APIService.users().appendToUrl('api-token/').get().then(response => setApiToken(response?.data?.token))
+  }
+
+  React.useEffect(() => {
+    fetchAPIToken()
+  }, [])
+
 
   return (
     <React.Fragment>
@@ -85,7 +100,7 @@ const UserProfile = ({ user, apiToken }) => {
         Joined {formatDate(user?.date_joined)}
       </Typography>
       {
-        user?.username && canEditUser(user.username) &&
+        canEdit &&
           <div style={{paddingLeft: '12px'}}>
             <Link
               label={t('user.edit_my_profile')}