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

★前回の記事

yucatio.hatenablog.com

Material-UIのListを導入します。 <ul>を<List>に、<li>を<ListItem>に変更します。

最近の更新リストでMaterial-UIのListを使用する

<ul>を<List>に変更します。

src/components/dashboard/recentUpdatedTodos/index.js

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

let RecentUpdatedTodos = ({todos}) => {
  // 中略

  return (
    <div>
      {header}
      <List>  {/* 変更 */}
        {todos.map(({key, value:todo}) =>
          <UserUpdatedTodos key={key} {...todo}/>
        )}
      </List>  {/* 変更 */}
    </div>
  )
}

続いて<li>を<ListItem>に変更します。 <ListItem>内のテキストは<ListItemText>で囲みます。

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

import ListItem from '@material-ui/core/ListItem'  // 追加
import ListItemText from '@material-ui/core/ListItemText'  // 追加

const UserUpdatedTodo = ({text, eventType, uid, displayName, _updatedAt}) => (
  <ListItem>  {/* 変更 */}
    <ListItemText>  {/* 追加 */}
      <Link to={`/users/${uid}/todos`}>{displayName}</Link>さんが {text} を{ eventType === 'CREATE' ? '作成' : '更新'}
      しました。 ({ moment(_updatedAt).fromNow()})
    </ListItemText>  {/* 追加 */}
  </ListItem>  {/* 変更 */}
)

実行結果です。

f:id:yucatio:20181130133919p:plain

Material-UIのListに変更ができました。

見た目の調整

さらに変更していきます。

divider(境界線)を入れる

リストの各項目の間に線を入れます。

src/components/dashboard/recentUpdatedTodos/UserUpdatedTodo.js

const UserUpdatedTodo = ({text, eventType, uid, displayName, _updatedAt}) => (
  <ListItem divider>   {/* dividerを追加 */}
    <ListItemText>
      {/* 略 */}
    </ListItemText>
  </ListItem>
)

実行結果です。項目間にグレーの線が入りました。

f:id:yucatio:20181130134113p:plain

secondaryテキスト

更新時間(○時間前の表示)をsecondaryテキストとして表示します。

src/components/dashboard/recentUpdatedTodos/UserUpdatedTodo.js

const UserUpdatedTodos = ({text, eventType, uid, displayName, avatarUrl, _updatedAt}) => (
  <ListItem divider>
    <ListItemText
      secondary={moment(_updatedAt).fromNow()}>  {/* secondaryを追加 */}
      <Link to={`/users/${uid}/todos`}>{displayName}</Link>さんが {text} を{ eventType === 'CREATE' ? '作成' : '更新'}
      しました。     {/* 更新時間を削除 */}
    </ListItemText>
  </ListItem>
)

実行結果です。更新時間が2行目に表示され、文字色が薄くなりました。

f:id:yucatio:20181130134308p:plain

項目を選択した時にリンク先に飛ぶように変更

現在の実装では、ユーザ名をクリックした時にリンク先に飛ぶようにしていますが、リストの項目が選択された時にリンク先に飛ぶように変更します。

ListItemのbutton属性を使用することで各項目がボタンになり、マウスオーバーした時に色が変わります。

react-routerのLinkとListItemを同時に使うには、ListItemのcomponent属性にLinkコンポーネントを渡します。

src/components/dashboard/recentUpdatedTodos/UserUpdatedTodo.js

const UserUpdatedTodos = ({text, eventType, uid, displayName, avatarUrl, _updatedAt}) => (
  <ListItem divider button component={Link} to={`/users/${uid}/todos`}>  {/* 変更 */}
    <ListItemText
      secondary={moment(_updatedAt).fromNow()} >
      {displayName}さんが {text} を{eventType === 'CREATE' ? '作成' : '更新'}しました。  {/* Linkタグを削除 */}
    </ListItemText>
  </ListItem>
)