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

★前回の記事

yucatio.hatenablog.com

前回に引き続き、<ul>を<List>に、<li>を<ListItem>に変更します。今回はタスク一覧です。

f:id:yucatio:20190428183941p:plain

タスク一覧でMaterial-UIのListを使用する

<ul>を<List>に変更します。また、後で必要になるので、isOwnTodosをpropsとしてTodoコンポーネントに渡します。

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

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

const TodoList = ({displayName, todos, isOwnTodos, onTodoClick}) => {
  // 中略

  return (
    <div>
      {displayName && <div>{name}のタスク一覧</div>}
      <List>  {/* 変更 */}
        {Object.keys(todos).map(
          (key) => (
            <Todo
              key={key}
              isOwnTodos={isOwnTodos}  // 追加
              {...todos[key]}
              onClick={isOwnTodos ? (() => onTodoClick(key)) : (() => {})} />
          )
        )}
      </List>  {/* 変更 */}
    </div>
  )
}

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

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

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

const Todo = ({onClick, completed, text}) => (
  <ListItem  // 変更
    onClick={onClick}
    {/* styleは下のspanに移動 */}
  >
    <ListItemText>  {/* 追加 */}
      <span style={ {textDecoration: completed ? 'line-through' : 'none'}}>{text}</span>  {/* spanで囲む*/}
    </ListItemText>  {/* 追加 */}
 </ListItem>  {/* 変更 */}
)

実行結果です。Material-UIのListに変更できました。タスクの完了フラグの更新も正常に動作します。

f:id:yucatio:20181201160055p:plain

自身のタスクのみボタンUIにする

自分自身のタスクを表示している時のみクリックで完了フラグを切り替えられるので、その時のみ表示をbuttonにします。

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

const Todo = ({isOwnTodos, onClick, completed, text}) => ( // isOwnTodosを追加
  <ListItem  
    button={isOwnTodos}  // 追加
    onClick={onClick}
  >
    {/* 中略 */}
 </ListItem>
)

Todo.propTypes = {
  isOwnTodos: PropTypes.bool.isRequired,  // 追加
  // 略
}

実行結果です。

自身のタスクの場合↓マウスオーバーで選択した項目の背景色が変わります。

f:id:yucatio:20181201160112p:plain

ログアウト時または他のユーザのタスクの場合↓マウスオーバーしても色は変わりません。

f:id:yucatio:20181201160127p:plain

完了マークと未完了マークの表示

完了か未完了かをアイコンでも表示します。

完了の場合は緑色のチェックマークを表示します。
未完了の場合は、自身のタスクの場合のみ中抜きの四角(□)を表示する。このことによって、自分のタスクは”押せそう”な感じにします。
ListItemTextの位置をそろえるためにinset属性を追加します。

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

import ListItemIcon from '@material-ui/core/ListItemIcon'  // 追加
import green from '@material-ui/core/colors/green'  // 追加
import Done from '@material-ui/icons/Done'  // 追加
import CheckBoxOutlineBlank from '@material-ui/icons/CheckBoxOutlineBlank'  // 追加

// CheckIcon関数コンポーネントを追加
const CheckIcon = (isOwnTodos, completed) => {
  // 完了の場合
  if (completed) {
    return (
      <ListItemIcon>
        <Done nativeColor={green[500]} />
      </ListItemIcon>
    )
  }
  // 未完了の場合
  // 自身のタスクの場合
  if (isOwnTodos) {
    return (
      <ListItemIcon>
        <CheckBoxOutlineBlank />
      </ListItemIcon>
    )
  }
  return null
}

const Todo = ({isOwnTodos, onClick, completed, text}) => (
  <ListItem
    button={isOwnTodos}
    onClick={onClick}
  >
    {CheckIcon(isOwnTodos, completed)}  {/* 追加 */}
    <ListItemText inset>  {/* insetを追加 */}
      <span style={ {textDecoration: completed ? 'line-through' : 'none'}}>{text}</span>
    </ListItemText>
 </ListItem>
)