VueのCommentsコンポーネントをReactへと置き換えた

app/helpers/comments_helper.rb

@@ -4,4 +4,9 @@ module CommentsHelper
   def user_comments_page?
     controller_path == 'users/comments' && action_name == 'index'
   end
+
+  def comments_props(title:, commentable_id:, commentable_type:)
+    user = current_user.as_json(only: %i[id login_name], methods: %i[avatar_url roles primary_role icon_title])
+    { title:, commentableId: commentable_id, commentableType: commentable_type, currentUser: user, availableEmojis: Reaction.available_emojis.to_json }
+  end
 end

app/javascript/components/Check/Check.jsx

@@ -1,78 +1,72 @@
 import React from 'react'
-import ProductChecker from '../ProductChecker/ProductChecker'
+import ResponsibleMentor from '../ResponsibleMentor/SharedResponsibleMentor'
 import * as Card from '../ui/Card'
-import { useCheck } from './useCheck'
+import { useInitializeCheck, useCheck } from './useCheck'
 import clsx from 'clsx'
 
 const Check = ({
   emotion = null,
   checkableId,
   checkableType,
-  checkableLabel,
-  checkerId = null,
-  checkerName = null,
-  checkerAvatar = null,
+  checkableName,
+  responsibleUserId = null,
+  responsibleUserName = null,
+  responsibleUserAvatar = null,
   currentUserId = null
 }) => {
-  const { checkExists, onCreateCheck, onDeleteCheck } = useCheck(
-    checkableId,
-    checkableType
-  )
-  const buttonLabel = `${checkableLabel}${
-    checkExists ? 'の確認を取り消す' : 'を確認'
-  }`
+  useInitializeCheck(checkableId, checkableType)
+  const { isChecked, handleCreateCheck, handleDeleteCheck } = useCheck()
 
-  const handleToggleCheck = () => {
-    if (checkExists) {
-      onDeleteCheck()
-    } else {
-      const isSadEmotion = emotion === 'sad'
-      // TODO querySelectorを辞めてpropsから渡したい
-      const commentExists =
-        parseInt(
-          document.querySelector('a[href="#comments"] > span').innerHTML
-        ) > 0
-      const confirmMessage =
-        '今日の気分は「sad」ですが、コメント無しで確認しますか？'
-      // 変数定義時に実行させないため関数
-      const isConfirmed = () => window.confirm(confirmMessage)
-      const isSadNoCommentNotComfirmed =
-        isSadEmotion && !commentExists && !isConfirmed()
-      if (isSadNoCommentNotComfirmed) return
-      onCreateCheck()
-    }
+  const handleCreateCheckClick = () => {
+    const isSadEmotion = emotion === 'sad'
+    // TODO querySelectorを辞めてpropsから渡したい
+    const commentExists =
+      parseInt(document.querySelector('a[href="#comments"] > span').innerHTML) >
+      0
+    const confirmMessage =
+      '今日の気分は「sad」ですが、コメント無しで確認しますか？'
+    // 変数定義時に実行させないため関数
+    const isConfirmed = () => window.confirm(confirmMessage)
+    const isSadNoCommentNotComfirmed =
+      isSadEmotion && !commentExists && !isConfirmed()
+    if (isSadNoCommentNotComfirmed) return
+    handleCreateCheck()
   }
 
   return (
     <Card.Footer className="is-only-mentor">
       {/* 提出物のみで使う担当ボタン */}
       {checkableType === 'Product' && (
         // 確認されていた場合はCSSによって非表示
-        <Card.FooterItem className={clsx({ hidden: checkExists })}>
-          <ProductChecker
-            checkerId={checkerId}
-            checkerName={checkerName}
+        <Card.FooterItem className={clsx({ hidden: isChecked })}>
+          <ResponsibleMentor
+            responsibleUserId={responsibleUserId}
+            responsibleUserName={responsibleUserName}
+            responsibleUserAvatar={responsibleUserAvatar}
             currentUserId={currentUserId}
             productId={checkableId}
-            checkableType={checkableType}
-            checkerAvatar={checkerAvatar}
           />
         </Card.FooterItem>
       )}
       {/* 確認or確認取り消しボタン */}
-      <Card.FooterItem className={clsx({ 'is-sub': checkExists })}>
-        <button
-          // shortcut.jsでhotkey(ctrl+b)の設定に使うid
-          id="js-shortcut-check"
-          className={clsx(
-            'is-block',
-            checkExists
-              ? 'card-main-actions__muted-action'
-              : 'a-button is-sm is-danger'
-          )}
-          onClick={handleToggleCheck}>
-          {buttonLabel}
-        </button>
+      <Card.FooterItem className={clsx({ 'is-sub': isChecked })}>
+        {isChecked ? (
+          <button
+            // shortcut.jsでhotkey(ctrl+b)の設定に使うid
+            id="js-shortcut-check"
+            className="is-block card-main-actions__muted-action"
+            onClick={handleDeleteCheck}>
+            {`${checkableName}の確認を取り消す`}
+          </button>
+        ) : (
+          <button
+            // shortcut.jsでhotkey(ctrl+b)の設定に使うid
+            id="js-shortcut-check"
+            className="is-block a-button is-sm is-danger"
+            onClick={handleCreateCheckClick}>
+            {`${checkableName}を確認`}
+          </button>
+        )}
       </Card.FooterItem>
     </Card.Footer>
   )

app/javascript/components/Check/CheckStamp.jsx

@@ -1,23 +1,18 @@
 import React from 'react'
 import { useCheck } from './useCheck'
 
-const CheckStamp = ({ checkableId, checkableType }) => {
-  const { checkExists, createdAt, userName } = useCheck(
-    checkableId,
-    checkableType
-  )
+const CheckStamp = () => {
+  const { isChecked, createdAt, checkerUserName } = useCheck()
 
-  return (
-    checkExists && (
-      <div className="stamp stamp-approve">
-        <h2 className="stamp__content is-title">確認済</h2>
-        <time className="stamp__content is-created-at">{createdAt}</time>
-        <div className="stamp__content is-user-name">
-          <div className="stamp__content-inner">{userName}</div>
-        </div>
+  return isChecked ? (
+    <div className="stamp stamp-approve">
+      <h2 className="stamp__content is-title">確認済</h2>
+      <time className="stamp__content is-created-at">{createdAt}</time>
+      <div className="stamp__content is-user-name">
+        <div className="stamp__content-inner">{checkerUserName}</div>
       </div>
-    )
-  )
+    </div>
+  ) : null
 }
 
 export default CheckStamp

app/javascript/components/Check/checkApi.js

@@ -1,46 +1,50 @@
 import CSRF from '../../csrf'
 
-export const checkClient = (checkId, checkableId, checkableType) => {
+const createCheck = async (checkableId, checkableType) => {
   const params = {
     checkable_id: checkableId,
     checkable_type: checkableType
   }
 
-  const createCheck = async () => {
-    const res = await fetch('/api/checks', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8',
-        'X-Requested-With': 'XMLHttpRequest',
-        'X-CSRF-Token': CSRF.getToken()
-      },
-      credentials: 'same-origin',
-      redirect: 'manual',
-      body: JSON.stringify(params)
-    })
-    if (!res.ok) {
-      throw new Error('確認でエラーが起こりました')
-    }
-    return res
+  const res = await fetch('/api/checks', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json; charset=utf-8',
+      'X-Requested-With': 'XMLHttpRequest',
+      'X-CSRF-Token': CSRF.getToken()
+    },
+    credentials: 'same-origin',
+    redirect: 'manual',
+    body: JSON.stringify(params)
+  })
+  if (!res.ok) {
+    const check = await res.json()
+    throw new Error(check.message)
   }
+  return res
+}
 
-  const deleteCheck = async () => {
-    const res = await fetch(`/api/checks/${checkId}`, {
-      method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8',
-        'X-Requested-With': 'XMLHttpRequest',
-        'X-CSRF-Token': CSRF.getToken()
-      },
-      credentials: 'same-origin',
-      redirect: 'manual',
-      body: JSON.stringify(params)
-    })
-    if (!res.ok) {
-      throw new Error('確認の取り消しでエラーが起こりました')
-    }
-    return res
+const deleteCheck = async (checkId, checkableId, checkableType) => {
+  const params = {
+    checkable_id: checkableId,
+    checkable_type: checkableType
   }
 
-  return { createCheck, deleteCheck }
+  const res = await fetch(`/api/checks/${checkId}`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json; charset=utf-8',
+      'X-Requested-With': 'XMLHttpRequest',
+      'X-CSRF-Token': CSRF.getToken()
+    },
+    credentials: 'same-origin',
+    redirect: 'manual',
+    body: JSON.stringify(params)
+  })
+  if (!res.ok) {
+    throw new Error('確認の取り消しでエラーが起こりました')
+  }
+  return res
 }
+
+export { createCheck, deleteCheck }

app/javascript/components/Check/useCheck.js

@@ -1,24 +1,36 @@
-import { useEffect } from 'react'
+import { useEffect, useCallback } from 'react'
 import toast from '../../toast'
 import { useZustandStore } from '../../hooks/useZustandStore.js'
 import { useShallow } from 'zustand/react/shallow'
-import { checkClient } from './checkApi'
+import { createCheck, deleteCheck } from './checkApi'
 
-export const useCheck = (checkableId, checkableType) => {
-  const [{ checkId, createdAt, userName }, setCheckable] = useZustandStore(
-    useShallow((state) => [state.checkable, state.setCheckable])
+// 同じページ内の1箇所でのみ呼ぶこと
+export const useInitializeCheck = (checkableId, checkableType) => {
+  const { setCheckable } = useZustandStore(
+    useShallow((state) => state.checkable)
   )
+  // Apiからcheckableの値を受け取るための初期化
+  // もし使えるならcontextを使って初期化した方が良い
+  // https://docs.pmnd.rs/zustand/guides/initialize-state-with-props
+  useEffect(() => {
+    setCheckable({ checkableId, checkableType })
+  }, [])
+}
 
-  const { createCheck, deleteCheck } = checkClient(
+// useInitializeCheckを読んだ後なら同じページ内の複数箇所で使えてデータは同期されます
+export const useCheck = () => {
+  const {
     checkId,
+    isChecked,
+    createdAt,
+    checkerUserName,
     checkableId,
-    checkableType
-  )
+    checkableType,
+    setCheckable
+  } = useZustandStore(useShallow((state) => state.checkable))
 
-  const checkExists = !!checkId
-
-  const onCreateCheck = () => {
-    createCheck()
+  const handleCreateCheck = useCallback(() => {
+    createCheck(checkableId, checkableType)
       .then(() => {
         setCheckable({ checkableId, checkableType })
         const message = {
@@ -31,10 +43,10 @@ export const useCheck = (checkableId, checkableType) => {
         console.error(error)
         toast.methods.toast(error.message, 'error')
       })
-  }
+  }, [checkableId, checkableType])
 
-  const onDeleteCheck = () => {
-    deleteCheck()
+  const handleDeleteCheck = useCallback(() => {
+    deleteCheck(checkId, checkableId, checkableType)
       .then(() => {
         setCheckable({ checkableId, checkableType })
         const message = {
@@ -47,20 +59,13 @@ export const useCheck = (checkableId, checkableType) => {
         console.error(error)
         toast.methods.toast(error.message, 'error')
       })
-  }
-
-  // Apiからcheckableの値を受け取るための初期化
-  // もし使えるならcontextを使って初期化した方が良い
-  // https://docs.pmnd.rs/zustand/guides/initialize-state-with-props
-  useEffect(() => {
-    setCheckable({ checkableId, checkableType })
-  }, [checkableId, checkableType])
+  }, [checkId, checkableId, checkableType])
 
   return {
-    checkExists,
+    isChecked,
     createdAt,
-    userName,
-    onCreateCheck,
-    onDeleteCheck
+    checkerUserName,
+    handleCreateCheck,
+    handleDeleteCheck
   }
 }