80481 wip use swr

packages/app/src/components/PageReactionButtons.tsx

@@ -6,6 +6,9 @@ import { apiv3Get } from '../client/util/apiv3-client';
 type Props = {
   pageId: string,
   currentUserId: string,
+  likerSum: number,
+  likerIds: string[],
+  isAlreadyLiked: boolean,
 }
 
 const LikeButtonsWrapper = (props) => {

packages/app/src/components/SearchPage/SearchResultSubNavButton.tsx

@@ -6,6 +6,7 @@ import { withUnstatedContainers } from '../UnstatedUtils';
 
 import PageReactionButtons from '../PageReactionButtons';
 import PageManagement from '../Page/PageManagement';
+import { useSWRPageInfo } from '../../stores/page';
 
 
 type SearchResultSubNavButtonProps = {
@@ -16,10 +17,19 @@ type SearchResultSubNavButtonProps = {
 }
 const SearchResultSubNavButton: FC<SearchResultSubNavButtonProps> = (props: SearchResultSubNavButtonProps) => {
   const { appContainer, isCompactMode, pageId } = props;
-
+  const { data: pageInfo, error: pageInfoError } = useSWRPageInfo(pageId);
   return (
     <>
-      <PageReactionButtons pageId={pageId} currentUserId={appContainer.currentUserId}></PageReactionButtons>
+      {pageInfo != null && !pageInfoError && (
+        <PageReactionButtons
+          pageId={pageId}
+          currentUserId={appContainer.currentUserId}
+          likerSum={pageInfo.sumOfLikers}
+          likerIds={pageInfo.likerIds}
+          isAlreadyLiked={pageInfo.isLiked}
+        >
+        </PageReactionButtons>
+      )}
       {/*
         TODO :
         once 80335 is done, merge 77543 branch(parent of 80335) into 77524.

packages/app/src/stores/page.tsx

@@ -31,3 +31,28 @@ export const useSWRxPageList = (
     }),
   );
 };
+
+
+type pageInfo = {
+  sumOfLikers: number,
+  likerIds:string[],
+  seenUserIds: string[],
+  sumOfSeenUsers: number,
+  isSeen: boolean,
+  isLiked:boolean,
+}
+export const useSWRPageInfo = (pageId: string) : SWRResponse<pageInfo, Error> => {
+  return useSWR(
+    `page/info?pageId=${pageId}`,
+    endpoint => apiv3Get(endpoint).then((response) => {
+      return {
+        sumOfLikers: response.data.sumOfLikers,
+        likerIds: response.data.likerIds,
+        seenUserIds: response.data.seenUserIds,
+        sumOfSeenUsers: response.data.sumOfSeenUsers,
+        isSeen: response.data.isSeen,
+        isLiked: response.data?.isLiked,
+      };
+    }),
+  );
+};