shoynoi / prebill_react Goto Github PK

• 更新日を迎えたサービスを抽出し、そのサービスを登録しているユーザーに対してメールを送信するRakeタスクを追加
• メールを送信する処理を実装
• メールのテンプレートを実装(PreBillで実装したものを流用する予定)

• サービス更新のAPIを利用してサービスを更新するフォームを表示
• サービス更新をリクエストする処理を実装
• レスポンスに応じたページを表示

• PresetServiceモデルを追加
• PreBillで利用しているマスタデータを使ってデータを投入できるようにする

• APIからマスタに登録済みのサービス一覧を取得する処理を実装
• 入力補完機能を実装
  • PreBillではautocompleterを利用していたが、流用できるかわからないので、Reactで同じ機能を持つライブラリを探してみる

• パスワードリセット用のテンプレートファイルを作成
• パスワードリセット用のコンポーネントを作成
• パスワードのリセットが要求されたらリセット用のフォームへのリンクを含んだメールを送信
• パスワードリセットフォームから新しいパスワードを設定し、ユーザー情報を更新
• Flashメッセージを表示し、ログイン状態にする

現在、アカウントを作成したらログインせずにトップページにリダイレクトされる。
そこからログインする必要があるため、アカウントを作成したら自動的にログイン状態となるようにしたい。

元の実装では、メールアドレスを確認するフェーズがある。アカウント作成直後にはログイン状態にはならないものの、メールアドレスの確認後は自動的にログイン状態となるようになっている。

今回の実装ではメールアドレス確認の優先度は低いため、ひとまずアカウントを作成したらログイン状態となるようにしておく。

• 年間合計利用額を算出する処理を追加し、トップページ(サービス一覧ページ)に表示
• 月平均利用額を算出する処理を追加し、トップページ(サービス一覧ページ)に表示

• ユーザー認証gemを用いてUserモデルを追加
  • PreBillと同じsorceryを利用する予定
• ユーザー登録用のテンプレートファイルを作成
• サーバー側でユーザー登録処理を実装

• ログイン用のテンプレートファイルを作成
• ログイン用のコンポーネントを作成
• ヘッダーにアカウント作成・ログインページのリンクを追加
• 仮のランディングページを作成(デザイン等は書かない)
• ログインする処理を実装
  • ログイン後はトップページ(サービス一覧ページ)にリダイレクト
• ログアウトする処理を実装
  • ログアウト後はトップページ(ランディングページ)にリダイレクト
• Flashメッセージを表示

• Serviceモデルを作成
• バリデーションを追加
• サービスを登録するためのテンプレートファイルを作成
• DBへの登録処理を実装

#52 の実装中に発見
詳細は上記PRに記載した。

• サービス編集ページのテンプレートファイルを作成
• サービスの更新処理を実装

• サーバー側で(ユーザー毎ではない)サービスの一覧を取得するAPIを作成

• ActionMailerのセットアップ
• 登録されているサービスの通知日を迎えたらメールで通知する機能を追加
  • 通知日が今日であるサービスを抽出する処理を追加
  • メール送信機能の実装
  • 該当するユーザーに対してメールを送信するRakeタスクを実装

• トップページにヘッダーを作成
• 未ログイン時に表示するフッターを作成
• ヘッダーにユーザー設定やログアウト処理を行うリンクのリストを表示するドロップダウンを設置

• サービス一覧ページを作成
  • サービス一覧を取得する処理を実装
  • 個々のサービスの情報をページ上に表示させる

• ユーザー登録フォームのコンポーネントを作成
• レスポンスに応じたページを表示

• ユーザー登録で作成したフォームコンポーネントを表示してユーザー情報の更新ができるようにする
• サーバー側でユーザーの更新処理を実装
• 正常に更新されたらトップページ(サービス一覧ページ)リダイレクト
• 検証エラーの場合は再度更新フォームをrender
• Flashメッセージを表示

• サービス一覧ページに削除ボタンを設置
• サービスの削除をリクエストする処理を実装
• レスポンスに応じたページを表示

• ユーザー退会用のテンプレートファイルを作成
• コンポーネントを作成
• ユーザー設定ページの下部にユーザー退会ページへのリンクを追加
• ユーザーの削除処理を実装
• 正常に削除されたらトップページ(ランディングページ)にリダイレクト
• Flashメッセージを表示

• eslintの導入
• eslintの設定を追加
  • https://hibbard.eu/rails-react-crud-app/ で利用していたeslint-config-airbnbを利用する予定

• rubocopを導入
• 設定を追加
  • PreBillで利用している設定と同様の設定(railsで利用されているもの)を利用する予定

• リスト表示するコンポーネントを作成
  • ボタンのコンポーネントを作成
  • ヘッダーのコンポーネントを作成
  • 個々のサービスを表示するコンポーネントを作成

• サービス登録のAPIを利用してサービスを登録するフォームを作成
• サービス登録をリクエストする処理を実装
• レスポンスに応じたページを表示させる

• 金額をフォーマットする
  • ¥1,000のように表示させる
• メモ欄のフォーマット
  • 改行を反映させる
  • URLが含まれていたときはリンクとして表示させる
• 日付(更新日、通知日)のフォーマット
  • 2020年6月29日のように整形
    • 日付が今年の場合は年は省略させる
    • 日付が今年より先の場合は年数も含めて表示
• プランの表示を日本語で表示させる

• サーバー側でサービスを削除する機能を実装

• アカウント作成時に入力されたメールアドレス先にメールを送信
• 添付されたリンクにアクセスするとサービスが利用可能になるようにする(この時点でログイン状態となる)
• トークンの有効期限を設定(1週間)
• Flashメッセージを表示

• Notificationモデルを作成
• 更新日を通知するRakeタスクにNotificationを作成する処理を追加
• ヘッダーに通知アイコンを配置
• 通知用のコンポーネントを作成
  • 通知アイコンをクリックしたときにドロップダウンで通知が表示されるようにする
  • 通知があるときには通知アイコンにマークを表示
  • 通知内容をクリックしたときに既読状態になるようにする

• Serviceモデルにuser_idを追加
• トップページにはユーザーの登録したサービスのみが表示される
• ユーザーが退会したら登録済みのサービスも削除