★前回の記事
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
動作確認します。
タスク完了フラグを切り替えます
データベースのデータを確認します。recentUpdatedTodos以下のデータにavatarUrlが追加されました。
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, // 追加 }
- avatarUrlの有無によって処理を分けます(#1)。
- avatarUrlが存在する場合は、そのUrlの画像を表示します(#2)。Avatarコンポーネントを使用します。
- avatarUrlが存在しない場合は、PersonIconを表示します(#3)。
実行結果です。リストにユーザアイコン(Avatar)が追加されました。 avatarUrlが無い場合にはPersonIconが表示されます。
以上で最近の更新リストにAvatarを表示することができました。
参考
★次回の記事
★目次