ログインしたユーザ自身のタスク以外は変更できないように修正する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

ログインしたユーザ自身のタスク以外は変更できないように修正します。

ログインしたユーザのタスク一覧以外を表示している時は、以下のようにします。

タスク追加フォーム(AddTodoコンポーネント)を非表示にする
タスクをクリックされた時に、タスク完了フラグの切り替えをしない

ログインしたユーザ自身のタスク一覧でないときは、タスク追加フォーム(`AddTodo`コンポーネント)を非表示にする

自身のタスク一覧でないときは、タスク追加フォーム(AddTodoコンポーネント)を非表示にします。

パスのuidとログインしているユーザののuidを比較して、違っている場合はAddTodoコンポーネントを非表示にします。パスのuidとログインしているユーザののuidが同一かどうかはisOwnTodosという変数で管理します。

src/component/TodoComponent.js

let TodoComponent = ({isOwnTodos, match: { params: {uid}}}) => (  // #1
  <div>
    {isOwnTodos && <AddTodo uid={uid} />}  {/* #2 */}
    <NoticeForTodo />
    <VisibleTodoList uid={uid} />
    <Footer />
  </div>
)

TodoComponent.propTypes = {
  isOwnTodos: PropTypes.bool.isRequired,  // #3
  // 後略
}

const mapStateToProps = ({firebase: {auth}}, {match}) => ({
  isOwnTodos: auth.uid === match.params.uid,  // #4
})

isOwnTodosをpropsから受け取ります(#1)。
isOwnTodosがtrueの時のみAddTodoコンポーネントを描画します(#2)。
isOwnTodosのPropTypeを追加します(#3)。
ログインしているユーザのuid(state.firebase.auth.uid)と、パスで指定されたuid(this.props.match.params.uid)を比較して、同一ならば、isOwnTodosの値をtrueにします(#4)。

ログインしたユーザ自身のタスク一覧でないときは、タスク完了フラグの切り替えをしない

上記と同様に、自身のタスク一覧でないときは、タスク完了フラグの切り替えをしないように処理を書き換えます。

src/component/TodoComponent.js

let TodoComponent = ({isOwnTodos, match: { params: {uid}}}) => (
  <div>
    {isOwnTodos && <AddTodo />}
    <NoticeForTodo />
    <VisibleTodoList uid={uid} isOwnTodos={isOwnTodos} />  {/* #1 */}
    <Footer />
  </div>
)

VisibleTodoListにisOwnTodosを渡します(#1)。このpropsは、VisibleTodoListを通して、TodoListに渡されます。

src/component/TodoList.js(#1, #2などのコメントは削除してください)

const TodoList = ({displayName, todos, isOwnTodos, onTodoClick}) => {  // #1
  // 中略
  return (
    <div>
      {displayName && <div>{displayName} さんのタスク一覧</div>}
      <ul>
        {Object.keys(todos).map(
          (key) => (
            <Todo
              key={key}
              {...todos[key]}
              onClick={isOwnTodos ? (() => onTodoClick(key)) : (() => {})} />  {/* #2 */}
          )
        )}
      </ul>
    </div>
  )
}

Todo.propTypes = {
  // 中略
  isOwnTodos: PropTypes.bool.isRequired,  // #3
  // 後略
}

isOwnTodosをpropsから受け取ります(#1)。
isOwnTodosがtrueの時のみ、onTodoClickが実行されるように変更します(#2)。コードが読みにくいですが、3項演算子を使用して、isOwnTodosがtrueの時() => onTodoClick(key)を返し、falseの時() => {}を返します。
isOwnTodosのPropTypeを追加します(#3)。

おまけ: 自身のタスクの時、ユーザ名を"あなた"に修正する

ログインしたユーザ自身のタスク一覧が表示されている場合は、”〇〇さんのタスク一覧”でなく、”あなたのタスク一覧”と表示するよう、ついでに変更します。

src/component/TodoList.js

const TodoList = ({displayName, todos, isOwnTodos, onTodoClick}) => {
  // 中略
  const name = isOwnTodos ? 'あなた' : `${displayName} さん`;
  return (
    <div>
      {displayName && <div>{name}のタスク一覧</div>}  {/* 変更 */}
      <ul>
      // 中略
      </ul>
    </div>
  )
}