Material-UIのAvatarを使用する(ログイン・タスク一覧編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

前回に引き続き、ログイン名の横とタスク一覧に表示されるユーザ名の横にAvatarを追加します。

ログイン名の横にAvatarを表示する

ログイン時、AppbarにAvatarを表示します。今後の実装のために、ユーザ名とavatarUrlをstate.firebase.profileから取得するように変更します。

src/components/header/Login.js({/* xxx */}のコメントは実行前に削除してください)

import Avatar from '@material-ui/core/Avatar'  // 追加

const styles = theme => ({  // themeを引数とする関数に変更
  // 略
  avatar: {  // 追加
    margin: theme.spacing.unit,
  },
})

class Login extends React.Component {
  // 略
  render() {
    const { auth, profile, loginWithGoogle, logout, classes } = this.props  // profileを追加
    // 略
    return (
        <React.Fragment>
          <Button color="inherit" aria-owns={anchorEl ? 'user-menu' : undefined} aria-haspopup="true"
          onClick={this.handleClick} className={classes.userName}>
            {profile.displayName} さん  {/* 変更 */}
          </Button>
          {/* 略 */}
          {profile.avatarUrl && <Avatar alt={profile.displayName} src={profile.avatarUrl} className={classes.avatar} />}  {/* 追加 */}
        </React.Fragment>
    )
  }
}

Login.propTypes = {
  // 略
  profile: PropTypes.shape({  // 追加
    displayName: PropTypes.string,
    avatarUrl: PropTypes.string
  }).isRequired,
}

const mapStateToProps = state => ({
  auth: state.firebase.auth,
  profile: state.firebase.profile,  // 追加
})

実行結果です。Avatarが画面右上の、ユーザ名の右隣に表示されました。

f:id:yucatio:20181211221022p:plain

タスク一覧にAvatarを表示する

続いてタスク一覧画面のユーザ名の横にAvatarを表示します。

src/components/todos/Title.js({/* xxx */}のコメントは実行前に削除してください)

import { withStyles } from '@material-ui/core/styles'  // 追加
import Avatar from '@material-ui/core/Avatar'  // 追加

// stylesを追加
const styles = theme => ({
  row: {
    display: 'flex',  // #1
    alignItems: 'center',  // #2
  },
  avatar: {
    margin: theme.spacing.unit,
  },
})

const Title = ({displayName, avatarUrl, isOwnTodos, classes}) => {  // avatarUrlとclassesを追加
  // 略
  return (
    <div className={classes.row}>  {/* divに変更し、classNameを追加 */}
      {avatarUrl && <Avatar alt={displayName} src={avatarUrl} className={classes.avatar} />}  {/*  追加 */}
      {displayName && <Typography variant="h5">{name}のタスク一覧</Typography>}
    </div>
  )
}

Title.propTypes = {
  // 略
  avatarUrl: PropTypes.string,  // 追加
  classes: PropTypes.object.isRequired,  // 追加
}

const firebaseQueries = ({uid}) => (
  [
    {path: `users/${uid}/displayName`, type: 'once'},
    {path: `users/${uid}/avatarUrl`, type: 'once'},  // 追加
  ]
)

const mapStateToProps = ({firebase: {data : {users}}}, {uid}) => ({
  displayName: users && users[uid] &&　users[uid].displayName,
  avatarUrl: users && users[uid] &&　users[uid].avatarUrl,  // 追加
})

export default compose(
  withStyles(styles),  // 追加
  firebaseConnect(firebaseQueries),
  connect(
    mapStateToProps
))(Title)

display: 'flex’を指定することで、Avaterとユーザ名を横に並べます(#1)。
alignItems: 'center’を指定することで、Avaterとユーザ名のを上下中央に揃えます(#2)。

実行結果です。Avatarがタスク一覧のユーザ名の左隣に表示されました。

f:id:yucatio:20181211221038p:plain