feat: implement useSWRInifinitexRecentlyUpdated

https://youtrack.weseek.co.jp/issue/GW-7757
- Implement new function useSWRInifinitexRecentlyUpdated
- Implement useSWRInifinitexRecentlyUpdated in RecentChanges

packages/app/src/components/Sidebar/RecentChanges.tsx

@@ -10,7 +10,7 @@ import { UserPicture, FootstampIcon } from '@growi/ui';
 import { DevidedPagePath } from '@growi/core';
 
 import PagePathHierarchicalLink from '~/components/PagePathHierarchicalLink';
-import { useSWRxRecentlyUpdated } from '~/stores/page';
+import { useSWRxRecentlyUpdated, useSWRInifinitexRecentlyUpdated } from '~/stores/page';
 import loggerFactory from '~/utils/logger';
 
 import LinkedPagePath from '~/models/linked-page-path';
@@ -124,8 +124,7 @@ SmallPageItem.propTypes = {
 const RecentChanges = (): JSX.Element => {
 
   const { t } = useTranslation();
-  const { data: pages, mutate } = useSWRxRecentlyUpdated();
-
+  const { data: pages, mutate } = useSWRInifinitexRecentlyUpdated();
   const [isRecentChangesSidebarSmall, setIsRecentChangesSidebarSmall] = useState(false);
 
   const retrieveSizePreferenceFromLocalStorage = useCallback(() => {
@@ -167,7 +166,7 @@ const RecentChanges = (): JSX.Element => {
       </div>
       <div className="grw-recent-changes p-3">
         <ul className="list-group list-group-flush">
-          {(pages || []).map(page => (isRecentChangesSidebarSmall
+          {(pages ? pages[0] : []).map(page => (isRecentChangesSidebarSmall
             ? <SmallPageItem key={page._id} page={page} />
             : <LargePageItem key={page._id} page={page} />))}
         </ul>

packages/app/src/stores/page.tsx

@@ -1,4 +1,5 @@
 import useSWR, { SWRResponse } from 'swr';
+import useSWRInfinite, { SWRInfiniteResponse } from 'swr/infinite';
 import useSWRImmutable from 'swr/immutable';
 
 import { apiv3Get } from '~/client/util/apiv3-client';
@@ -33,7 +34,12 @@ export const useSWRxRecentlyUpdated = (): SWRResponse<(IPageHasId)[], Error> =>
     endpoint => apiv3Get<{ pages:(IPageHasId)[] }>(endpoint).then(response => response.data?.pages),
   );
 };
-
+export const useSWRInifinitexRecentlyUpdated = () : SWRInfiniteResponse<(IPageHasId)[], Error> => {
+  return useSWRInfinite(
+    (offset: number) => `/pages/recent?offset=${offset + 1}&limit=20`,
+    (endpoint: string) => apiv3Get<{ pages:(IPageHasId)[], offset: number, limit: number }>(endpoint).then(response => response.data?.pages),
+  );
+};
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const useSWRxPageList = (path: string | null, pageNumber?: number, termNumber?: number): SWRResponse<IPagingResult<IPageHasId>, Error> => {