u-hoshi / mokumokuapp

【技育展登壇作品】エンジニアが安心して「もくもく会を開催・参加できる」ためのアプリです。

mokumokuapp's Issues

何も入力せず決定を押すと真っ白になる

× Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
山際さんから

@typescript-eslint/ban-ts-commentに関して

src/components/pages/signupにて

// @ts-ignore
await storage.ref(`/images/${imageName.name}`).put(imageName.originFileObj)

を使用としたらターミナルに以下のエラーが出た

src/components/pages/Signup.tsx
  Line 38:13:  Do not use "@ts-ignore" because it alters compilation errors  @typescript-eslint/ban-ts-comment

Atomic Designでコンポーネントを切り分け

動く最低限の機能

• 会を登録
• 会を表示

するためのコンポーネントを洗い出して切り分け

url直叩きだと404になる

以下の記事を参考に修正する

https://rexben.medium.com/how-to-fix-page-not-found-on-netlify-with-react-router-dom-e0520692be5

予定をカードではなくカレンダーで表示させる

https://ant.design/components/calendar/

ヘッダーの作成

netlifyにステージング環境と本番環境を準備

画像の大きさを小さくしないとアップロード出来ない時がある

コンソール

request.js:97 POST https://www.mocky.io/v2/5cc8019d300000980a055e76 net::ERR_EMPTY_RESPONSE

上記のurlの中身

{
    "name": "xxx.png",
    "status": "done",
    "url": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
    "thumbUrl": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
}

画像サイズの問題かな？複雑そうなので一旦後回し

yearに開催日順にデータを入れる

会を登録する際にモーダルを表示させるかについて

https://ant.design/components/modal/

色んな人の意見を聞きたい

参加者をホバーした時に名前を表示

シュンスケさんから

サインアップできない[画像]

アイコンを入れても空欄判定される

ユーザー設定が連続で出来ない

アイコン画像の追加

過去のもくもく会は色などを変更する

シュンスケさんから

アイコンの大きさや位置を修正するとエラーが表示される

react-dom.development.js:6202 Unable to preventDefault inside passive event listener invocation.

のように表示される

ユーザが自分の情報を変更できるページ

カードのスタイル

• 会の表示
• ユーザに応じてボタンの変更
• 参加/参加取り消しボタン
• 会の取り消しボタン

ログインしてない状態の場合ログインページにリダイレクト

ユーザー一覧の表示

タイトルでホームに飛ぶようにする

ルーティングの設定

もくもく会の開始時間になったらslackに通知が行くようにする

管理者がユーザに管理者権限を渡せるようにする

日付のレイアウトを変更

現状は
開始時間　月日時間
終了時間　月日時間

だが

あと予定の入力画面だけど、endが別の日になるパターンってないもしくはするべきじゃないと思ったので、UI的に
date、start-time、end-timeで入力項目にするといいかなって思った！

イワサキさん

firebaseのキーを非公開にする

スイッチをラジオボタンに変更

スイッチだと押さないとわからないため、初見さんに不親切

ラジオボタンであれば予めわかる

スマホ対応

https://ant.design/components/drawer/

使えそうなドロワーメニュー

unmountについて

index.js:1 Warning: 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.

もくもく会が追加されたslackに通知がいく

サインアップ時にパスワードを見えないようにする

イワサキさん

ユーザの一覧表示

管理者のみ確認出来るようにする

ボタンの上に参加・設定などとタイトルつける

カテゴリで分けて検索しやすくする

• フロント
• バック
• インフラ

3つに分ける

会を追加する機能

開催数・参加数によってバッジを付与

カードの内容を見やすくしてほしい

時間や内容などそれぞれを切り分けたら良いかも

シュンスケさんから

使い方がわかるページを作成

ユーザ設定の隣に「使い方」としてリンクを置いておくのが良さそう

react-routerになっている

Router.tsxを確認

react-router-domのつもりだったけどreact-routerになっている

西川さんより

ユーザー設定・ログアウトのホバー時に色変更

クリックできるのかわかりづらい

サインアップページに飛ぶボタンがダサい

イワサキさん

カードのユーザの情報持たせる

とりあえずは

• 名前
• 画像
  の二つ

lessファイルについて

現時点でJSXに直接書いてるものを再整理する必要がある。

サインアップ・ログイン・ログアウト機能の実装

ログアウトの位置を右上に修正

/idにユーザ情報を持たす

参加者の所でユーザをクリックするとユーザのプロフィールなどが確認できる

別のグループに移動できるようにする

応募前の詳細修正

• 会を追加したときにmessageを表示
• #50
• ログインとサインアップの切り替えを容易にする
• ログインボタンの下にサンプルアカウントのメアドとパスワードを表示する

antdのメッセージについて https://ant.design/components/message/

ステージングと本番のfirebaseプロジェクトを分ける

参考になりそうな記事
https://qiita.com/hirothings/items/c6140526fbe0bbe669c1

firebaseと連携