81110 pass likers from parent component to LikeButton

packages/app/src/components/LikeButtons.tsx

@@ -7,10 +7,15 @@ import { withUnstatedContainers } from './UnstatedUtils';
 
 import AppContainer from '~/client/services/AppContainer';
 import { useSWRPageInfo } from '../stores/page';
+import { IUser } from '../interfaces/user';
 
 type LegacyLikeButtonsProps = {
   appContainer: AppContainer,
+  likerIds: string[],
+  sumOfLikers: number,
+  isLiked: boolean,
   pageId: string,
+  likers: IUser[],
   onLikeClicked?: ()=>void,
   t: (s:string)=>string,
 }
@@ -19,20 +24,8 @@ type LegacyLikeButtonsProps = {
 // task : https://estoc.weseek.co.jp/redmine/issues/81110
 const LegacyLikeButtons: FC<LegacyLikeButtonsProps> = (props: LegacyLikeButtonsProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [likers, setLikers] = useState([]);
   const { data: pageInfo } = useSWRPageInfo(props.pageId);
 
-  const updateLikers = async() => {
-    if (pageInfo != null) {
-      const res: any = await props.appContainer.apiGet('/users.list', { user_ids: [...pageInfo.likerIds].join(',') });
-      setLikers(res.users);
-    }
-  };
-
-  useEffect(() => {
-    updateLikers();
-  }, [pageInfo]);
-
   const togglePopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
   };
@@ -73,7 +66,7 @@ const LegacyLikeButtons: FC<LegacyLikeButtonsProps> = (props: LegacyLikeButtonsP
       <Popover placement="bottom" isOpen={isPopoverOpen} target="po-total-likes" toggle={togglePopover} trigger="legacy">
         <PopoverBody className="seen-user-popover">
           <div className="px-2 text-right user-list-content text-truncate text-muted">
-            {likers.length ? <UserPictureList users={likers} /> : t('No users have liked this yet.')}
+            {props.likers.length ? <UserPictureList users={props.likers} /> : t('No users have liked this yet.')}
           </div>
         </PopoverBody>
       </Popover>

packages/app/src/components/Navbar/SubNavButtons.tsx

@@ -1,5 +1,5 @@
 import React, {
-  FC, useCallback,
+  FC, useCallback, useState, useEffect,
 } from 'react';
 import AppContainer from '../../client/services/AppContainer';
 import NavigationContainer from '../../client/services/NavigationContainer';
@@ -25,7 +25,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
   const { editorMode } = navigationContainer.state;
   const isViewMode = editorMode === 'view';
   const { data: pageInfo, error: pageInfoError, mutate: mutatePageInfo } = useSWRPageInfo(pageId);
-
+  const [likers, setLikers] = useState([]);
   const likeClickhandler = useCallback(async() => {
     const { isGuestUser } = appContainer;
 
@@ -43,16 +43,31 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     }
   }, [pageInfo]);
 
+  const updateLikers = async() => {
+    if (pageInfo != null && pageInfo.likerIds.length > 0) {
+      const res: any = await props.appContainer.apiGet('/users.list', { user_ids: [...pageInfo.likerIds].join(',') });
+      setLikers(res.users);
+    }
+  };
+
+  useEffect(() => {
+    updateLikers();
+  }, [pageInfo]);
 
   if (pageInfoError != null || pageInfo == null) {
     return <></>;
   }
+  const { sumOfLikers, likerIds, isLiked } = pageInfo;
 
   return (
     <>
       {isViewMode && (
         <PageReactionButtons
           pageId={pageId}
+          sumOfLikers={sumOfLikers}
+          likerIds={likerIds}
+          isLiked={isLiked}
+          likers={likers || []}
           onLikeClicked={likeClickhandler}
         >
         </PageReactionButtons>

packages/app/src/components/PageReactionButtons.tsx

@@ -1,22 +1,35 @@
 import React, { FC } from 'react';
 import LikeButtons from './LikeButtons';
-
+import { IUser } from '../interfaces/user';
 
 type Props = {
   pageId: string,
+  sumOfLikers: number,
+  likerIds: string[],
+  isLiked: boolean,
+  likers: IUser[],
   onLikeClicked: (isLiked : boolean)=>void,
 }
 
 
 const PageReactionButtons : FC<Props> = (props: Props) => {
   const {
-    pageId, onLikeClicked,
+    pageId, sumOfLikers, likerIds, isLiked, likers, onLikeClicked,
   } = props;
 
+
   return (
     <>
       <span>
-        <LikeButtons onLikeClicked={onLikeClicked} pageId={pageId}></LikeButtons>
+        <LikeButtons
+          onLikeClicked={onLikeClicked}
+          pageId={pageId}
+          likerIds={likerIds}
+          sumOfLikers={sumOfLikers}
+          isLiked={isLiked}
+          likers={likers}
+        >
+        </LikeButtons>
       </span>
       <span>
         {/*