Merge pull request #8255 from fjordllc/chore/user-icon-to-non-vue-react

user-iconを非React化した
fjordllc · Feb 4, 2025 · 3df9258 · 3df9258
2 parents 21bb1bc + 1ac7ccd
commit 3df9258
Show file tree

Hide file tree

Showing 12 changed files with 207 additions and 217 deletions.
diff --git a/app/javascript/components/Bookmarks.jsx b/app/javascript/components/Bookmarks.jsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import useSWR, { useSWRConfig } from 'swr'
 import fetcher from '../fetcher'
 import Bootcamp from '../bootcamp'
-import UserIcon from './UserIcon'
+import userIcon from '../user-icon.js'
 import Pagination from './Pagination'
 import usePage from './hooks/usePage'
 
@@ -140,6 +140,24 @@ const EditButton = ({ editable, setEditable }) => {
 }
 
 const Bookmark = ({ bookmark, editable, bookmarksUrl, _setEditable }) => {
+  // userIconの非React化により、useRef,useEffectを導入している。
+  const userIconRef = useRef(null)
+  useEffect(() => {
+    const linkClass = 'card-list-item__user-link'
+    const imgClasses = ['card-list-item__user-icon', 'a-user-icon']
+
+    const userIconElement = userIcon({
+      user: bookmark.user,
+      linkClass,
+      imgClasses
+    })
+
+    if (userIconRef.current) {
+      userIconRef.current.innerHTML = ''
+      userIconRef.current.appendChild(userIconElement)
+    }
+  }, [bookmark.user])
+
   const date = bookmark.reported_on || bookmark.created_at
   const createdAt = Bootcamp.iso8601ToFullTime(date)
   const { mutate } = useSWRConfig()
@@ -157,9 +175,7 @@ const Bookmark = ({ bookmark, editable, bookmarksUrl, _setEditable }) => {
     <div className={'card-list-item is-' + bookmark.bookmark_class_name}>
       <div className="card-list-item__inner">
         {bookmark.modelName === 'Talk' ? (
-          <div className="card-list-item__user">
-            <UserIcon user={bookmark.user} blockClassSuffix="card-list-item" />
-          </div>
+          <div className="card-list-item__user" ref={userIconRef}></div>
         ) : (
           <div className="card-list-item__label">{bookmark.modelNameI18n}</div>
         )}

diff --git a/app/javascript/components/BookmarksInDashboard.jsx b/app/javascript/components/BookmarksInDashboard.jsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import useSWR, { useSWRConfig } from 'swr'
 import fetcher from '../fetcher'
 import Bootcamp from '../bootcamp'
-import UserIcon from './UserIcon'
+import userIcon from '../user-icon.js'
 import { toast } from '../toast_react'
 
 export default function BookmarksInDashboard() {
@@ -77,6 +77,24 @@ const EditButton = ({ editable, setEditable }) => {
 }
 
 const Bookmark = ({ bookmark, editable, bookmarksUrl }) => {
+  // userIconの非React化により、useRef,useEffectを導入している。
+  const userIconRef = useRef(null)
+  useEffect(() => {
+    const linkClass = 'card-list-item__user-link'
+    const imgClasses = ['card-list-item__user-icon', 'a-user-icon']
+
+    const userIconElement = userIcon({
+      user: bookmark.user,
+      linkClass,
+      imgClasses
+    })
+
+    if (userIconRef.current) {
+      userIconRef.current.innerHTML = ''
+      userIconRef.current.appendChild(userIconElement)
+    }
+  }, [bookmark.user])
+
   const date = bookmark.reported_on || bookmark.created_at
   const createdAt = Bootcamp.iso8601ToFullTime(date)
   const { mutate } = useSWRConfig()
@@ -95,9 +113,7 @@ const Bookmark = ({ bookmark, editable, bookmarksUrl }) => {
     <div className={'card-list-item is-' + bookmark.bookmark_class_name}>
       <div className="card-list-item__inner">
         {bookmark.modelName === 'Talk' ? (
-          <div className="card-list-item__user">
-            <UserIcon user={bookmark.user} blockClassSuffix="card-list-item" />
-          </div>
+          <div className="card-list-item__user" ref={userIconRef}></div>
         ) : (
           <div className="card-list-item__label">{bookmark.modelNameI18n}</div>
         )}

diff --git a/app/javascript/components/Company.jsx b/app/javascript/components/Company.jsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
+import userIcon from '../user-icon.js'
 
 export default function Company({ company }) {
   if (company.users.length === 0) {
@@ -39,28 +40,32 @@ function UserGroupHeader({ company }) {
 }
 
 function UserIcons({ users }) {
+  // userIconの非React化により、useRef,useEffectを導入している。
+  const userIconRef = useRef(null)
+  useEffect(() => {
+    const linkClass = 'a-user-icons__item-link'
+    const imgClasses = ['a-user-icons__item-icon', 'a-user-icon']
+
+    const userIconElements = users.map((user) => {
+      return userIcon({
+        user,
+        linkClass,
+        imgClasses,
+        loginName: user.login_name
+      })
+    })
+
+    if (userIconRef.current) {
+      userIconRef.current.innerHTML = ''
+      userIconElements.forEach((element) => {
+        userIconRef.current.appendChild(element)
+      })
+    }
+  }, [users])
+
   return (
     <div className="a-user-icons">
-      <div className="a-user-icons__items">
-        {users.map((user) => (
-          <UserIcon user={user} key={user.id} />
-        ))}
-      </div>
+      <div className="a-user-icons__items" ref={userIconRef}></div>
     </div>
   )
 }
-
-function UserIcon({ user }) {
-  return (
-    <a className="a-user-icons__item-link" href={user.url}>
-      <span className={`a-user-role is-${user.primary_role}`}>
-        <img
-          src={user.avatar_url}
-          title={user.icon_title}
-          data-login-name={user.login_name}
-          className="a-user-icons__item-icon a-user-icon"
-        />
-      </span>
-    </a>
-  )
-}
diff --git a/app/javascript/components/Events.jsx b/app/javascript/components/Events.jsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import useSWR from 'swr'
 import Pagination from './Pagination'
 import LoadingListPlaceholder from './LoadingListPlaceholder'
-import UserIcon from './UserIcon'
+import userIcon from '../user-icon.js'
 import fetcher from '../fetcher'
 import usePage from './hooks/usePage'
 
@@ -45,12 +45,28 @@ export default function Events() {
 }
 
 function Event({ event }) {
+  // userIconの非React化により、useRef,useEffectを導入している。
+  const userIconRef = useRef(null)
+  useEffect(() => {
+    const linkClass = 'card-list-item__user-link'
+    const imgClasses = ['card-list-item__user-icon', 'a-user-icon']
+
+    const userIconElement = userIcon({
+      user: event.user,
+      linkClass,
+      imgClasses
+    })
+
+    if (userIconRef.current) {
+      userIconRef.current.innerHTML = ''
+      userIconRef.current.appendChild(userIconElement)
+    }
+  }, [event.user])
+
   return (
     <li className="card-list-item">
       <div className="card-list-item__inner">
-        <div className="card-list-item__user">
-          <UserIcon user={event.user} blockClassSuffix="card-list-item" />
-        </div>
+        <div className="card-list-item__user" ref={userIconRef}></div>
         <div className="card-list-item__rows">
           <div className="card-list-item__row">
             <div className="card-list-item-title">

diff --git a/app/javascript/components/Notification.jsx b/app/javascript/components/Notification.jsx
@@ -1,10 +1,28 @@
-import React from 'react'
-import UserIcon from './UserIcon'
+import React, { useEffect, useRef } from 'react'
+import userIcon from '../user-icon.js'
 import dayjs from 'dayjs'
 import ja from 'dayjs/locale/ja'
 dayjs.locale(ja)
 
 export default function Notification({ notification }) {
+  // userIconの非React化により、useRef,useEffectを導入している。
+  const userIconRef = useRef(null)
+  useEffect(() => {
+    const linkClass = 'card-list-item__user-link'
+    const imgClasses = ['card-list-item__user-icon', 'a-user-icon']
+
+    const userIconElement = userIcon({
+      user: notification.sender,
+      linkClass,
+      imgClasses
+    })
+
+    if (userIconRef.current) {
+      userIconRef.current.innerHTML = ''
+      userIconRef.current.appendChild(userIconElement)
+    }
+  }, [notification.sender])
+
   const createdAt = dayjs(notification.created_at).format(
     'YYYY年MM月DD日(ddd) HH:mm'
   )
@@ -15,12 +33,7 @@ export default function Notification({ notification }) {
         notification.read ? 'is-read' : 'is-unread'
       }`}>
       <div className="card-list-item__inner">
-        <div className="card-list-item__user">
-          <UserIcon
-            user={notification.sender}
-            blockClassSuffix="card-list-item"
-          />
-        </div>
+        <div className="card-list-item__user" ref={userIconRef}></div>
         <div className="card-list-item__rows">
           <div className="card-list-item__row">
             <div className="card-list-item-title">

diff --git a/app/javascript/components/Product.jsx b/app/javascript/components/Product.jsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import UserIcon from './UserIcon'
+import React, { useEffect, useRef } from 'react'
+import userIcon from '../user-icon.js'
 import ProductChecker from './ProductChecker'
 
 export default function Product({
@@ -9,6 +9,24 @@ export default function Product({
   currentUserId,
   elapsedDays
 }) {
+  // userIconの非React化により、useRef,useEffectを導入している。
+  const userIconRef = useRef(null)
+  useEffect(() => {
+    const linkClass = 'card-list-item__user-link'
+    const imgClasses = ['card-list-item__user-icon', 'a-user-icon']
+
+    const userIconElement = userIcon({
+      user: product.user,
+      linkClass,
+      imgClasses
+    })
+
+    if (userIconRef.current) {
+      userIconRef.current.innerHTML = ''
+      userIconRef.current.appendChild(userIconElement)
+    }
+  }, [product.user])
+
   const notRespondedSign = () => {
     return (
       product.self_last_commented_at_date_time >
@@ -20,9 +38,7 @@ export default function Product({
   return (
     <div className="card-list-item has-assigned">
       <div className="card-list-item__inner">
-        <div className="card-list-item__user">
-          <UserIcon user={product.user} blockClassSuffix="card-list-item" />
-        </div>
+        <div className="card-list-item__user" ref={userIconRef}></div>
         <div className="card-list-item__rows">
           <div className="card-list-item__row">
             <div className="card-list-item-title">
@@ -158,25 +174,29 @@ const TimeInfo = ({ product, elapsedDays }) => {
 }
 
 const UserIcons = ({ users }) => {
-  return (
-    <div className="card-list-item__user-icons">
-      {users.map((user) => (
-        <a
-          key={user.url}
-          href={user.url}
-          className="card-list-item__user-icons-icon">
-          <span className={`a-user-role is-${user.primary_role}`}>
-            <img
-              title={user.icon_title}
-              alt={user.icon_title}
-              src={user.avatar_url}
-              className="a-user-icon"
-            />
-          </span>
-        </a>
-      ))}
-    </div>
-  )
+  // userIconの非React化により、useRef,useEffectを導入している。
+  const userIconRef = useRef(null)
+  useEffect(() => {
+    const linkClass = 'card-list-item__user-icons-icon'
+    const imgClasses = ['a-user-icon']
+
+    const userIconElements = users.map((user) => {
+      return userIcon({
+        user,
+        linkClass,
+        imgClasses
+      })
+    })
+
+    if (userIconRef.current) {
+      userIconRef.current.innerHTML = ''
+      userIconElements.forEach((element) => {
+        userIconRef.current.appendChild(element)
+      })
+    }
+  }, [users])
+
+  return <div className="card-list-item__user-icons" ref={userIconRef}></div>
 }
 
 const LastCommentedTime = ({ product }) => {

diff --git a/app/javascript/components/RegularEvent.jsx b/app/javascript/components/RegularEvent.jsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import UserIcon from './UserIcon'
+import React, { useEffect, useRef } from 'react'
+import userIcon from '../user-icon.js'
 
 const RegularEvent = ({ regularEvent }) => {
   const categoryClass =
@@ -67,22 +67,38 @@ const EventTitle = ({ event }) => {
 }
 
 const EventOrganizers = ({ event }) => {
+  // userIconの非React化により、useRef,useEffectを導入している。
+  const userIconRef = useRef(null)
+  useEffect(() => {
+    const linkClass = 'card-list-item__user-link'
+    const imgClasses = ['card-list-item__user-icon', 'a-user-icon']
+
+    const userIconElements = event.organizers.map((organizer) => {
+      return userIcon({
+        user: organizer,
+        linkClass,
+        imgClasses
+      })
+    })
+
+    if (userIconRef.current) {
+      userIconRef.current.innerHTML = ''
+      userIconElements.forEach((element) => {
+        userIconRef.current.appendChild(element)
+      })
+    }
+  }, [event.organizers])
+
   return (
     <>
       {event.organizers.length > 0 && (
         <div className="card-list-item-meta__item">
           <div className="a-meta">
             <div className="a-meta__label">主催</div>
             <div className="a-meta__value">
-              <div className="card-list-item__user-icons">
-                {event.organizers.map((organizer) => (
-                  <UserIcon
-                    key={organizer.id}
-                    user={organizer}
-                    blockClassSuffix="card-list-item"
-                  />
-                ))}
-              </div>
+              <div
+                className="card-list-item__user-icons"
+                ref={userIconRef}></div>
             </div>
           </div>
         </div>