refactor(components): avatar additional props

Author: polonel

src/client/components/Avatar/Avatar.jsx

@@ -15,6 +15,7 @@ import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { some } from 'lodash'
+import clsx from 'clsx'
 
 import axios from 'axios'
 
@@ -119,13 +120,37 @@ class Avatar extends React.Component {
   }
 
   render () {
-    const { image, showOnlineBubble, userId, size, showBorder, enableImageUpload } = this.props
+    const {
+      style,
+      image,
+      showOnlineBubble,
+      overrideBubbleSize,
+      showLargerBubble,
+      size,
+      showBorder,
+      borderColor,
+      enableImageUpload
+    } = this.props
+
+    let wrapperStyle = { borderRadius: '50%' }
+    if (showBorder) {
+      wrapperStyle.borderWidth = 4
+      wrapperStyle.borderStyle = 'solid'
+      wrapperStyle.borderColor = 'rgba(0,0,0,0.1)'
+    }
+    if (borderColor) wrapperStyle.borderColor = borderColor
+
+    if (style) wrapperStyle = { ...wrapperStyle, ...style }
+
+    let bubbleSize = size < 50 ? Math.round(size / 2) : 17
+    if (overrideBubbleSize) bubbleSize = overrideBubbleSize
+    if (showLargerBubble) bubbleSize = 25
 
     return (
       <Fragment>
         <div
           className='relative uk-clearfix uk-float-left uk-display-inline-block'
-          style={{ border: showBorder ? '4px solid rgba(0,0,0,0.1)' : '', borderRadius: '50%' }}
+          style={wrapperStyle}
           onMouseOver={() => this.onMouseOver()}
           onMouseOut={() => this.onMouseOut()}
         >
@@ -175,7 +200,13 @@ class Avatar extends React.Component {
             src={`/uploads/users/${image || 'defaultProfile.jpg'}`}
             alt=''
           />
-          {showOnlineBubble && <span ref={this.onlineBubbleRef} className='user-offline uk-border-circle' />}
+          {showOnlineBubble && (
+            <span
+              ref={this.onlineBubbleRef}
+              className={clsx(showLargerBubble && 'user-status-large', 'user-offline', 'uk-border-circle')}
+              style={{ height: bubbleSize, width: bubbleSize }}
+            />
+          )}
         </div>
       </Fragment>
     )
@@ -190,14 +221,19 @@ Avatar.propTypes = {
   size: PropTypes.number.isRequired,
   showOnlineBubble: PropTypes.bool,
   showBorder: PropTypes.bool,
-  enableImageUpload: PropTypes.bool
+  borderColor: PropTypes.string,
+  enableImageUpload: PropTypes.bool,
+  style: PropTypes.object,
+  overrideBubbleSize: PropTypes.number,
+  showLargerBubble: PropTypes.bool
 }
 
 Avatar.defaultProps = {
   size: 50,
   showOnlineBubble: true,
   showBorder: false,
-  enableImageUpload: false
+  enableImageUpload: false,
+  showLargerBubble: false
 }
 
 const mapStateToProps = state => ({

src/client/containers/Accounts/index.jsx

@@ -21,6 +21,7 @@ import { makeObservable, observable } from 'mobx'
 import { showModal } from 'actions/common'
 import { fetchAccounts, deleteAccount, enableAccount, unloadAccounts } from 'actions/accounts'
 
+import Avatar from 'components/Avatar/Avatar'
 import TruCard from 'components/TruCard'
 import PageTitle from 'components/PageTitle'
 import Grid from 'components/Grid'
@@ -144,10 +145,14 @@ class AccountsContainer extends React.Component {
               header={
                 <div>
                   <div className='account-image relative uk-display-inline-block'>
-                    <img src={`/uploads/users/${userImage}`} alt='ProfilePic' className={'tru-card-head-avatar'} />
-                    <span
-                      data-user-status-id={user.get('_id')}
-                      className='user-status-large user-offline uk-border-circle'
+                    <Avatar
+                      size={82}
+                      userId={user.get('_id')}
+                      image={userImage}
+                      style={{ marginTop: 10 }}
+                      showBorder={true}
+                      borderColor={'#ffffff'}
+                      showLargerBubble={true}
                     />
                   </div>
                   <h3 className='tru-card-head-text uk-text-center'>

src/client/containers/Groups/index.jsx

@@ -19,6 +19,7 @@ import { connect } from 'react-redux'
 import { fetchGroups, deleteGroup } from 'actions/groups'
 import { showModal } from 'actions/common'
 
+import Avatar from 'components/Avatar/Avatar'
 import PageTitle from 'components/PageTitle'
 import PageContent from 'components/PageContent'
 import Button from 'components/Button'
@@ -89,17 +90,7 @@ class GroupsContainer extends React.Component {
                       data-uk-tooltip={'{pos: "bottom"}'}
                       title={user.get('fullname')}
                     >
-                      <img
-                        style={{ width: 25, height: 25, marginRight: 5 }}
-                        className={'round'}
-                        src={`/uploads/users/${profilePic}`}
-                        alt={user.get('fullname')}
-                      />
-                      <span
-                        data-user-status-id={user.get('_id')}
-                        className='user-offline uk-border-circle'
-                        style={{ width: 13, height: 13 }}
-                      />
+                      <Avatar size={25} style={{ marginRight: 5 }} image={profilePic} userId={user.get('_id')} />
                     </div>
                   )
                 })}
@@ -171,7 +162,4 @@ const mapStateToProps = state => ({
   groups: state.groupsState.groups
 })
 
-export default connect(
-  mapStateToProps,
-  { fetchGroups, deleteGroup, showModal }
-)(GroupsContainer)
+export default connect(mapStateToProps, { fetchGroups, deleteGroup, showModal })(GroupsContainer)

src/client/containers/Teams/index.jsx

@@ -23,6 +23,7 @@ import PageTitle from 'components/PageTitle'
 import PageContent from 'components/PageContent'
 
 import helpers from 'lib/helpers'
+import Avatar from 'components/Avatar/Avatar'
 import Button from 'components/Button'
 import UIKit from 'uikit'
 import Table from 'components/Table'
@@ -107,17 +108,7 @@ class TeamsContainer extends React.Component {
                       data-uk-tooltip={'{pos: "bottom"}'}
                       title={user.get('fullname')}
                     >
-                      <img
-                        style={{ width: 25, height: 25, marginRight: 5 }}
-                        className={'round'}
-                        src={`/uploads/users/${profilePic}`}
-                        alt={user.get('fullname')}
-                      />
-                      <span
-                        data-user-status-id={user.get('_id')}
-                        className='user-offline uk-border-circle'
-                        style={{ width: 13, height: 13 }}
-                      />
+                      <Avatar image={profilePic} userId={user.get('_id')} size={25} style={{ marginRight: 5 }} />
                     </div>
                   )
                 })}
@@ -197,7 +188,4 @@ const mapStateToProps = state => ({
   teamsState: state.teamsState
 })
 
-export default connect(
-  mapStateToProps,
-  { fetchTeams, unloadTeams, deleteTeam, showModal }
-)(TeamsContainer)
+export default connect(mapStateToProps, { fetchTeams, unloadTeams, deleteTeam, showModal })(TeamsContainer)