Skip to content

Commit

Permalink
use only profile badge in Avatar component - remove useless states - …
Browse files Browse the repository at this point in the history
…rename fn for clarity
  • Loading branch information
BenGamma committed Nov 22, 2019
1 parent 6853e6c commit 922f8f3
Showing 1 changed file with 7 additions and 30 deletions.
37 changes: 7 additions & 30 deletions src/components/Avatar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import React from 'react'

import { Image, ImageProps } from 'rebass'
import { inject, observer } from 'mobx-react'
import { UserStore, getUserAvatar } from 'src/stores/User/user.store'
import { ProfileTypeLabel, IProfileType } from 'src/models/user_pp.models'
import { ProfileTypeLabel } from 'src/models/user_pp.models'
import Workspace from 'src/pages/User/workspace/Workspace'

interface IProps extends ImageProps {
Expand All @@ -12,14 +11,8 @@ interface IProps extends ImageProps {
profileType?: ProfileTypeLabel
}

interface IInjected extends IProps {
userStore: UserStore
}

interface IState {
avatarUrl?: string
fallbackBadge?: string
showFallback?: boolean
badgeProfileType?: string
}

@inject('userStore')
Expand All @@ -29,35 +22,20 @@ export class Avatar extends React.Component<IProps, IState> {
super(props)
this.state = {}
}
get injected() {
return this.props as IInjected
}

// subscribe/unsubscribe from specific user profile message when
// user updates their avatar (same url so by default will now be aware of change)
componentDidMount() {
this.getAvatar(this.props.userName)
this.getFallbackImage(this.props.profileType)
this.getProfileTypeBadge(this.props.profileType)
}

public getFallbackImage(type?: ProfileTypeLabel) {
public getProfileTypeBadge(type?: ProfileTypeLabel) {
const img = Workspace.findWorkspaceBadge(type, true)
this.setState({ fallbackBadge: img })
this.setState({ badgeProfileType: img })
}

async getAvatar(userName: string) {
const url = getUserAvatar(userName)
console.log('avatar', url)
this.setState({ avatarUrl: url })
}

render() {
const { width } = this.props
const { avatarUrl, fallbackBadge } = this.state

const addFallbackSrc = (ev: any) => {
ev.target.src = fallbackBadge
}
const { badgeProfileType } = this.state

return (
<>
Expand All @@ -66,8 +44,7 @@ export class Avatar extends React.Component<IProps, IState> {
width={width ? width : 40}
height={width ? width : 40}
sx={{ borderRadius: '25px' }}
src={avatarUrl}
onError={addFallbackSrc}
src={badgeProfileType}
/>
</>
)
Expand Down

0 comments on commit 922f8f3

Please sign in to comment.