Merge pull request #4723 from weseek/feat/77524-81110-show-liker-icon

Feat/77524 81110 show liker icon

packages/app/src/components/LikeButtons.jsx

@@ -1,99 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
-import UserPictureList from './User/UserPictureList';
-import { withUnstatedContainers } from './UnstatedUtils';
-
-import AppContainer from '~/client/services/AppContainer';
-
-// TODO : user image not displayed in search page. Fix it.
-// task : https://estoc.weseek.co.jp/redmine/issues/81110
-class LegacyLikeButtons extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isPopoverOpen: false,
-    };
-
-    this.togglePopover = this.togglePopover.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  togglePopover() {
-    this.setState(prevState => ({
-      ...prevState,
-      isPopoverOpen: !prevState.isPopoverOpen,
-    }));
-  }
-
-
-  handleClick() {
-    if (this.props.onLikeClicked == null) {
-      return;
-    }
-    this.props.onLikeClicked();
-  }
-
-  render() {
-    const {
-      appContainer, likerIds, sumOfLikers, isLiked, t,
-    } = this.props;
-    const { isGuestUser } = appContainer;
-
-    return (
-      <div className="btn-group" role="group" aria-label="Like buttons">
-        <button
-          type="button"
-          id="like-button"
-          onClick={this.handleClick}
-          className={`btn btn-like border-0
-            ${isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
-        >
-          <i className="icon-like"></i>
-        </button>
-        {isGuestUser && (
-          <UncontrolledTooltip placement="top" target="like-button" fade={false}>
-            {t('Not available for guest')}
-          </UncontrolledTooltip>
-        )}
-
-        <button type="button" id="po-total-likes" className={`btn btn-like border-0 total-likes ${isLiked ? 'active' : ''}`}>
-          {sumOfLikers}
-        </button>
-        <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.')}
-            </div>
-          </PopoverBody>
-        </Popover>
-      </div>
-    );
-  }
-
-}
-
-/**
- * Wrapper component for using unstated
- */
-const LegacyLikeButtonsWrapper = withUnstatedContainers(LegacyLikeButtons, [AppContainer]);
-
-LegacyLikeButtons.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  onChangeInvoked: PropTypes.func,
-  pageId: PropTypes.string.isRequired,
-  likerIds: PropTypes.arrayOf(PropTypes.object).isRequired,
-  sumOfLikers: PropTypes.number.isRequired,
-  isLiked: PropTypes.bool.isRequired,
-  onLikeClicked: PropTypes.func,
-  t: PropTypes.func.isRequired,
-};
-const LikeButtons = (props) => {
-  return <LegacyLikeButtonsWrapper {...props}></LegacyLikeButtonsWrapper>;
-};
-
-export default withTranslation()(LikeButtons);

packages/app/src/components/LikeButtons.tsx

@@ -0,0 +1,81 @@
+import React, { FC, useState } from 'react';
+
+import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+import UserPictureList from './User/UserPictureList';
+import { withUnstatedContainers } from './UnstatedUtils';
+
+import AppContainer from '~/client/services/AppContainer';
+import { IUser } from '../interfaces/user';
+
+type LikeButtonsProps = {
+  appContainer: AppContainer,
+  sumOfLikers: number,
+  isLiked: boolean,
+  likers: IUser[],
+  onLikeClicked?: ()=>void,
+  t: (s:string)=>string,
+}
+
+const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const togglePopover = () => {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+
+
+  const handleClick = () => {
+    if (props.onLikeClicked == null) {
+      return;
+    }
+    props.onLikeClicked();
+  };
+
+  const {
+    appContainer, isLiked, sumOfLikers, t,
+  } = props;
+  const { isGuestUser } = appContainer;
+
+  return (
+    <div className="btn-group" role="group" aria-label="Like buttons">
+      <button
+        type="button"
+        id="like-button"
+        onClick={handleClick}
+        className={`btn btn-like border-0
+            ${isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
+      >
+        <i className="icon-like"></i>
+      </button>
+      {isGuestUser && (
+        <UncontrolledTooltip placement="top" target="like-button" fade={false}>
+          {t('Not available for guest')}
+        </UncontrolledTooltip>
+      )}
+
+      <button type="button" id="po-total-likes" className={`btn btn-like border-0 total-likes ${isLiked ? 'active' : ''}`}>
+        {sumOfLikers}
+      </button>
+      <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">
+            {props.likers.length ? <UserPictureList users={props.likers} /> : t('No users have liked this yet.')}
+          </div>
+        </PopoverBody>
+      </Popover>
+    </div>
+  );
+
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const LikeButtonsUnstatedWrapper = withUnstatedContainers(LikeButtons, [AppContainer]);
+
+const LikeButtonsWrapper = (props) => {
+  return <LikeButtonsUnstatedWrapper {...props}></LikeButtonsUnstatedWrapper>;
+};
+
+export default withTranslation()(LikeButtonsWrapper);

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';
@@ -11,7 +11,7 @@ import { useSWRPageInfo } from '../../stores/page';
 import { useSWRBookmarkInfo } from '../../stores/bookmark';
 import { toastError } from '../../client/util/apiNotification';
 import { apiv3Put } from '../../client/util/apiv3-client';
-
+import { useSWRxLikerList } from '../../stores/user';
 
 type SubNavButtonsProps= {
   appContainer: AppContainer,
@@ -33,9 +33,11 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
   const { isGuestUser } = appContainer;
 
   const { data: pageInfo, error: pageInfoError, mutate: mutatePageInfo } = useSWRPageInfo(pageId);
+  const { data: likers } = useSWRxLikerList(pageInfo?.likerIds);
   const { data: bookmarkInfo, error: bookmarkInfoError, mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(pageId);
 
   const likeClickhandler = useCallback(async() => {
+    const { isGuestUser } = appContainer;
     if (isGuestUser) {
       return;
     }
@@ -64,7 +66,6 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     }
   }, [bookmarkInfo]);
 
-
   if (pageInfoError != null || pageInfo == null) {
     return <></>;
   }
@@ -73,17 +74,16 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     return <></>;
   }
 
-  const { sumOfLikers, likerIds, isLiked } = pageInfo;
+  const { sumOfLikers, isLiked } = pageInfo;
   const { sumOfBookmarks, isBookmarked } = bookmarkInfo;
 
   return (
     <>
       {isViewMode && (
         <PageReactionButtons
-          pageId={pageId}
           sumOfLikers={sumOfLikers}
-          likerIds={likerIds}
           isLiked={isLiked}
+          likers={likers || []}
           onLikeClicked={likeClickhandler}
           sumOfBookmarks={sumOfBookmarks}
           isBookmarked={isBookmarked}

packages/app/src/components/PageReactionButtons.tsx

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

packages/app/src/stores/user.tsx

@@ -0,0 +1,10 @@
+import useSWR, { SWRResponse } from 'swr';
+import { IUser } from '../interfaces/user';
+import { apiGet } from '../client/util/apiv1-client';
+
+export const useSWRxLikerList = (likerIds: string[] = []): SWRResponse<IUser[], Error> => {
+  const shouldFetch = likerIds.length > 0;
+  return useSWR(shouldFetch ? ['/users.list', [...likerIds].join(',')] : null, (endpoint:string, userIds:string) => {
+    return apiGet(endpoint, { user_ids: userIds }).then((response:any) => response.users);
+  });
+};