80481 like process refactor

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

@@ -294,15 +294,15 @@ export default class PageContainer extends Container {
 
   async toggleLike() {
     {
-      const toggledIsLiked = !this.state.isLiked;
+      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,
+        isLiked: !toggledIsLiked,
+        sumOfLikers: toggledIsLiked ? state.sumOfLikers - 1 : state.sumOfLikers + 1,
         likerIds: toggledIsLiked
-          ? [...this.state.likerIds, this.appContainer.currentUserId]
-          : state.likerIds.filter(id => id !== this.appContainer.currentUserId),
+          ? state.likerIds.filter(id => id !== this.appContainer.currentUserId)
+          : [...this.state.likerIds, this.appContainer.currentUserId],
       }));
     }
 

packages/app/src/components/LikeButtons.jsx

@@ -10,8 +10,6 @@ import { toastError } from '~/client/util/apiNotification';
 import AppContainer from '~/client/services/AppContainer';
 import PageContainer from '~/client/services/PageContainer';
 
-// TODO
-// before PR , remove comments
 class LikeButtons extends React.Component {
 
   constructor(props) {
@@ -22,7 +20,6 @@ class LikeButtons extends React.Component {
     };
 
     this.togglePopover = this.togglePopover.bind(this);
-    // this.handleClick = this.handleClick.bind(this);
   }
 
   togglePopover() {
@@ -32,30 +29,12 @@ class LikeButtons extends React.Component {
     }));
   }
 
-  // async handleClick() {
-  //   const { appContainer, pageContainer } = this.props;
-  //   const { isGuestUser } = appContainer;
-
-  //   if (isGuestUser) {
-  //     return;
-  //   }
-
-  //   try {
-  //     pageContainer.toggleLike();
-  //   }
-  //   catch (err) {
-  //     toastError(err);
-  //   }
-  // }
 
   render() {
     const {
       appContainer, onClickInvoked, likers, sumOfLikers, isLiked, t,
     } = this.props;
     const { isGuestUser } = appContainer;
-    // const {
-    //   state: { likers, sumOfLikers, isLiked },
-    // } = pageContainer;
 
     return (
       <div className="btn-group" role="group" aria-label="Like buttons">
@@ -102,7 +81,6 @@ const LikeButtonsWrapper = withUnstatedContainers(LikeButtons, [AppContainer]);
 
 LikeButtons.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  // pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   onClickInvoked: PropTypes.func.isRequired,
   likers: PropTypes.arrayOf(PropTypes.object),
   sumOfLikers: PropTypes.number.isRequired,

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

@@ -36,7 +36,7 @@ const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
       </div>
       {/* Right side */}
       <div className="d-flex">
-        <SearchResultSubNavButtonTypeAny pageId={pageId}></SearchResultSubNavButtonTypeAny>
+        <SearchResultSubNavButtonTypeAny pageId={pageId} isCompactMode={isCompactMode}></SearchResultSubNavButtonTypeAny>
       </div>
     </div>
   );

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

@@ -2,14 +2,13 @@ import React, {
   FC, useState, useEffect,
 } from 'react';
 import AppContainer from '../../client/services/AppContainer';
-import NavigationContainer from '../../client/services/NavigationContainer';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
 import BookmarkButton from '../BookmarkButton';
 import LikeButtons from '../LikeButtons';
 import PageManagement from '../Page/PageManagement';
-import { apiv3Put } from '~/client/util/apiv3-client';
-import { toastError } from '~/client/util/apiNotification';
+import { apiv3Get, apiv3Put } from '../../client/util/apiv3-client'; // '~/client/util/apiv3-client';
+import { toastError } from '../../client/util/apiNotification';
 
 
 type PageReactionButtonsProps = {
@@ -23,7 +22,7 @@ const PageReactionButtons : React.FC<PageReactionButtonsProps> = (props: PageRea
   const BookMarkButtonTypeAny: any = BookmarkButton;
 
   const [sumOflikers, setSumOfLikers] = useState(0);
-  const [likers, setLikers] = useState([]);
+  const [likers, setLikers] = useState<string[]>([]);
   const [isLiked, setIsLiked] = useState(true);
 
   // component did mount
@@ -31,7 +30,7 @@ const PageReactionButtons : React.FC<PageReactionButtonsProps> = (props: PageRea
     const f = async() => {
       const {
         data: { likerIds, sumOfLikers, isLiked },
-      } = await appContainer.apiv3Get('/page/info', { _id: pageId });
+      } = await apiv3Get('/page/info', { _id: pageId });
 
       setSumOfLikers(sumOfLikers);
       setLikers(likerIds);
@@ -51,6 +50,11 @@ const PageReactionButtons : React.FC<PageReactionButtonsProps> = (props: PageRea
     catch (err) {
       toastError(err);
     }
+    setSumOfLikers(sumOflikers => (isLiked ? sumOflikers - 1 : sumOflikers + 1));
+    setLikers(likerIds => (isLiked
+      ? likerIds.filter(id => id !== appContainer.currentUserId)
+      : [...likerIds, appContainer.currentUserId]));
+    setIsLiked(isLiked => !isLiked);
   };
 
   return (

packages/app/src/server/models/page.js

@@ -370,7 +370,7 @@ module.exports = function(crowi) {
       }
       else {
         logger.debug('liker not updated');
-        return reject(new Error('already liked'));
+        return reject(new Error('Already liked'));
       }
     }));
   };
@@ -391,7 +391,7 @@ module.exports = function(crowi) {
       }
       else {
         logger.debug('liker not updated');
-        return reject(new Error('already unliked'));
+        return reject(new Error('Already unliked'));
       }
     }));
   };

packages/app/src/server/routes/apiv3/page.js

@@ -228,10 +228,10 @@ module.exports = (crowi) => {
       }
 
       if (isLiked) {
-        page = await page.like(req.user);
+        page = await page.unlike(req.user);
       }
       else {
-        page = await page.unlike(req.user);
+        page = await page.like(req.user);
       }
     }
     catch (err) {