shuri-honda-1101 / teamb Goto Github PK

概要

選択した期間をリセットできるように、クリア機能を作成する

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

置き換え可能な部分をmaterialUIに置き換えてください

期限

仕様

レーティングラジオボタン → https://material-ui.com/components/rating/
ボタン→https://material-ui.com/components/rating/
日付→https://material-ui.com/components/rating/
input type=text→ https://material-ui.com/components/rating/

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

• jsファイルを作成する
• jsファイルの基盤を作成（関数を作り、空の<div>を作り、エクスポート)
• 作成したファイルをコンポーネントとして、App.jsにインポート及び配置

概要

useParamsを使用し、idが存在する時（既存に追加）、undefinedの時（新規作成）で条件分岐し、処理を分ける

期限

2021/7/7

仕様

undefinedの時（新規作成）は今まで実装したもの（add)にする。
idが存在する時（既存に追加）は、既に存在するお酒のドキュメントをupdate()で更新する
既存に追加の時は、value（初期値）を選択したお酒の名前、タグ、画像にすること。

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

• create-react-appする

概要

デザインカンプを参考にしながら、materialUIとstyled-componentsを使ってEditのスタイルを整える

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

最新の日付順にお酒の表示を並び替えする

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

#49 の終了後に実装する

期限

2020/7/7

仕様

このように表示してください。

追加：アコーディオン表示（https://material-ui.com/ja/components/accordion/）

タスクの細分化

• firestoreからお酒のデータを取得(doc.idを追加)
• firestoreからmemosのデータを取得(doc.idを追加)（orderByで日付順にする）
• 画像、ドリンク名、レーティングを表示
• 今日飲んだ！ボタン
• まとめて削除ボタン
• タグ一覧（TagListコンポーネント使用）
• ulタグを作り、その中にmemoListItemコンポーネント（新規作成）をmap関数を用いて配置
• memoLisstItemで、日付、メモ内容を表示
• materialUIを使ってアコーディオン表示にする
• memoListItemでEditへのリンクと、削除ボタンを追加
• レンダリング結果を確認

関連タスク

#49

概要

catalog.jsにて登録されたお酒の一覧を表示する

期限

仕様

firestoreのコレクションからドキュメントの一覧を展開して表示

• 画像
• お酒の名前
• レーティング
• タグ

タスクの細分化

• ログインしているuserと同じIDを持つコレクションを取得
• onSnapshot関数でドキュメントのデータを持つ新しい配列を作成
• それぞれお酒ごとに別コンポーネントに切り出して画面上にレンダリング

関連タスク

#2

概要

https://xd.adobe.com/view/7c6b87e3-303e-4a2d-a45c-dd1c25517587-2938/screen/ba123d35-26bf-495a-bd4f-f0f3b9bc7d7f/specs/

モーダルウィンドウ外をクリックしたときに、モーダルウィンドウを閉じるよう機能変更

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

ModalItemChoiceでお酒を選択後、ページ遷移するとWarningが出る

背景

ModalItemChoiceでお酒を選択後OK、または新規作成を押すと
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
というWarningが出る。

修正しないとどう困るか又は良くなるのか

対応策

unMount時のメモリリークが問題のようです。
https://qiita.com/macotok/items/87a260988376bcfa2ffd

概要

デザインカンプを参考にしながら、ModalItemChoiceのスタイルを整える

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

• ReactRouterの導入
• App.js内のコンポーネントの各リンクを作成

概要

• タグリストからタグの削除
• パスワード変更

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

変更したfirestoreのデータ構造に合わせて、データ保存の手順を変更する

期限

仕様

• dateの保存をtimestampに変更する
• drinksコレクション内、お酒ドキュメントに、memosのdateをdates配列として保存する
• tagsコレクションを追加、全てのお酒のタグをtagsにも保存する

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

Edit.jsを編集し、新規メモ作成機能を作る

期限

仕様

• 画像送信
• レーティング（ラジオボタン）
• タグ入力/ 追加ボタン（追加ボタンを押すと配列として保存される）
• 追加した内容が表示される(例：TagListコンポーネント、TagListItemコンポーネントを作成する)
• お酒の名前入力
• 日付入力
• メモ入力

firestoreのcollectionは、
/<お酒ごとのdoc>/memos/<投稿ごとのmemo>

送信時に

• 各ユーザーIDのコレクションを作成(指定すれば自動で作成される）
• コレクションに入力されたお酒ごとののドキュメントを作成(IDは一意）（addすれば自動で作成）
• その直下にmemosというサブコレクションを作成（指定すれば自動で作成）
• memosサブコレクションに送信されたメモのドキュメントを作成（addすれば自動で作成）

お酒のドキュメントに必要なプロパティ

• memosサブコレクション
• name
• image
• rate
• tags(配列)

メモドキュメントに必要なプロパティ

• date
• memo

タスクの細分化

• Edit.jsにformタグを作る
• form内に画像、レーティング、お酒の名前、日付、メモ、タグを入力するinputタグを配置
• タグの追加ボタンを押すと、tagsという配列として値を保持する(カリキュラムのtodoリストを作った要領で)
• タグを追加するとコンポーネントを通じて表示される
• 送信時に、storageに画像をアップロード→ダウンロードでURLを取得
• firestoreの<ユーザーID>コレクションにname,image,tags,rateをadd（これで一意のIDを持つドキュメントが作成される）
• ↑のドキュメントを指定(↑の関数の戻り値)→memosサブコレクションにdate, memoをadd

関連タスク

#3

• jsファイルを作成する
• 作成したjsファイルの基盤を作成（関数を作り、空の<div>を作り、エクスポート)
• 作成したファイルをコンポーネントとして、App.jsにインポート及び配置

概要

期限

仕様

• pタグのフォントサイズ設定忘れ
• orは大文字
• orのボタンコンポーネントとの距離が均等ではない。
• liタグのfont-sizeの設定忘れ
• 戻るボタンではなく、モーダルウィンドウ外をクリックした時に閉じる機能（戻るボタンは不要）
• pタグと、SModalInnerItemのマージン設定忘れ
• SModalInnerのborder-radiusが仮設定のままになっている。
  -「新しく追加する」→「新規作成」
• ボタン内部のletter-spacingの設定忘れ

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#80

概要

https://xd.adobe.com/view/7c6b87e3-303e-4a2d-a45c-dd1c25517587-2938/screen/db72e97b-a702-4507-a43d-5ed08a26d94f/specs/

• パスワード確認用inputを追加。
• パスワードとパスワード確認の文字列が一致した時のみサインアップ可能に機能を変更
• サインアップページのスタイルを適用する

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

既存のアイテムに追加保存しようとした時にエラーが出る

その他、問題がないか、実際にfirebaseに投稿してみて結果を検証する。

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

以下、後日更新

概要

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

Catalog.js内、新規メモ作成ボタンを押した際に、お酒の選択画面（あるいは新規作成）を選べるようにする。

期限

仕様

モーダルウィンドウ上に処理を切り出す
モーダルウィンドウはライブラリでも自作でも良い。
既存のお酒を選択した場合は、LinkをEdit/お酒のidへ。新規作成の場合はEditへLinkする。

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

以下、後日更新

概要

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

デザインの参考になりそうなモバイルサイトがあったら、このissueのにURLをコメントとして残してください。

概要

#50 が終了したら、
各drinkItemをクリックした時に動的なルーティングを行う

期限

仕様

/user/ [ユーザーID] /items/ [各お酒ドキュメント(firestore)のID]

以下のリンク先を参考に導入する
https://zenn.dev/h_yoshikawa0724/articles/2020-09-22-react-router
https://reffect.co.jp/react/react-router#i-5
https://ajike.github.io/react-router-dom_hooks/#useparams

Item.jsのレンダリングとURLが以下のようになる

タスクの細分化

• App.jsのitemへのルート遷移を変更。pathを"/user/:uid/items/:id"とする。
• DrinkItem.js内、useRouteMatchを用いて現在のurlを取得する
• DrinkItem内部、liタグの中にLinkタグを追加し、その他の要素をLink内部に移動する
• Linkのルート遷移、to="${[現在のURLを格納した変数]}/items/${[お酒ドキュメントのIDを格納した変数]}"
• Item.js内でuseParamsを用いてお酒ドキュメントのIDを取得
• h1タグに[お酒ドキュメントのID]をレンダリングする

関連タスク

#50

• edit.jsファイルを作成する
• edit.jsファイルの基盤を作成（edit関数を作り、空の<div>を作り、エクスポート)
• 作成したファイルをコンポーネントとして、App.jsにインポート及び配置

概要

ModalTagChoiceを流用して、タグ追加をモーダルウィンドウへ切り出す

タグはmaterialUIのChipを使用する
https://material-ui.com/ja/components/chips/

期限

仕様

ModalTagChoiceにはEditで表示した時には「新しくタグを追加」という項目が表示されるようにする
タグを追加すると、firestoreのtagsに追加される
選択したタグを、OKを押した時にEdit.jsに表示する
選択したタグを削除する機能

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

以下、後日更新

概要

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

アプリ名を考えましょう！

期限

2021/07/04

仕様

思いついたらこのissueにコメントを残していってください。

概要

Edit.jsで画像を選択時にトリミングができるようにする。

期限

仕様

スマホ操作することを考えて、タッチイベント及びレスポンシブ対応のライブラリreacr-image-cropを使用する。

トリミングはモーダルウィンドウで表示させる

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

デザインカンプを参考にしながら、materialUIとstyled-componentsを使ってItemのスタイルを整える

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

Googleログインを作成
パスワードを忘れた時の機能を作成

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

• catalog.jsファイルを作成する
• catalog.jsファイルの基盤を作成（catalog関数を作り、空の<div>を作り、エクスポート)
• 作成したファイルをコンポーネントとして、App.jsにインポート及び配置

概要

https://xd.adobe.com/view/7c6b87e3-303e-4a2d-a45c-dd1c25517587-2938/screen/d648ab62-04fe-4911-9315-1bdc6dfa01b3/specs/

GoogleのロゴはGoogle公式から取ってくる

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

ログインしている時はcatalog.jsへ
ログインしていない時はLogin.jsへ
自動的にページ遷移する

期限

仕様

プロバイダーを作成し、ユーザー情報を子孫コンポーネントで扱えるようにして下さい。
初回レンダリング時にもページ遷移が行われるようにして下さい。

タスクの細分化

• AuthProviderコンポーネントを作成
• AuthProviderでログイン時にstate userにユーザー情報を保持させる
• AuthService内で、contextオブジェクトを作成し
• {children}プロップスをプロバイダーでラップし、userを子孫コンポーネントで扱えるようにする
• AuthContextとAuthProviderをエクスポートする
• LoggedInRoute.jsの作成
• ログイン済みの場合はcatalog.jsへ遷移させる
• 初回レンダリング時もページ遷移が行われるように、Loginコンポーネントを改修する

関連タスク

#<issue 番号>

以下、後日更新

概要

期限

仕様

タスクの細分化

• 細かな作業手順があれば書いていく

関連タスク

#<issue 番号>

概要

ログイン完了後のページ遷移をユーザーごとのURLに変更する

期限

仕様

pathは、
/user/ [各ユーザーID]
とする

Homeコンポーネントを描写後、自動でLoginに遷移、Login済みであれば、ユーザーごとのcatalogへ遷移させる

以下のリンク先を参考に導入する
https://zenn.dev/h_yoshikawa0724/articles/2020-09-22-react-router
https://reffect.co.jp/react/react-router#i-5
https://ajike.github.io/react-router-dom_hooks/#useparams

タスクの細分化

• Homeコンポーネントを新規作成
• App.jsのLoggeInRouteタグをHomeコンポーネントへ変更
• 新規Routeタグを追加、各ユーザーIDをpathにしたcatalogコンポーネントを指定(/user/:uid)
• Login.js、ログイン済みの時のリダイレクト先のpath指定を変更
• ログインボタンを押した時のページ遷移のpath指定を変更
• ページ遷移のURLがhttp://localhost:3000/user/[ユーザーID]となっていることを確認

関連タスク

#49

概要

Googleログイン時に、
A boolean is being passed as a fourth parameter to window.open. This is not used and may cause an exception in a future release.
（ブール値が4番目のパラメーターとしてwindow.openに渡されています。これは使用されず、将来のリリースで例外が発生する可能性があります。）
という警告が出る

背景

googleログインを行なった時

修正しないとどう困るか又は良くなるのか

現状は困らないが、ゆくゆくはエラーの原因になるかもしれない

対応策

調べてみたけど現状わかりませんでした。