bootcampアプリ内の Vue.js で使用される currentUserId の型を Number に統一

[ymmtd0x0b]

Issue

• ブートキャンプアプリのVue.jsのファイルでcurrentUserIdがNumberとStringで型定義が混在しているのをNumberに統一したい #6414

概要

bootcampアプリ内の Vue.js で使用される currentUserId の型を Number に統一しました。

変更確認方法

※画像枚数が多く、作業の状況が把握しづらそうに感じたので折りたたみ要素を使用しています。必要に応じて開いて下さい。

1. bug/unify-current-user-id-type-to-number-in-vuejs をローカルに取り込む

2. bin/rails s を起動する

3. 画面表示の確認
   以下のURLへ komagata ( メンター以上の権限なら誰でもOKです ) でアクセスして、赤枠の部分が表示されている＆ブラウザ検証機能の Console ※１にエラーが表示されていない事をそれぞれ確認する

   提出物一覧 / リンク

   
   提出物詳細 / リンク ※右枠は"提出物タブ"をクリックして下さい

   
   企業所属の研修生の提出物一覧 / リンク

   
   コメント ( 提出物 ) / リンク ※ページ下部へスクロールして下さい

   
   質問詳細 / リンク

   
   ※１：ブラウザ検証機能の Consoleタグ をアクティブにした画像

   

4. 画面操作の確認
   以下の各操作が正常に動作する＋ 検証機能のConsole にエラーが表示されない事をそれぞれ確認する
   

   担当ボタンのクリック動作 ( 提出物一覧 )

   1. 提出物一覧 へ komagata でアクセス
   2. 『 aptの基礎を覚えるの提出物 』の 担当するボタン をクリックする

      Before
      After

   3. 自分の担当タブ をクリック
   4. 『 aptの基礎を覚えるの提出物 』が存在することを確認
   5. 担当から外れるボタン をクリックする

      Before
      After

   6. 画面をリロードすると先程の提出物が表示されない事を確認
   担当ボタンのクリック動作 ( 提出物詳細 )

   1. PC性能の見方を知るの 提出物へ komagata でアクセス
   2. 画面中段の 担当するボタン をクリックする

      Before
      After

   3. 自分の担当提出物 へアクセス
   4. 『 PC性能の見方を知るの提出物 』が存在することを確認
   5. 再度、PC性能の見方を知るの提出物 へアクセス
   6. 画面中段の 担当から外れるボタン をクリックする

      Before
      After

   7. 再度、自分の担当提出物 へアクセス と先程の提出物が表示されない事を確認
   メンターがコメントすると担当者になる

   1. Terminalの基礎を覚える の提出物へ komagata でアクセス
   2. 画面下段の コメントフォーム から任意のコメントを送信する
   3. 自分の担当提出物 へアクセス
   4. 『 Terminalの基礎を覚える 』が存在することを確認
   企業の日報一覧上にある日報オプション表示

   1. MaruMaru Inc. の日報一覧 へ marumarushain15 でアクセス
   2. 一番上の日報の右上に … が表示されいる事を確認
   3. … をクリックして、内容変更とコピーが表示される事を確認

   ※日報一覧が２重に表示されていますが、この件はバグ報告済みです #6638

Screenshot

外見上の変化はありませんので省略します

補足

コンポーネントのマウント方法が２種類混在していますが、統一しようとするとPRが大きくなりすぎてしまうので、このPRでは手を付けていません

マウント方法の詳細情報が必要な場合は、Vue Componentのマウント方法 を参照して下さい

[ymmtd0x0b]

実装中に発見した Vuex の参照エラーバグ(の疑い)になります。
動作には影響してなさそうでしたが、修正を行いしました。

対象コミット：9e7c7cb

ブラウザコンソールのエラー画像

[ymmtd0x0b]

@ogawa-tomo
お疲れ様です！
こちらのレビューをお願いしたいのですが、ご都合いかがでしょうか？

[ogawa-tomo]

@ymmtd0x0b 承知しました！次の週末くらいまでに見ようと思います。

[ogawa-tomo]

@ymmtd0x0b （まだちゃんと見れていないですが）==を===に書き換える必要はないですか？イシューではそこを問題視しているように見えましたので。

[ymmtd0x0b]

@ogawa-tomo
ご指摘ありがとうございます！型を揃える事に意識が向いていましたが、確かにそれだけでは不十分ですね...。== を=== に書き換えて置きます！

[ogawa-tomo]

レビュー:memo:

今回対象となっているコンポーネント

• check.vue
  • 「（提出物など）を確認」ボタン
  • currentUserIdをproduct-checkerに渡しているだけ（つまり提出物のときしか使ってない）
  • OK
• comments.vue
  • お知らせ、イベント、Docs、提出物、定期イベント、日報、相談部屋のコメント表示で使われる
  • postComment関数が呼ばれたとき、currentUserIdをcheckProduct関数に渡して呼び出している→提出物の担当になるという意味らしい
  • →提出物にコメントしたら担当になる、という動作確認は必要では
  • （ちなみにcommentAndCheck関数では提出物を確認済みにするらしい…。checkという単語が別の意味で使われていそう…？）
• company-products.vue
  • currentUserIdをproductコンポーネントに渡しているだけ
  • OK
• question-page.vue
  • 質問ページ
  • createdでfetchUser関数にcurrentUserIdを渡している→currentUserの情報を取得して、answersコンポーネントとquestioneditコンポーネントに渡している→質問ページが表示できてればよさそう
  • OK
• report.vue
  • たとえば企業ページの日報一覧で個々の日報を表示するのに使っている
  • 日報がログインユーザーのものだったときだけ内容変更とかコピーのボタンを表示する制御に使っている
  • この動作確認は必要では
• user-products.vue
  • currentUserIdをproductコンポーネントに渡しているだけ
  • OK
• product_checker.vue
  • メンターから見た提出物の「担当する」ボタンらしい
  • これも提出物にコメントしたときと同じで、checkProduct関数を呼び出している
  • これも動作確認必要かも
• products.vue
  • currentUserIdをproductコンポーネントに渡しているだけ
  • プロダクト一覧が正しく表示されてればよさそう
  • OK

さらに:memo:
checkという単語が「確認OKにする」と「担当する」という2つの意味で使われていそう？後者はあんまり適切でない気がするので、変えられないかな…。フロントだけの問題ではないからめんどくさそう…

[ogawa-tomo]

@ymmtd0x0b コードでCurrentUserIdが関係する箇所を見ていて、下記の動作確認が必要かもしれないな、と思ったのですが、どうでしょう？もし必要そうであれば、PRのディスクリプションに追記していただければと思います。

• メンターが提出物にコメントしたら担当になること
• 企業ページの日報一覧で、ログインユーザー自身の日報にのみ「内容変更」「コピー」のボタンが表示されること
• メンターが提出物の「担当する」ボタンを押したら担当になること

[ogawa-tomo]

レビュー:memo:

ほかにVueファイルで==を使っている箇所がないかチェック。

❯ git grep "\s==\s" -- "*.vue" 
app/javascript/answer.vue:    .answer-badge(v-if='hasCorrectAnswer && answer.type == "CorrectAnswer"')
app/javascript/answer.vue:            v-if='answer.user.id == currentUser.id || isRole("admin")')
app/javascript/answer.vue:            v-if='hasCorrectAnswer && answer.type == "CorrectAnswer" && (currentUser.id === questionUser.id || isRole("mentor"))')
app/javascript/answer.vue:            v-if='answer.user.id == currentUser.id || isRole("mentor")')
app/javascript/components/user.vue:              v-if='currentUser.id != user.id && currentUser.adviser && user.company && currentUser.company_id == user.company.id')
app/javascript/components/users-answer.vue:      .answer-badge(v-if='answer.type == "CorrectAnswer"')
app/javascript/generations.vue:  .container.is-lg(v-if='generations.length == 0 && loaded')
app/javascript/product.vue:    v-if='isMentor && product.checks.size == 0')
app/javascript/searchable.vue:      v-else-if='searchable.model_name == "regular_event"')
app/javascript/searchable.vue:    .card-list-item__label(v-else-if='searchable.model_name == "practice"')

それなりにあるが、今回のスコープであるcurrentUserIdに直接関係する箇所はなさそう。
!=についても同様にチェック。

❯ git grep "\s!=\s" -- "*.vue" 
app/javascript/answer.vue:            v-if='!hasCorrectAnswer && answer.type != "CorrectAnswer" && (currentUser.id === questionUser.id || isRole("mentor"))')
app/javascript/components/user.vue:              v-if='currentUser.id != user.id && currentUser.adviser && user.company && currentUser.company_id == user.company.id')
app/javascript/components/user.vue:            li.card-main-actions__item(v-else-if='currentUser.id != user.id')
app/javascript/products.vue:        v-if='isMentor && selectedTab != "all" && !isDashboard',

これについても、今回のスコープ内のものはなさそう。

なので、今回編集したVueファイルの箇所で動作確認がとれれば問題なさそう。

[ymmtd0x0b]

@ogawa-tomo
レビューありがとうございます！ご指摘頂いた以下の内容をPRの確認手順の4. へ追記しました🙋‍♂️

• メンターが提出物にコメントしたら担当になること
• 企業ページの日報一覧で、ログインユーザー自身の日報にのみ「内容変更」「コピー」のボタンが表示されること
• メンターが提出物の「担当する」ボタンを押したら担当になること

[ogawa-tomo]

@ymmtd0x0b ご対応ありがとうございます！私としては問題ないと思いましたのでapproveです:+1:

[ymmtd0x0b]

@komagata
チームメンバーから Approve 頂きましたので、こちらのレビューをお願いします🙇‍♂️

[komagata]

確認させて頂きました。OKです〜🙆‍♂️