81110 show likers picture

packages/app/src/components/LikeButtons.jsx

@@ -17,12 +17,18 @@ class LegacyLikeButtons extends React.Component {
 
     this.state = {
       isPopoverOpen: false,
+      likers: [],
     };
 
     this.togglePopover = this.togglePopover.bind(this);
     this.handleClick = this.handleClick.bind(this);
   }
 
+  componentDidMount() {
+    this.props.appContainer.apiGet('/users.list', { user_ids: [...this.props.likerIds].join(',') })
+      .then((res) => { this.setState({ likers: res.users }) });
+  }
+
   togglePopover() {
     this.setState(prevState => ({
       ...prevState,
@@ -67,7 +73,7 @@ class LegacyLikeButtons extends React.Component {
         <Popover placement="bottom" isOpen={this.state.isPopoverOpen} target="po-total-likes" toggle={this.togglePopover} trigger="legacy">
           <PopoverBody className="seen-user-popover">
             <div className="px-2 text-right user-list-content text-truncate text-muted">
-              {likerIds.length ? <UserPictureList users={likerIds} /> : t('No users have liked this yet.')}
+              {likerIds.length ? <UserPictureList users={this.state.likers} /> : t('No users have liked this yet.')}
             </div>
           </PopoverBody>
         </Popover>

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

@@ -55,7 +55,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
         <PageReactionButtons
           pageId={pageId}
           sumOfLikers={sumOfLikers}
-          likerIds={likerIds}
+          likerIds={likerIds || []}
           isLiked={isLiked}
           onLikeClicked={likeClickhandler}
         >