★前回の記事 yucatio.hatenablog.com /recentUpdatedTodosをDashboardに表示します。Dashboardの下にRecentUpdatedTodosコンポーネントを新規作成します。 moment.jsモジュールのインストール 各タスクの更新時間を表示は、「○分前」「○時間前」など、現在か…

★前回の記事 yucatio.hatenablog.com 前回までで、/recentUpdatedTodosへのデータの追加を行うことはできましたが、これではどんどんデータが溜まって行ってしまうので、個数を制限します。制限を超えたら古いデータを削除します。 firebaseのサンプル(limit…

★前回の記事 yucatio.hatenablog.com 引き続き、addRecentUpdateOnUpdateCompletedを実装します。タスクが更新された時に、/recentUpdatedTodosにデータを追加します。 タスク更新時に"最近の更新"へデータを追加する addRecentUpdateOnUpdateCompletedの処…

★前回の記事 yucatio.hatenablog.com addRecentUpdateOnCreateを実装します。タスクが作成された時に、/recentUpdatedTodosにデータを追加します。 表示したいデータ “最近の更新”は、以下のようになります。ユーザ名をクリックすると、ユーザのタスク一覧へ…

★前回の記事 yucatio.hatenablog.com Cloud Functions for Firebaseで最初に小さいコードを書いて動作確認をします。 手始めに、DBの/todos/{uid}の下にタスクが追加された時と、タスクが更新された時にコンソールへメッセージを表示します。 トリガの動作確…

★前回の記事 yucatio.hatenablog.com アプリにCloud Functions for Firebaseを導入します。 Cloud Functions for Firebaseでできること Cloud Functions for Firebaseでは、ユーザがログインしたり、データベースに書き込まれた際に関数を実行できます。関数…

★前回の記事 yucatio.hatenablog.com 他のユーザのタスクは閲覧できて、自身のタスクは閲覧・編集できるようになったアプリに発生した2つのバグのうち、もう1つのバグを修正します。 バグ再現手順 ログインします 自身のタスク一覧が表示されることを確認し…

★前回の記事 yucatio.hatenablog.com 前回までで他のユーザのタスクは閲覧できて、自身のタスクは閲覧・編集できるようになりました。しかし、まだバグが2つ残っているので、そのうち1つを修正します。 バグ再現手順 ログインします ログインユーザ以外のタ…

★前回の記事 yucatio.hatenablog.com ログインしたユーザ自身のタスク以外は変更できないように修正します。 ログインしたユーザのタスク一覧以外を表示している時は、以下のようにします。 タスク追加フォーム(AddTodoコンポーネント)を非表示にする タスク…

★前回の記事 yucatio.hatenablog.com 読み込むuidの変更 現在の実装では、ログインしたユーザのタスク一覧が表示されています。これを、パスで指定されたユーザのタスクを読み込むように変更します。 src/App.jsで、タスク一覧のURLは、/users/:uid/todosと…

★前回の記事 yucatio.hatenablog.com Navbarを実装して、ナビゲーションリンクを作成します。 ルートパス(Home)へのリンクと、ログインしている場合は、自身のタスク一覧へのリンクを表示します。 リンクは、通常はLinkコンポーネントを使用しますが、ナビゲ…

やりたいこと Twitterのように、投稿日付を表示したい。「○分前」「○時間前」「○日前」など、現在時刻からの経過時間をざっくり表示したい。 moment.jsのfromNowでできる moment.jsのfromNowを使えば実現できます。 Time from now デフォルトの設定では以下…

★前回の記事 yucatio.hatenablog.com ルーティングとreact-router-domとredux統合 アプリににルーティング機能を追加します。 reactにおけるルーティングと、なぜルーティングが必要なのかはこちらがわかりやすいです。 React Router v4 の基本的な考え方と…

★前回の記事 yucatio.hatenablog.com データベースルールファイルを変更します。 todosのルール STEP 3では他のユーザのタスクは見れるので、そのように変更します。 database.rules.json { "rules": { "todos" : { "$uid": { ".read": true, // 変更 // 後…

★前回の記事 yucatio.hatenablog.com STEP 3では、Cloud Functions for Firebaseを使用して、タスクの作成/更新があった時に、"最近の更新”に登録します。 ユーザは"最近の更新"から各ユーザのタスク一覧へジャンプすることができます。 タスク一覧のURLは、…

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。 $ firebase serve http://localhost:5000にアクセスして、動作確認しましょう。 …

★前回の記事 yucatio.hatenablog.com データベースルールファイル(database.rules.json)を変更します。 todosのルール STEP 2で作成したアプリでは、ユーザは自分のタスクのみ見れて、自分のタスクにのみ書き込めるので、ルールをそのように変更します。 dat…

★前回の記事 yucatio.hatenablog.com タスクの書き込みパスを変更します。 todo actionの変更 書き込みパスを、todos/からtodos/${uid}に変更します。念のため、uidが定義されていない時はエラーを出すようにします。 src/actions/index.js export const NOT…

★前回の記事 yucatio.hatenablog.com データのパスの変更 ユーザごとにデータを保存するように変更します。 今までのパスは、/todoの下に各タスクを保存していましたが、STEP 2 では /todos/${uid}のように、各ユーザIDの下にタスクを保存するように変更しま…

★前回の記事 yucatio.hatenablog.com Viewの実装 ログイン機能のviewを作成します。未ログイン時にはGoogleアカウントでログインボタンを表示し、ログイン時には名前とログアウトボタンを表示します。 src/components/Login.js import React from 'react' im…

★前回の記事 yucatio.hatenablog.com 認証機能を実装します。react-redux-firebaseのAPIを利用します。 ユーザ情報の保存先の設定 始めにindex.jsのcreateStoreWithFirebaseを変更します。 src/index.js const createStoreWithFirebase = compose( applyMidd…

★前回の記事 yucatio.hatenablog.com 認証機能作成の前に、認証用のコンポーネントの作成とタスク関連のコンポーネントに分けます。 現在のコンポーネントツリー 新しいコンポーネントツリー(緑色が新規コンポーネント) コードを変更します。 src/components…

★前回の記事 yucatio.hatenablog.com Firebaseを使用したログイン機能 FirebaseではGoogle、Facebook、twitterなどと連携したログイン機能を提供しています。各機能を有効化するために、コンソールで操作します。 ログイン機能の有効化 １. Firebase Console…

★前回の記事 yucatio.hatenablog.com STEP 2では、ユーザごとのタスクを管理できるアプリを作成します。 ログインボタンを設置し、ログイン後にタスクの閲覧、更新を可能にします。 ログイン時↓ 未ログイン時↓ 簡単のため、今回はGoogleアカウントでの認証の…

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。 $ firebase serve http://localhost:5000にアクセスして、動作確認しましょう。 …

★前回の記事 yucatio.hatenablog.com actionsの変更 actions/index.jsのサイズが大きくなってきたので、分割します。また、下記の点もリファクタリングします。 action typeを定数で定義する 個々のactionを定義する index.jsにaction typeをまとめます。 sr…

★前回の記事 yucatio.hatenablog.com タスクの完了フラグの切り替え(toggleTodo)をFirebaseと連携します。 toggleTodoの変更 actionsのtoggleTodoを変更します。 src/actions/index.js export const toggleTodo = id => { return (dispatch, getState, {getF…

★前回の記事 yucatio.hatenablog.com 前回の記事で、Firebaseへの通信を行う前にADD_TODO_REQUEST、通信完了時にADD_TODO_SUCCESS、エラー発生時にADD_TODO_ERROR actionをそれぞれdispatchしました。今回はそれぞれに対するreducerと画面表示を実装します。…

★前回の記事 yucatio.hatenablog.com state更新のタイミング Firebaseへの更新の際に、以下の3つのタイミングでstateを更新したいと思います。 Firebaseへの投稿直前 Firebaseへの通信が成功した時 Firebaseへの通信が失敗した時 Reduxでは、通常1回のdispat…

★前回の記事 yucatio.hatenablog.com getVisibleTodosを更新します。 todosが配列からオブジェクトになったため、filterを直接todosに対して使うことができません。代わりにキーの配列を作成した後、completedの状態でfilterし、reduceを使って空のオブジェ…