Code Monkey home page Code Monkey logo

teamb's Introduction

ghAction のテスト ghAction のテスト 2

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

teamb's People

Contributors

shuri-honda-1101 avatar niizima1203 avatar kei-nishikawa48 avatar shio0522 avatar

Watchers

avatar avatar

teamb's Issues

Googleログイン時の警告

概要

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ログインを行なった時

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

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

対応策

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

アプリ名考案

概要

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

期限

2021/07/04

仕様

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

<Catalog.js>タグ検索機能

以下、後日更新

概要

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

<Edit.js>追加済みのお酒で条件分岐＆アップデート機能

概要

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

期限

2021/7/7

仕様

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

タスクの細分化

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

関連タスク

#<issue 番号>

デザインカンプの作成

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

新規メモ作成ボタンを押した際に、既存か新規作成か選択可能にする

概要

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

期限

仕様

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

タスクの細分化

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

関連タスク

#<issue 番号>

<Edit.js>画像のトリミング機能

概要

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

期限

仕様

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

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

タスクの細分化

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

関連タスク

#<issue 番号>

SignUpページのスタイル＆機能

概要

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

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

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

Itemのスタイルを適用する

概要

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

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

Configページの作成

概要

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

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

ModalItemChoiceのスタイルを適用する

概要

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

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

item選択のfix

概要

期限

仕様

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

タスクの細分化

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

関連タスク

#80

<Edit.js>タグ追加をモーダルウィンドウへ切り出す

概要

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

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

期限

仕様

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

タスクの細分化

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

関連タスク

#<issue 番号>

<Edit.jsのアップデート>新規メモ作成機能

概要

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

<Edit.js>firestoreへデータ保存のアップデート

概要

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

期限

仕様

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

タスクの細分化

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

関連タスク

#<issue 番号>

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

概要

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

<Catalog.js>dateで並び替え

概要

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

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

ログイン状態によるページの切り替え機能

概要

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

期限

仕様

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

タスクの細分化

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

関連タスク

#<issue 番号>

edit.js作成、editコンポーネントをApp.jsに配置

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

ModalRangePickerにクリア機能を作成する

概要

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

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

<Item.js>お酒詳細ページの表示

概要

#49 の終了後に実装する

期限

2020/7/7

仕様

このように表示してください。
スクリーンショット 2021-06-28 22 01 07

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

タスクの細分化

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

関連タスク

#49

Edit.jsのfix

概要

スクリーンショット 2021-08-06 21 15 37

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

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

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

ログイン機能のアップデート

概要

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

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

<Item.js>メモごとの削除機能

以下、後日更新

概要

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

<catalog.jsのアップデート>お酒一覧の表示

概要

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

期限

仕様

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

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

タスクの細分化

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

関連タスク

#2

Item.jsへの動的ルーティングの設定

概要

#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が以下のようになる
スクリーンショット 2021-06-28 20 32 57

タスクの細分化

  • 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

Catalog.jsをユーザーごとに動的なルーティングにする　

概要

ログイン完了後のページ遷移をユーザーごとの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

Editのスタイルを適用する

概要

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

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

<Item.js>まとめて削除機能

以下、後日更新

概要

期限

仕様

タスクの細分化

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

関連タスク

#<issue 番号>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.