shuri-honda-1101 / teamb Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://teamb-d552c.web.app
Home Page: https://teamb-d552c.web.app
選択した期間をリセットできるように、クリア機能を作成する
#<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 番号>
<div>
を作り、エクスポート)useParamsを使用し、idが存在する時(既存に追加)、undefinedの時(新規作成)で条件分岐し、処理を分ける
2021/7/7
undefinedの時(新規作成)は今まで実装したもの(add)にする。
idが存在する時(既存に追加)は、既に存在するお酒のドキュメントをupdate()
で更新する
既存に追加の時は、value(初期値)を選択したお酒の名前、タグ、画像にすること。
#<issue 番号>
デザインカンプを参考にしながら、materialUIとstyled-componentsを使ってEditのスタイルを整える
#<issue 番号>
最新の日付順にお酒の表示を並び替えする
#<issue 番号>
#<issue 番号>
#49 の終了後に実装する
2020/7/7
追加:アコーディオン表示(https://material-ui.com/ja/components/accordion/)
catalog.jsにて登録されたお酒の一覧を表示する
firestoreのコレクションからドキュメントの一覧を展開して表示
モーダルウィンドウ外をクリックしたときに、モーダルウィンドウを閉じるよう機能変更
#<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 番号>
#<issue 番号>
変更したfirestoreのデータ構造に合わせて、データ保存の手順を変更する
#<issue 番号>
Edit.jsを編集し、新規メモ作成機能を作る
firestoreのcollectionは、
/<お酒ごとのdoc>/memos/<投稿ごとのmemo>
送信時に
お酒のドキュメントに必要なプロパティ
メモドキュメントに必要なプロパティ
<div>
を作り、エクスポート)#<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
<div>
を作り、エクスポート)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 番号>
<div>
を作り、エクスポート)GoogleのロゴはGoogle公式から取ってくる
#<issue 番号>
ログインしている時はcatalog.jsへ
ログインしていない時はLogin.jsへ
自動的にページ遷移する
プロバイダーを作成し、ユーザー情報を子孫コンポーネントで扱えるようにして下さい。
初回レンダリング時にもページ遷移が行われるようにして下さい。
user
にユーザー情報を保持させるuser
を子孫コンポーネントで扱えるようにする#<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
/user/:uid
)http://localhost:3000/user/[ユーザーID]
となっていることを確認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ログインを行なった時
現状は困らないが、ゆくゆくはエラーの原因になるかもしれない
調べてみたけど現状わかりませんでした。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.