Ishimoto Koji

reactへ書き換えようとして気づいたのですが、event.vue, events.vueは他のvueのコンポーネントやライブラリを使って依存しているのでそのままの書き換えが出来ません。 今回のevent関連のコンポーネントが依存しているのはPagerとLoadingListPlaceholder、UserIconです。LoadingListPlaceholderとUserIconは簡単にreactで書き直せると思いますが、Pagerは外部の[ライブラリ](https://www.npmjs.com/package/vuejs-paginate)を使っているため置き換えが難しいです。 個人的には[vuera](https://github.com/akxcv/vuera)のようなreact内でvueを使えるようにするライブラリを使ってreactへの置き換えが進むまで共存しやすいようにするのが良いと思うのですがどうでしょうか？

@komagata なるほどーvueで全部書き換える予定だったんですね。 Pagerのreactコンポーネントがあるのには気付かなかったですが、途中で気付いてcompaniesのコンポーネントを参考にこのコンポーネントを使って書くようにしました。

マージされたのでクローズします

Commentコンポーネントが内部で使っているか、vuexを通して依存している部分があるため、既にこちらのIssueらは自分が作業を始めています。 - https://github.com/fjordllc/bootcamp/issues/5118 - https://github.com/fjordllc/bootcamp/issues/5119 - https://github.com/fjordllc/bootcamp/issues/5134 もしかしたら他の人も着手していて二度手間になっている可能性があります。

@komagata @kyokucho1989 先程このIssueについて確認を受けました。 - https://github.com/fjordllc/bootcamp/issues/5122 今こちらの自分の担当しているCommentコンポーネントに関係するIssueがあるか確認しました。 - https://github.com/fjordllc/bootcamp/issues/5118 - https://github.com/fjordllc/bootcamp/issues/5119 - https://github.com/fjordllc/bootcamp/issues/5134 この上記の３つのIssueは、Commentコンポーネントの中で使われているか依存関係があるため、先にReactコンポーネントに変換しないとCommentコンポーネントのreact化が出来ません。 なので既にこちらの[PR](https://github.com/fjordllc/bootcamp/pull/7216 )や、手元にあるブランチの作業ではReactに書き換えてしまっています。 Issueにコメントしたり自分にアサインしたりして、他の人が作業しないように分かりやすくするべきでした。 二度手間になってしまいすいません!🙇

@komagata このIssueをやる中でいくつか問題が出てきたので質問させてください。 ## FontAwesomeが使用できない 現在の設定ではFontAwesomeを使っているコンポーネントではアイコンが表示されません。Railsとは違うポート番号でStoryBookを動かしているからですが、設定を工夫することでStoryBook上でもアイコンを表示させれるのかどうか、もし不可能なのならこのままでもいいのか知りたいです。 ## Mock Service Workerの必要性について 現在FjordのReactコンポーネントにはApiとの通信のあるコンポーネントが多くありStoryBookで扱うためにはそのApi通信部分をどのように扱うか考える必要があります。解決方法としてはMock Service Workerというアドオンを入れればApi通信をモックすることが出来るのですが本当に入れる必要があるのかどうか悩んでいます。 というのも現在の作り方ではApiからデータを取得する部分と見た目を構築する部分が同じコンポーネント内にありますが、Api部分と見た目部分を分離して違うコンポーネントに分けるように実装して、その見た目を担当するコンポーネントだけにStoryBookのStoryを作るようにしたほうが良いコンポーネントの作り方、StoryBookの使い方になると思うからです。 この問題についてどのように考えるか知りたいです。 https://storybook.js.org/addons/msw-storybook-addon

@natsuto6 1. データ取得をuseSWRを使うように置き換えて、useStateとuseEffectを全てGenerationUsersから消去する。 2. 既にあるreact-paginateを使うコンポーネントではなく、Pagination.jsxとusePageを使ったページネーションを使うように置き換える。 とりあえずはこの二つをやったら問題ないと思います。

@kyokucho1989 すいません言葉不足で書いていませんでしたが、このエラーはmainではない下記のPRのコメントのブランチで起こりました。 https://github.com/fjordllc/bootcamp/pull/7449 エラーが起こるようになった原因はおそらく追加したコンポーネントで新たにuseSWRを呼び出しているからです。細かくは書きませんがuseSWRはkeyによってアプリ全体でデータ（とキャッシュ）の共有をしています。useSWRの呼ばれる数が増えた影響でhookの呼ばれる順番が変わってしまったのだと思います。 実際にエラーメッセージを見たところ、22番目のhookの前回のレンダーがundefinedなのに次のレンダーではuseEffectになっています。 ちなみにRule of hooksに違反している限りhookの呼び出し順は保証されなくなる危険性があるのでエラーが出る出ないに関わらずに修正はするべきです。

@komagata こちらのIssueの本番リリースで現在、500: Internal Server Errorが起こってます。 https://bootcamp.fjord.jp/users/areas 本番のログを見ないと原因を正確に特定するのは難しいですが、おそらく原因であろう場所を推測したので下記に説明します。 Areaクラス内での`country_subdivision_pairs `、country_codeとsubdivision_codeカラムを取得して配列のペアにする関数では、`.where.not(subdivision_code: nil)`でsubdivision_codeがnullになっているユーザーの情報を取得しないようにしています。しかし、この記述だとsubdivision_codeがnullでなくcountry_codeがnullであるユーザーを考慮出来ておらず、country_codeがnullになる可能性があります。おそらく`where.not(country_code: nil, subdivision_code: nil)`と書けば両方にnullでないカラムを取得出来るようになるはずです。 おそらくnilへのアクセスをしてエラーが出てしまっている気がします。 修正前 ```ruby def country_subdivision_pairs User .select('country_code, subdivision_code') .where.not(subdivision_code: nil) .pluck(:country_code, :subdivision_code) end ``` 修正後 ```ruby def...

@komagata 確認ありがとうございます。 上記の変更とそれに合わせたテストの修正とテストデータの追加(country_codeとsubdivision_codeのどちらかだけしか持っていないユーザー)をした修正PRを作ります。 早めに直した方が良い修正だと思うので、もしPRが完成していなくても金曜日までには一旦途中報告します。