Material-UIのAvatarを使用する(最近の更新編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

Material-UIを使用して最近の更新にユーザアイコンを表示します。

"最近の更新”にAvatarを表示する

Cloud Functionsの変更

"最近の更新”にユーザアイコン(Avatar)を表示します。

先に、Cloud Functionsを変更して、/recentUpdatedTodosパスに登録する内容にavatarUrlを追加します。

functions/index.js

const addRecentUpdate = (uid, todoId, todo, eventType) => {
  return admin.database().ref('/users/' + uid).once('value').then((snapshot) => {  // パスを '/users/' + uid に変更
    const user = snapshot.val();  // 変更
    return (admin.database().ref('/recentUpdatedTodos/' + todoId).set({
      uid,
      displayName: user.displayName,  // 変更
      avatarUrl: user.avatarUrl,  // 追加
      text: todo.text,
      eventType,
      _updatedAt: todo._updatedAt
    }));
  });
}

デプロイします。

$ cd todo-sample
$ firebase deploy --only functions

動作確認します。

タスク完了フラグを切り替えます

f:id:yucatio:20181210110744p:plain

データベースのデータを確認します。recentUpdatedTodos以下のデータにavatarUrlが追加されました。

f:id:yucatio:20181210110804p:plain

Avatarを表示する

Avaterを最近の更新に表示します。

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

import Avatar from '@material-ui/core/Avatar'  // 追加
import ListItemAvatar from '@material-ui/core/ListItemAvatar'  // 追加
import PersonIcon from '@material-ui/icons/Person'  // 追加

const UserUpdatedTodo = ({text, eventType, uid, displayName, avatarUrl, _updatedAt}) => (  // avatarUrlを追加
  <ListItem divider button component={Link} to={`/users/${uid}/todos`}>
    {/* 追加ここから */}
    <ListItemAvatar>
      {avatarUrl ?  // #1
        <Avatar alt={displayName} src={avatarUrl} />  {/* #2 */}
        :
        <Avatar>
          <PersonIcon />  {/* #3 */}
        </Avatar>
      }
    </ListItemAvatar>
    {/* 追加ここまで */}
    <ListItemText secondary={moment(_updatedAt).fromNow()}>
      {displayName}さんが {text} を{ eventType === 'CREATE' ? '作成' : '更新'}しました。
    </ListItemText>
  </ListItem>
)

UserUpdatedTodos.propTypes = {
  // 略
  avatarUrl: PropTypes.string,  // 追加
}