管理ページの企業一覧を非React化した #8230

Ryooo-k · 2024-11-29T09:08:11Z

Issue

#8225 管理ページ　企業一覧を非Vue/React化したい

概要

管理ページの企業一覧ページを非React化しました。

views/admin/companies/index.html.slimで使用されているReactコンポーネントAdminCompanies.jsxを削除し、view内で完結するようにしました。

変更確認方法

chore/company-list-non-vue-reactをローカルに取り込む
i. git fetch origin pull/8230/head:chore/company-list-non-vue-react
ii. git checkout chore/company-list-non-vue-react
foreman start -f Procfile.dev でローカルサーバーを立ち上げる
ユーザー名komagata、パスワードtesttestでログインする
企業一覧ページにアクセスする
下記事項を確認する

１ページ目に企業が20社分表示されているか確認する
２ページ目に企業が8社分表示されているか確認する
企業名をクリックすると詳細ページに画面遷移するか確認する

アドバイザー招待リンクをクリックするとFBCアドバイザー参加登録画面になるか確認する

研修生招待リンクをクリックするとFBC参加登録画面になるか確認する

ページネーションボタンが機能しているか確認する

1ページ目と2ページ目の「名前」「ロゴ」「ウェブサイト」が下記画像と同じ順番・画像・文字列であるか確認する

Screenshot

今回の変更に伴う画面変更はありません。

Ryooo-k · 2024-11-29T10:22:37Z

@hagiya0121
お疲れ様です！
こちらのレビューお願いしたいのですが可能でしょうか？🙏

hagiya0121 · 2024-11-29T10:45:25Z

@Ryooo-k
了解です！三日以内には返せると思います🙂

hagiya0121

@Ryooo-k
動作に問題はありませんでした。気になった点をコメントしたので確認お願いします🙏

hagiya0121 · 2024-11-30T05:14:22Z

app/views/admin/companies/index.html.slim

+                    a.a-button.is-sm.is-secondary.is-icon title="アドバイザーサインアップURL" href=company.adviser_sign_up_url
+                      i.fa-solid.fa-user-plus
+                  td.admin-table__item-value.is-text-align-center
+                    a.a-button.is-sm.is-secondary.is-icon title="アドバイザーサインアップURL" href=company.trainee_sign_up_url
+                      i.fa-solid.fa-user-plus
+                  td.admin-table__item-value.is-text-align-center
+                    a.a-button.is-sm.is-secondary.is-icon title="アドバイザーサインアップURL" href="/admin/companies/#{company.id}/edit"


研修生招待リンクと編集のリンクのtitleがアドバイザーサインアップURLなのは変だと思いました。
もともとのReactのコード自体が間違っているようです。

ご指摘ありがとうございます！修正時に気づくべきでした😅
titleはリンク先のタイトル名に修正いたします。

hagiya0121 · 2024-11-30T06:13:39Z

app/views/admin/companies/index.html.slim

+                    a href="/companies/#{company.id}" = company.name
+                  td.admin-table__item-value
+                    img.admin-table__item-logo-image src=company.logo_url
+                  td.admin-table__item-value = company.website
+                  td.admin-table__item-value.is-text-align-center
+                    a.a-button.is-sm.is-secondary.is-icon title="アドバイザーサインアップURL" href=company.adviser_sign_up_url
+                      i.fa-solid.fa-user-plus
+                  td.admin-table__item-value.is-text-align-center
+                    a.a-button.is-sm.is-secondary.is-icon title="アドバイザーサインアップURL" href=company.trainee_sign_up_url
+                      i.fa-solid.fa-user-plus
+                  td.admin-table__item-value.is-text-align-center
+                    a.a-button.is-sm.is-secondary.is-icon title="アドバイザーサインアップURL" href="/admin/companies/#{company.id}/edit"


aタグではなくlink_toを使った方がいいと思います🤔

hagiya0121 · 2024-11-30T06:15:56Z

app/views/admin/companies/index.html.slim

+              - @companies.each do |company|
+                tr.admin-table__item
+                  td.admin-table__item-value.company-name
+                    a href="/companies/#{company.id}" = company.name


ここと53行目もURLヘルパーメゾッドが使えると思います。

link_toに変更します。また"/companies/#{company.id}"のURIをcompany_path(company)に変換できるので、これも合わせて修正しておきます。

hagiya0121 · 2024-11-30T06:22:43Z

app/views/admin/companies/index.html.slim

+                  td.admin-table__item-value.company-name
+                    a href="/companies/#{company.id}" = company.name
+                  td.admin-table__item-value
+                    img.admin-table__item-logo-image src=company.logo_url


image_tagが使えると思います

hagiya0121 · 2024-11-30T07:27:24Z

app/javascript/components/AdminCompanies.jsx

app/controllers/api/admin/companies_controller.rb、app/views/api/admin/companies/index.json.jbuilder、test/integration/api/companies_test.rbも削除していいと思います。

ご指摘ありがとうございます。app/views/api/admin/companies/_company.json.jbuilderも削除して問題なさそうですので、削除しておきます。

hagiya0121 · 2024-11-30T11:23:50Z

app/views/admin/companies/index.html.slim

@@ -27,4 +27,29 @@ main.page-main
  hr.a-border
  .page-body
    .container.is-lg
-      = react_component 'AdminCompanies'
+      div[data-testid="admin-companies"]


reactではないのでdata-testid="admin-companies"はいらないのかなあと思いました🤔
テストファイルでwithin "[data-testid='admin-companies']" doの形でスコープを限定していて、消してしまってもテストは通るのですがなぜスコープを限定しているのかはよく分からないです。

確かにdata-testid="admin-companiesがなくてもテストは通りますね🧐このDocsを見てテストを安定させてるのかと理解してましたが、SPAだとあまり気にしなくて良さそうですね。
なのでテストコードと共にdata-testid="admin-companies"は削除しておきます。

hagiya0121 · 2024-11-30T11:25:25Z

test/system/admin/companies_test.rb

不要なコメントが残っています。

Ryooo-k · 2024-12-03T08:11:09Z

@hagiya0121
ご確認ありがとうございます！
修正いたしましたので再度ご確認お願いいたします。

hagiya0121

@Ryooo-k
修正お疲れ様です！
問題なかったのでApproveします👌

Ryooo-k · 2024-12-04T01:25:09Z

@hagiya0121
ご確認ありがとうございます！

@komagata
メンバーレビューが完了しましたので、レビューをお願いいたします。

komagata

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

machida · 2025-02-04T02:33:30Z

@Ryooo-k 本番で確認しましたー🙆‍♂️

Ryooo-k · 2025-02-04T03:49:47Z

@machida
ご確認ありがとうございます！
issueはcloseしておきます。

管理ページの企業一覧を非React化した

e52324d

Ryooo-k self-assigned this Nov 29, 2024

Ryooo-k marked this pull request as ready for review November 29, 2024 10:17

Ryooo-k requested a review from hagiya0121 November 29, 2024 10:22

hagiya0121 reviewed Nov 30, 2024

View reviewed changes

Ryooo-k added 6 commits December 3, 2024 11:13

titleをリンク先のタイトルに修正

b4f5b99

aタグをlint_toメソッドに変更

36b539b

imaタグをimage_tagメソッドに変更

41d64e2

不要なファイルを削除

c346753

不要なdiv[data-testid=admin-companies]を削除

95ce8b5

不要になったルートを削除

95b89fa

hagiya0121 approved these changes Dec 4, 2024

View reviewed changes

Ryooo-k requested a review from komagata December 4, 2024 01:25

komagata approved these changes Dec 15, 2024

View reviewed changes

komagata merged commit 559c745 into main Dec 15, 2024
4 checks passed

komagata deleted the chore/company-list-non-vue-react branch December 15, 2024 23:33

github-actions bot mentioned this pull request Dec 15, 2024

Release 2025-02-02 02:43:35 +0000 #8212

Merged

32 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

管理ページの企業一覧を非React化した #8230

管理ページの企業一覧を非React化した #8230

Ryooo-k commented Nov 29, 2024 •

edited by hagiya0121

Loading

Ryooo-k commented Nov 29, 2024

hagiya0121 commented Nov 29, 2024

hagiya0121 left a comment

hagiya0121 Nov 30, 2024

Ryooo-k Dec 3, 2024

hagiya0121 Nov 30, 2024 •

edited

Loading

hagiya0121 Nov 30, 2024

Ryooo-k Dec 3, 2024

hagiya0121 Nov 30, 2024

hagiya0121 Nov 30, 2024

Ryooo-k Dec 3, 2024

hagiya0121 Nov 30, 2024

Ryooo-k Dec 3, 2024

hagiya0121 Nov 30, 2024

Ryooo-k commented Dec 3, 2024

hagiya0121 left a comment

Ryooo-k commented Dec 4, 2024

komagata left a comment

machida commented Feb 4, 2025

Ryooo-k commented Feb 4, 2025

管理ページの企業一覧を非React化した #8230

管理ページの企業一覧を非React化した #8230

Conversation

Ryooo-k commented Nov 29, 2024 • edited by hagiya0121 Loading

Issue

概要

変更確認方法

Screenshot

Ryooo-k commented Nov 29, 2024

hagiya0121 commented Nov 29, 2024

hagiya0121 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hagiya0121 Nov 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ryooo-k commented Dec 3, 2024

hagiya0121 left a comment

Choose a reason for hiding this comment

Ryooo-k commented Dec 4, 2024

komagata left a comment

Choose a reason for hiding this comment

machida commented Feb 4, 2025

Ryooo-k commented Feb 4, 2025

Ryooo-k commented Nov 29, 2024 •

edited by hagiya0121

Loading

hagiya0121 Nov 30, 2024 •

edited

Loading