searchables.vueとsearchable.vueをReactコンポーネントに書き換えた #7218

2525nicole · 2024-01-21T07:44:20Z

Issue

searchable.vue, searchables.vueをreactに対応させる #5140

概要

Vue.jsで実装されていた検索結果一覧表示を、Reactを使って書き換えました。

変更確認方法

React化後も問題なく機能することを確認する

feature/convert-searchables-component-to-reactをローカルに取り込む
foreman start -f Procfile.devを実行し、アプリを起動する
komagataでログインし、トップページ右上にある検索窓から以下それぞれの検索を行う

確認する検索内容

検索対象：検索窓左側のプルダウンで選択
検索ワード：検索窓右側に入力

「すべて」の検索

検索対象：「すべて」
検索ワード：テスト」
複数の検索対象の結果が表示されている
検索結果一覧の中で検索ワードの箇所が太字になっている
検索結果をクリックすると、検索結果自体のページに飛ぶ
ページ上下にあるページネーションが機能する

検索結果が見つからない場合

検索対象：任意のもの
検索ワード：「存在しません」
以下の画面が表示される

「お知らせ」の検索

検索対象：お知らせ
検索ワード：お知らせ
検索結果をクリックすると、検索結果自体のページに飛ぶ
「コメント」検索結果において、アイコンまたはコメント投稿ユーザー名（以下、赤で囲んだ箇所）からユーザー個別ページに飛ぶ
「コメント」検索結果において、お知らせ投稿ユーザー名（以下、青で囲んだ箇所）からユーザー個別ページに飛ぶ

「プラクティス」の検索

検索対象：プラクティス
検索ワード：概要欄
検索結果をクリックすると、検索結果自体のページに飛ぶ

「日報」の検索

検索対象：日報
検索ワード：日報
検索結果をクリックすると、検索結果自体のページに飛ぶ
「WIP」と「コメント」の結果も表示される

「提出物」の検索

検索対象：提出物
検索ワード：提出物
検索結果をクリックすると、検索結果自体のページに飛ぶ
「コメント」の検索結果も表示される

「Q＆A」の検索

検索対象：Q＆A
検索ワード：テスト
検索結果をクリックすると、検索結果自体のページに飛ぶ
「コメント」の検索結果も表示される
「コメント」をクリックすると、質問そのものではなくコメントに飛ぶ（今回のIssue対応に伴って現在の実装から変更した点です。経緯等はこちらに記載しています）

「Docs」の検索

検索対象：Docs
検索ワード：Docs
検索結果をクリックすると、検索結果自体のページに飛ぶ
「コメント」の検索結果も表示される

「イベント」の検索

検索対象：イベント
検索ワード：イベント
検索結果をクリックすると、検索結果自体のページに飛ぶ

「定期イベント」の検索

検索対象：定期イベント
検索ワード：イベント
検索結果をクリックすると、検索結果自体のページに飛ぶ

「ユーザー」の検索（管理者）

検索対象：ユーザー
検索ワード：marumaru
検索結果をクリックすると、ユーザーの個別ページに飛ぶ
相談部屋のリンクが表示され、クリックするとユーザーの個別ページに飛ぶ

「ユーザー」の検索（管理者以外）

kimura（または管理者権限のない任意のユーザー）でログインし、以下のとおり検索する

検索対象：ユーザー
検索ワード：marumaru
相談部屋のリンクは表示されない

Screenshot

画面上の変更はありません。

2525nicole · 2024-01-21T09:40:34Z

@omochiumaiumai
お疲れ様です！
お忙しいところ、また二度目のご依頼になってしまい恐れ入ります🙇‍♀️
急ぎではありませんので、ご都合のよろしいタイミングでレビューをお願いできますでしょうか🙏

2525nicole · 2024-01-21T10:45:44Z

app/helpers/search_helper.rb

@@ -16,8 +16,8 @@ def searchable_url(searchable)
      document = searchable.commentable_type.constantize.find(searchable.commentable_id)
      "#{polymorphic_url(document)}#comment_#{searchable.id}"
    elsif searchable.instance_of?(Answer) || searchable.instance_of?(CorrectAnswer)
-      document = searchable.question
-      polymorphic_url(document).to_s
+      document = Question.find(searchable.question.id)


補足：この箇所の修正について

修正内容

以下の経緯と課題点を踏まえて、
検索結果で表示する質問回答のリンク先を「回答が紐づく質問のURL」から「回答自体のURL」に修正いたしました。

経緯

React化するにあたって検索結果のURLをSearchablesコンポーネントからSearchableコンポーネントにkeyとして渡すにあたり、URLを一意にする必要がありました。

現在の仕様の課題点

検索結果一覧の質問回答のリンク先が「（回答自体ではなく）質問自体のURL」になっているため質問と回答が検索結果に含まれるとkeyが一意のものでなくなってしまうという課題がありました。

Issueの以下メモに記載しております🙇‍♀️
#5140 (comment)

2525nicole · 2024-01-21T10:46:40Z

app/javascript/stylesheets/application/blocks/user/_a-list-item-badge.sass

@@ -20,7 +20,7 @@
  &.is-unread
    background-color: var(--danger)
    color: var(--reversal-text)
-  &.is-serchable
+  &.is-searchable


綴りがserchableになっていたのをsearchableに修正いたしました🙏

2525nicole · 2024-01-21T10:47:07Z

app/javascript/stylesheets/atoms/_a-list-item-badge.sass

@@ -20,7 +20,7 @@
  &.is-unread
    background-color: var(--danger)
    color: var(--reversal-text)
-  &.is-serchable
+  &.is-searchable


こちらも綴りをserchableからsearchableに修正した箇所です🙏

omochiumaiumai · 2024-01-22T07:29:08Z

@2525nicole
お疲れ様です！
レビューの件承知いたしました！少々立て込んでいるためお時間をいただきますが、なるべく早くレビューできるように努めます💪

2525nicole · 2024-01-22T09:03:29Z

@omochiumaiumai
お忙しいところお引き受けいただき本当にありがとうございます😭🙇‍♀️

少々立て込んでいるためお時間をいただきますが
急ぎではないので、問題ございません🙏！！
お手数をおかけしてしまい申し訳ありませんが、どうぞよろしくお願いいたします🙇‍♀️

omochiumaiumai

@2525nicole
お疲れ様です！お待たせしてすみません💦
動作とコードを確認しました！特に問題はないのですが、変数名について気になった部分があったため2点コメントをしています。
ご確認をお願いいたします🙇‍♂

omochiumaiumai · 2024-01-29T08:36:00Z

app/javascript/components/Searchable.jsx

+  const canDisplayTalk = searchable.model_name === 'user' && searchable.talk_id
+  const currentUser = window.currentUser
+
+  const labelContet =


こちらの変数名は誤字で、恐らくはlabelContentと思うのですがいかがでしょうか？
(意図的だったらすみません💦)

@omochiumaiumai
初歩的なミス、大変失礼いたしました...＞＜！
ご指摘のとおりですので修正いたしました🙇‍♀️
気づいていただきありがとうございます🙏

omochiumaiumai · 2024-01-29T08:37:26Z

app/javascript/components/Searchable.jsx

+      </span>
+    )
+
+  const badgeContet = searchable.wip ? (


こちらも同様にbadgeContentではないかな〜と思いました！

@omochiumaiumai
ありがとうございます！
こちらも同様に、ご指摘いただいたとおりでしたので修正いたしました🙏
お手数をおかけしてしまい申し訳ありません🙇‍♀️🙇‍♀️

2525nicole · 2024-01-29T09:26:08Z

@omochiumaiumai
とんでもないです！！
お忙しいところご確認ありがとうございます🙇‍♀️！！
またこちらの初歩的なお手数をおかけしてしまい申し訳ありませんでした＞＜
修正しましたのでたびたびお手数ですがご確認をお願いできますでしょうか🙏

omochiumaiumai

@2525nicole
お疲れ様です！
修正ありがとうございます〜これでApproveさせていただきます！😊

2525nicole · 2024-01-29T12:08:12Z

@omochiumaiumai
おつかれさまです！
早々にご確認をいただき、
またお忙しいところ引き受けていただき本当にありがとうございました🙇‍♀️
引き続きよろしくお願いいたします😊🍀

@komagata
おつかれさまです！
チームメンバーの方にApproveをいただきましたので、レビューをお願いできますでしょうか🙇‍♀️

komagata

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

2525nicole self-assigned this Jan 21, 2024

2525nicole marked this pull request as ready for review January 21, 2024 09:29

2525nicole requested a review from omochiumaiumai January 21, 2024 09:37

2525nicole commented Jan 21, 2024

View reviewed changes

2525nicole changed the title ~~searchables.vueとsearchable.vueをReactコンポーネントにに書き換えた~~ searchables.vueとsearchable.vueをReactコンポーネントに書き換えた Jan 28, 2024

omochiumaiumai reviewed Jan 29, 2024

View reviewed changes

2525nicole added 4 commits January 29, 2024 18:07

searchable.vue, searchables.vueをReact化した

0d12729

クラス名の綴りを修正

dffe588

rubocopの指摘事項を修正

5a30966

変数名の脱字を修正

3a8da1f

2525nicole force-pushed the feature/convert-searchables-component-to-react branch from 36f2d0a to 3a8da1f Compare January 29, 2024 09:08

omochiumaiumai approved these changes Jan 29, 2024

View reviewed changes

komagata approved these changes Jan 30, 2024

View reviewed changes

komagata merged commit 60a1913 into main Jan 30, 2024
5 checks passed

komagata deleted the feature/convert-searchables-component-to-react branch January 30, 2024 05:41

github-actions bot mentioned this pull request Jan 30, 2024

Release 2024-01-31 14:27:39 #7244

Merged

20 tasks

2525nicole mentioned this pull request Feb 1, 2024

searchable.vue, searchables.vueをreactに対応させる #5140

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

searchables.vueとsearchable.vueをReactコンポーネントに書き換えた #7218

searchables.vueとsearchable.vueをReactコンポーネントに書き換えた #7218

2525nicole commented Jan 21, 2024 •

edited by omochiumaiumai

Loading

2525nicole commented Jan 21, 2024

2525nicole Jan 21, 2024

2525nicole Jan 21, 2024

2525nicole Jan 21, 2024

omochiumaiumai commented Jan 22, 2024

2525nicole commented Jan 22, 2024

omochiumaiumai left a comment

omochiumaiumai Jan 29, 2024

2525nicole Jan 29, 2024

omochiumaiumai Jan 29, 2024

2525nicole Jan 29, 2024

2525nicole commented Jan 29, 2024

omochiumaiumai left a comment

2525nicole commented Jan 29, 2024

komagata left a comment

searchables.vueとsearchable.vueをReactコンポーネントに書き換えた #7218

searchables.vueとsearchable.vueをReactコンポーネントに書き換えた #7218

Conversation

2525nicole commented Jan 21, 2024 • edited by omochiumaiumai Loading

Issue

概要

変更確認方法

確認する検索内容

「すべて」の検索

検索結果が見つからない場合

「お知らせ」の検索

「プラクティス」の検索

「日報」の検索

「提出物」の検索

「Q＆A」の検索

「Docs」の検索

「イベント」の検索

「定期イベント」の検索

「ユーザー」の検索（管理者）

「ユーザー」の検索（管理者以外）

Screenshot

2525nicole commented Jan 21, 2024

2525nicole Jan 21, 2024

Choose a reason for hiding this comment

補足：この箇所の修正について

修正内容

経緯

現在の仕様の課題点

2525nicole Jan 21, 2024

Choose a reason for hiding this comment

2525nicole Jan 21, 2024

Choose a reason for hiding this comment

omochiumaiumai commented Jan 22, 2024

2525nicole commented Jan 22, 2024

omochiumaiumai left a comment

Choose a reason for hiding this comment

omochiumaiumai Jan 29, 2024

Choose a reason for hiding this comment

2525nicole Jan 29, 2024

Choose a reason for hiding this comment

omochiumaiumai Jan 29, 2024

Choose a reason for hiding this comment

2525nicole Jan 29, 2024

Choose a reason for hiding this comment

2525nicole commented Jan 29, 2024

omochiumaiumai left a comment

Choose a reason for hiding this comment

2525nicole commented Jan 29, 2024

komagata left a comment

Choose a reason for hiding this comment

2525nicole commented Jan 21, 2024 •

edited by omochiumaiumai

Loading