Refactor ThreadList component: remove props and integrate recent threads fetching

apps/app/src/features/openai/client/components/AiAssistant/Sidebar/AiAssistantSubstance.tsx

@@ -3,7 +3,6 @@ import React, { type JSX } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAiAssistantManagementModal, useSWRxAiAssistants } from '../../../stores/ai-assistant';
-import { useSWRINFxRecentThreads } from '../../../stores/thread';
 
 import { AiAssistantTree } from './AiAssistantTree';
 import { ThreadList } from './ThreadList';
@@ -16,7 +15,6 @@ export const AiAssistantContent = (): JSX.Element => {
   const { t } = useTranslation();
   const { open } = useAiAssistantManagementModal();
   const { data: aiAssistants, mutate: mutateAiAssistants } = useSWRxAiAssistants();
-  const { data: recentThreads } = useSWRINFxRecentThreads();
 
   return (
     <div className={moduleClass}>
@@ -59,7 +57,7 @@ export const AiAssistantContent = (): JSX.Element => {
           <h3 className="fw-bold grw-ai-assistant-substance-header">
             最近の項目
           </h3>
-          <ThreadList threadRelations={recentThreads ?? []} />
+          <ThreadList />
         </div>
       </div>
     </div>

apps/app/src/features/openai/client/components/AiAssistant/Sidebar/ThreadList.tsx

@@ -1,48 +1,55 @@
 import React from 'react';
 
-import type { IThreadRelationPaginate } from '../../../../interfaces/thread-relation';
+import InfiniteScroll from '~/client/components/InfiniteScroll';
+import { useSWRINFxRecentThreads } from '~/features/openai/client/stores/thread';
 
-type Props = {
-  threadRelations: IThreadRelationPaginate[];
-}
+export const ThreadList: React.FC = () => {
 
-export const ThreadList: React.FC<Props> = ({ threadRelations }) => {
-  const dummyData = ['アシスタントの有効な活用方法', 'GROWI AI 機能について'];
+  const swrInifiniteThreads = useSWRINFxRecentThreads({ suspense: true });
+  const { data } = swrInifiniteThreads;
+
+  const isEmpty = data?.[0]?.paginateResult.totalDocs === 0;
+  const isReachingEnd = isEmpty || (data != null && (data[data.length - 1].paginateResult.hasNextPage === false));
 
   return (
     <>
       <ul className="list-group">
-        {dummyData.map(thread => (
-          <li
-            role="button"
-            className="list-group-item list-group-item-action border-0 d-flex align-items-center rounded-1"
-            onClick={(e) => {
-              e.stopPropagation();
-              // openChatHandler();
-            }}
-          >
-            <div>
-              <span className="material-symbols-outlined fs-5">chat</span>
-            </div>
-
-            <div className="grw-ai-assistant-title-anchor ps-1">
-              <p className="text-truncate m-auto">{thread ?? 'Untitled thread'}</p>
-            </div>
-
-            <div className="grw-ai-assistant-actions opacity-0 d-flex justify-content-center ">
-              <button
-                type="button"
-                className="btn btn-link text-secondary p-0"
+        <InfiniteScroll swrInifiniteResponse={swrInifiniteThreads} isReachingEnd={isReachingEnd}>
+          { data != null && data.map(thread => thread.paginateResult.docs).flat()
+            .map(thread => (
+              <li
+                key={thread._id}
+                role="button"
+                className="list-group-item list-group-item-action border-0 d-flex align-items-center rounded-1"
                 onClick={(e) => {
                   e.stopPropagation();
-                  // deleteThreadHandler();
+                  // openChatHandler();
                 }}
               >
-                <span className="material-symbols-outlined fs-5">delete</span>
-              </button>
-            </div>
-          </li>
-        ))}
+                <div>
+                  <span className="material-symbols-outlined fs-5">chat</span>
+                </div>
+
+                <div className="grw-ai-assistant-title-anchor ps-1">
+                  <p className="text-truncate m-auto">{thread.title ?? 'Untitled thread'}</p>
+                </div>
+
+                <div className="grw-ai-assistant-actions opacity-0 d-flex justify-content-center ">
+                  <button
+                    type="button"
+                    className="btn btn-link text-secondary p-0"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      // deleteThreadHandler();
+                    }}
+                  >
+                    <span className="material-symbols-outlined fs-5">delete</span>
+                  </button>
+                </div>
+              </li>
+            ))
+          }
+        </InfiniteScroll>
       </ul>
     </>
   );