80481 wip pageContainer dependency

packages/app/src/client/services/PageContainer.js

@@ -292,22 +292,22 @@ export default class PageContainer extends Container {
     await this.retrieveLikersAndSeenUsers();
   }
 
-  async toggleLike() {
-    {
-      const toggledIsLiked = this.state.isLiked;
-      await this.appContainer.apiv3Put('/page/likes', { pageId: this.state.pageId, bool: toggledIsLiked });
-
-      await this.setState(state => ({
-        isLiked: !toggledIsLiked,
-        sumOfLikers: toggledIsLiked ? state.sumOfLikers - 1 : state.sumOfLikers + 1,
-        likerIds: toggledIsLiked
-          ? state.likerIds.filter(id => id !== this.appContainer.currentUserId)
-          : [...this.state.likerIds, this.appContainer.currentUserId],
-      }));
-    }
-
-    await this.retrieveLikersAndSeenUsers();
-  }
+  // async toggleLike() {
+  //   {
+  //     const toggledIsLiked = this.state.isLiked;
+  //     await this.appContainer.apiv3Put('/page/likes', { pageId: this.state.pageId, bool: toggledIsLiked });
+
+  //     await this.setState(state => ({
+  //       isLiked: !toggledIsLiked,
+  //       sumOfLikers: toggledIsLiked ? state.sumOfLikers - 1 : state.sumOfLikers + 1,
+  //       likerIds: toggledIsLiked
+  //         ? state.likerIds.filter(id => id !== this.appContainer.currentUserId)
+  //         : [...this.state.likerIds, this.appContainer.currentUserId],
+  //     }));
+  //   }
+
+  //   await this.retrieveLikersAndSeenUsers();
+  // }
 
   async retrieveLikersAndSeenUsers() {
     const { users } = await this.appContainer.apiGet('/users.list', { user_ids: [...this.state.likerIds, ...this.state.seenUserIds].join(',') });

packages/app/src/components/LikeButtons.jsx

@@ -8,7 +8,7 @@ import { withUnstatedContainers } from './UnstatedUtils';
 
 import { toastError } from '~/client/util/apiNotification';
 import AppContainer from '~/client/services/AppContainer';
-import PageContainer from '~/client/services/PageContainer';
+import { apiv3Get, apiv3Put } from '../client/util/apiv3-client';
 
 // TODO : user image not displayed in search page. Fix it.
 // task : https://estoc.weseek.co.jp/redmine/issues/81110
@@ -22,6 +22,7 @@ class LikeButtons extends React.Component {
     };
 
     this.togglePopover = this.togglePopover.bind(this);
+    this.handleClick = this.handleClick.bind(this);
   }
 
   togglePopover() {
@@ -31,10 +32,31 @@ class LikeButtons extends React.Component {
     }));
   }
 
+  async handleClick() {
+    const {
+      appContainer, pageId, isLiked, onChnageInvoked,
+    } = this.props;
+    const { isGuestUser } = appContainer;
+    if (isGuestUser) {
+      return;
+    }
+    try {
+      await apiv3Put('/page/likes', { pageId, bool: isLiked });
+      if (onChnageInvoked !== null) {
+        onChnageInvoked();
+      }
+      else {
+        return new Error('onChangeInvoked is null');
+      }
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
 
   render() {
     const {
-      appContainer, onClickInvoked, likers, sumOfLikers, isLiked, t,
+      appContainer, likers, sumOfLikers, isLiked, t,
     } = this.props;
     const { isGuestUser } = appContainer;
 
@@ -43,12 +65,7 @@ class LikeButtons extends React.Component {
         <button
           type="button"
           id="like-button"
-          onClick={async() => {
-            if (onClickInvoked == null) {
-              throw Error('onClickInvoked is null');
-            }
-            await onClickInvoked();
-          }}
+          onClick={async() => { await this.handleClick() }}
           className={`btn btn-like border-0
             ${isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
         >
@@ -83,12 +100,13 @@ const LikeButtonsWrapper = withUnstatedContainers(LikeButtons, [AppContainer]);
 
 LikeButtons.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  onClickInvoked: PropTypes.func.isRequired,
+  onChnageInvoked: PropTypes.func,
+  pageId: PropTypes.string.isRequired,
   likers: PropTypes.arrayOf(PropTypes.object),
   sumOfLikers: PropTypes.number.isRequired,
   isLiked: PropTypes.bool.isRequired,
   t: PropTypes.func.isRequired,
-  size: PropTypes.string,
+  // size: PropTypes.string,
 };
 
 export default withTranslation()(LikeButtonsWrapper);

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

@@ -8,8 +8,9 @@ import { withUnstatedContainers } from '../UnstatedUtils';
 import BookmarkButton from '../BookmarkButton';
 import LikeButtons from '../LikeButtons';
 import PageManagement from '../Page/PageManagement';
-import { toastError } from '~/client/util/apiNotification';
+import loggerFactory from '~/utils/logger';
 
+const logger = loggerFactory('growi:SubnavButtons');
 const SubnavButtons = (props) => {
   const {
     appContainer, navigationContainer, pageContainer, isCompactMode,
@@ -21,21 +22,17 @@ const SubnavButtons = (props) => {
   const PageReactionButtons = ({ pageContainer }) => {
 
     const {
-      state: { likers, sumOfLikers, isLiked },
+      state: {
+        pageId, likers, sumOfLikers, isLiked,
+      },
     } = pageContainer;
 
-    const toggleLike = () => {
-      const { isGuestUser } = appContainer;
-
-      if (isGuestUser) {
-        return;
-      }
-
-      try {
-        pageContainer.toggleLike();
+    const onChangeInvoked = async() => {
+      if (pageContainer.retrieveLikersAndSeenUsers == null) {
+        logger.error('retrieveBookmarkInfo is null');
       }
-      catch (err) {
-        toastError(err);
+      else {
+        await pageContainer.retrieveLikersAndSeenUsers();
       }
     };
 
@@ -43,7 +40,7 @@ const SubnavButtons = (props) => {
       <>
         {pageContainer.isAbleToShowLikeButtons && (
           <span>
-            <LikeButtons onClickInvoked={toggleLike} likers={likers} sumOfLikers={sumOfLikers} isLiked={isLiked} />
+            <LikeButtons onChangeInvoked={async() => { await onChangeInvoked() }} pageId={pageId} likers={likers} sumOfLikers={sumOfLikers} isLiked={isLiked} />
           </span>
         )}
         <span>
@@ -53,7 +50,6 @@ const SubnavButtons = (props) => {
     );
   };
   /* eslint-enable react/prop-types */
-
   const { editorMode } = navigationContainer.state;
   const isViewMode = editorMode === 'view';
 

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

@@ -7,7 +7,7 @@ import { withUnstatedContainers } from '../UnstatedUtils';
 import BookmarkButton from '../BookmarkButton';
 import LikeButtons from '../LikeButtons';
 import PageManagement from '../Page/PageManagement';
-import { apiv3Get, apiv3Put } from '../../client/util/apiv3-client'; // '~/client/util/apiv3-client';
+import { apiv3Get, apiv3Put } from '../../client/util/apiv3-client';
 import { toastError } from '../../client/util/apiNotification';
 
 
@@ -39,28 +39,24 @@ const PageReactionButtons : React.FC<PageReactionButtonsProps> = (props: PageRea
     f();
   }, []);
 
-  const toggleLike = async() => {
-    const { isGuestUser } = appContainer;
-    if (isGuestUser) {
-      return;
-    }
-    try {
-      await apiv3Put('/page/likes', { pageId, bool: isLiked });
-    }
-    catch (err) {
-      toastError(err);
-    }
+  const onChnageInvoked = () => {
     setSumOfLikers(sumOflikers => (isLiked ? sumOflikers - 1 : sumOflikers + 1));
     setLikers(likerIds => (isLiked
       ? likerIds.filter(id => id !== appContainer.currentUserId)
       : [...likerIds, appContainer.currentUserId]));
     setIsLiked(isLiked => !isLiked);
   };
-
   return (
     <>
       <span>
-        <LikeButtonsTypeAny onClickInvoked={toggleLike} likers={likers} sumOfLikers={sumOflikers} isLiked={isLiked}></LikeButtonsTypeAny>
+        <LikeButtonsTypeAny
+          onChangeInvoked={onChnageInvoked}
+          pageId={pageId}
+          likers={likers}
+          sumOfLikers={sumOflikers}
+          isLiked={isLiked}
+        >
+        </LikeButtonsTypeAny>
       </span>
       <span>
         {/*