81110 typescriptize LikeButton

packages/app/src/components/LikeButtons.jsx

@@ -1,105 +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,
-      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,
-      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={this.state.likers} /> : 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,94 @@
+import React, { FC, useState, useEffect } 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 { useSWRPageInfo } from '../stores/page';
+
+type LegacyLikeButtonsProps = {
+  appContainer: AppContainer,
+  pageId: string,
+  onLikeClicked?: ()=>void,
+  t: (s:string)=>string,
+}
+
+// TODO : user image not displayed in search page. Fix it.
+// 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);
+  };
+
+
+  const handleClick = () => {
+    if (props.onLikeClicked == null) {
+      return;
+    }
+    props.onLikeClicked();
+  };
+
+  const {
+    appContainer, 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
+            ${pageInfo?.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 ${pageInfo?.isLiked ? 'active' : ''}`}>
+        {pageInfo?.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">
+            {likers.length ? <UserPictureList users={likers} /> : t('No users have liked this yet.')}
+          </div>
+        </PopoverBody>
+      </Popover>
+    </div>
+  );
+
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const LegacyLikeButtonsWrapper = withUnstatedContainers(LegacyLikeButtons, [AppContainer]);
+
+const LikeButtons = (props) => {
+  return <LegacyLikeButtonsWrapper {...props}></LegacyLikeButtonsWrapper>;
+};
+
+export default withTranslation()(LikeButtons);