パスで指定されたユーザIDでタスクを読み込む (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

読み込むuidの変更

現在の実装では、ログインしたユーザのタスク一覧が表示されています。これを、パスで指定されたユーザのタスクを読み込むように変更します。

src/App.jsで、タスク一覧のURLは、/users/:uid/todosと指定しました。この:uidにマッチする部分は、this.props.match.params.uidで取得することができます。

読み込むタスク一覧のuidの指定はTodoComponentで行なっているので、変更します。

src/components/TodoComponent.js

let TodoComponent = ({authenticating, authenticated, match: { params: {uid}}}) => {  // #1
  // 中略
  return (
    <div>
      <AddTodo uid={uid} />
      <NoticeForTodo />
      <VisibleTodoList uid={uid} />
      <Footer />
    </div>
  )
}

TodoComponent.propTypes = {
  // uid: PropTypes.string,  は削除  #2
  authenticating: PropTypes.bool.isRequired,
  authenticated: PropTypes.bool.isRequired,
  match: PropTypes.shape({  // #3
    params: PropTypes.shape({
      uid: PropTypes.string.isRequired
    }).isRequired
  }).isRequired
}

const mapStateToProps = ({firebase: {auth}}) => ({  // #4
  // uid,  は削除 #5
  authenticating:  !isLoaded(auth),
  authenticated: !isEmpty(auth)
})

uidを引数から削除し、match: { params: {uid}}を追加します(#1)。
ログインしたユーザのuidに関するコードを削除します(#2, #4, #5)。
match.params.uidに対応するpropTypeを追加します(#3)。

認証に関する処理を削除

STEP 2では、ログインしていない場合にタスク一覧を表示していませんでしたが、STEP 3では誰でもタスク一覧が見られるので、ログイン状態に関する機能を削除します。 react-reduxのconnectが不要になりますが、次回また必要になるので残しておきます。

src/components/TodoComponent.js

// import { isEmpty, isLoaded } from 'react-redux-firebase'  を削除

let TodoComponent = ({match: { params: {uid}}}) => (  // #1
  // authenticatingやauthenticatedで分岐していた処理を削除。() => (expression) 形式に変更
  <div>
    <AddTodo uid={uid} />
    <NoticeForTodo />
    <VisibleTodoList uid={uid} />
    <Footer />
  </div>
)

TodoComponent.propTypes = {
//   authenticating: PropTypes.bool.isRequired,  を削除
//   authenticated: PropTypes.bool.isRequired,  を削除
  match: PropTypes.shape({
    params: PropTypes.shape({
      uid: PropTypes.string.isRequired
    }).isRequired
  }).isRequired
}

const mapStateToProps = (state) => ({
//   authenticating:  !isLoaded(auth),  を削除
//   authenticated: !isEmpty(auth)  を削除
})

動作確認

Firebaseのコンソールにログインして、Realtime DatabaseでユーザのIDを取得し、URLを手動で作成して動作確認をしましょう。

f:id:yucatio:20181015205411p:plain:w300

f:id:yucatio:20181015210311p:plain

ユーザごとのタスクが表示されました。

ユーザ名の表示

パスで指定されたユーザのタスクは表示されるようになりましたが、誰のタスクかわからないので、ユーザ名を表示するように変更します。

Firebaseからの読み込み部分を作成します。

src/containers/VisibleTodoList.js

const firebaseQueries = ({uid}) => (
  [
    {path: `users/${uid}/displayName`, type: 'once'},  // #1
    `todos/${uid}`
  ]
 )

const mapStateToProps = ({visibilityFilter, firebase: {data : {users, todos}}}, {uid}) => {  // #2
  return {
    displayName: users && users[uid] && users[uid].displayName,  // #3
    todos: getVisibleTodos(todos && todos[uid], visibilityFilter)
  }
}

ユーザ名をFirebaseから取得します(#1)。パスはusers/${uid}/displayNameです。変更を検知する必要がないので、type: 'once'で読み込んでいます。
stateから読み込む情報に、firebase.data.usersを追加します(#2)。
displayNameをpropsに渡します(#3)。

表示部分を実装します。

src/components/TodoList.js

const TodoList = ({displayName, todos, onTodoClick}) => {  // #1
  // 中略
  return (
    <div>  // #2
      {displayName && <div>{displayName} さんのタスク一覧</div>}  // #3
      <ul>
        // 中略
      </ul>
    </div>
  }
}

TodoList.propTypes = {
  displayName: PropTypes.string,  // #4
  // 後略
}