80481 fb pageReactionButton

packages/app/src/components/LikeButtons.jsx

@@ -46,7 +46,7 @@ class LikeButtons extends React.Component {
       const toggleLike = !isLiked;
       await apiv3Put('/page/likes', { pageId, bool: toggleLike });
       if (onChangeInvoked !== null) {
-        onChangeInvoked();
+        await onChangeInvoked();
       }
       else {
         return new Error('onChangeInvoked is null');

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

@@ -1,66 +1,20 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import AppContainer from '~/client/services/AppContainer';
 import NavigationContainer from '~/client/services/NavigationContainer';
 import PageContainer from '~/client/services/PageContainer';
 import { withUnstatedContainers } from '../UnstatedUtils';
-import loggerFactory from '~/utils/logger';
 
-import BookmarkButton from '../BookmarkButton';
-import LikeButtons from '../LikeButtons';
+import PageReactionButtons from '../PageReactionButtons';
 import PageManagement from '../Page/PageManagement';
 
 
-const logger = loggerFactory('growi:SubnavButtons');
 const SubnavButtons = (props) => {
   const {
     appContainer, navigationContainer, pageContainer, isCompactMode,
   } = props;
 
-  /* eslint-enable react/prop-types */
-
-  /* eslint-disable react/prop-types */
-  const PageReactionButtons = ({ pageContainer }) => {
-    const {
-      state: {
-        pageId, likers, sumOfLikers, isLiked, isBookmarked, sumOfBookmarks,
-      },
-    } = pageContainer;
-
-    const onChangeInvoked = () => {
-      if (pageContainer.retrieveBookmarkInfo == null) { logger.error('retrieveBookmarkInfo is null') }
-      else { pageContainer.retrieveBookmarkInfo() }
-    };
-
-    const likeInvoked = () => {
-      pageContainer.retrieveLikersAndSeenUsers();
-      pageContainer.updateStateAfterLike();
-    };
-
-    const bookmarkInvoked = () => {
-      pageContainer.retrieveBookmarkInfo();
-    };
-
-    return (
-      <>
-        {pageContainer.isAbleToShowLikeButtons && (
-          <span>
-            <LikeButtons onChangeInvoked={likeInvoked} pageId={pageId} likers={likers} sumOfLikers={sumOfLikers} isLiked={isLiked} />
-          </span>
-        )}
-        <span>
-          <BookmarkButton
-            pageId={pageId}
-            isBookmarked={isBookmarked}
-            sumOfBookmarks={sumOfBookmarks}
-            onChangeInvoked={bookmarkInvoked}
-          />
-        </span>
-      </>
-    );
-  };
-  /* eslint-enable react/prop-types */
-
+  const { pageId } = pageContainer.state;
   const { editorMode } = navigationContainer.state;
   const isViewMode = editorMode === 'view';
 
@@ -68,7 +22,7 @@ const SubnavButtons = (props) => {
     <>
       {isViewMode && (
         <>
-          {pageContainer.isAbleToShowPageReactionButtons && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} />}
+          {pageContainer.isAbleToShowPageReactionButtons && <PageReactionButtons pageId={pageId} currentUserId={appContainer.currentUserId} />}
           {pageContainer.isAbleToShowPageManagement && <PageManagement isCompactMode={isCompactMode} />}
         </>
       )}
@@ -81,7 +35,6 @@ const SubnavButtons = (props) => {
  */
 const SubnavButtonsWrapper = withUnstatedContainers(SubnavButtons, [AppContainer, NavigationContainer, PageContainer]);
 
-
 SubnavButtons.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,

packages/app/src/components/PageReactionButtons.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useState, useEffect } from 'react';
 import LikeButtons from './LikeButtons';
-import BookmarkButton from './BookmarkButton';
 import { apiv3Get } from '../client/util/apiv3-client';
 
 
@@ -24,7 +23,6 @@ const PageReactionButtons : React.FC<Props> = (props: Props) => {
       const {
         data: { likerIds, sumOfLikers, isLiked },
       } = await apiv3Get('/page/info', { pageId });
-
       setSumOfLikers(sumOfLikers);
       setLikers(likerIds);
       setIsLiked(isLiked);
@@ -32,7 +30,7 @@ const PageReactionButtons : React.FC<Props> = (props: Props) => {
     f();
   }, []);
 
-  const onChangeInvoked = () => {
+  const likeInvoked = () => {
     setSumOfLikers(sumOflikers => (isLiked ? sumOflikers - 1 : sumOflikers + 1));
     setLikers(likerIds => (isLiked ? likerIds.filter(id => id !== currentUserId) : [...likerIds, currentUserId]));
     setIsLiked(isLiked => !isLiked);
@@ -41,7 +39,7 @@ const PageReactionButtons : React.FC<Props> = (props: Props) => {
   return (
     <>
       <span>
-        <LikeButtonsTypeAny onChangeInvoked={onChangeInvoked} pageId={pageId} likers={likers} sumOfLikers={sumOflikers} isLiked={isLiked}></LikeButtonsTypeAny>
+        <LikeButtonsTypeAny onChangeInvoked={likeInvoked} pageId={pageId} likers={likers} sumOfLikers={sumOflikers} isLiked={isLiked}></LikeButtonsTypeAny>
       </span>
       <span>
         {/*

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

@@ -4,69 +4,11 @@ import React, {
 import AppContainer from '../../client/services/AppContainer';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
-import LikeButtons from '../LikeButtons';
+import PageReactionButtons from '../PageReactionButtons';
 import PageManagement from '../Page/PageManagement';
 import { apiv3Get } from '../../client/util/apiv3-client';
 
 
-type PageReactionButtonsProps = {
-  appContainer: AppContainer,
-  pageId: string,
-}
-
-const PageReactionButtons : React.FC<PageReactionButtonsProps> = (props: PageReactionButtonsProps) => {
-  const { appContainer, pageId } = props;
-  const LikeButtonsTypeAny : any = LikeButtons;
-
-  const [sumOflikers, setSumOfLikers] = useState(0);
-  const [likers, setLikers] = useState<string[]>([]);
-  const [isLiked, setIsLiked] = useState(true);
-
-  // component did mount
-  useEffect(() => {
-    const f = async() => {
-      const {
-        data: { likerIds, sumOfLikers, isLiked },
-      } = await apiv3Get('/page/info', { pageId });
-
-      setSumOfLikers(sumOfLikers);
-      setLikers(likerIds);
-      setIsLiked(isLiked);
-    };
-    f();
-  }, []);
-
-  const onChangeInvoked = () => {
-    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
-          onChangeInvoked={onChangeInvoked}
-          pageId={pageId}
-          likers={likers}
-          sumOfLikers={sumOflikers}
-          isLiked={isLiked}
-        >
-        </LikeButtonsTypeAny>
-      </span>
-      <span>
-        {/*
-          TODO:
-          once 80335 is done, merge 77543 branch(parent of 80335) into 77524.
-          (pageContainer dependencies in bookmark, delete modal, rename etc are removed)
-          then place BookMarkButton here
-          TASK: https://estoc.weseek.co.jp/redmine/issues/81076
-        */}
-        {/* <BookmarkButton></BookmarkButton> */}
-      </span>
-    </>
-  );
-};
-
 type Props = {
   appContainer: AppContainer,
   isCompactMode: boolean,
@@ -78,9 +20,11 @@ const SearchResultSubNavButton : FC<Props> = (props: Props) => {
   const {
     appContainer, isCompactMode, pageId,
   } = props;
+  if (pageId == null) return;
+  const PageReactionButtonsTypeAny : any = PageReactionButtons;
   return (
     <>
-      <PageReactionButtons appContainer={appContainer} pageId={pageId}></PageReactionButtons>
+      <PageReactionButtonsTypeAny pageId={pageId} currentUserId={appContainer.currentUserId}></PageReactionButtonsTypeAny>
       {/*
         TODO :
         once 80335 is done, merge 77543 branch(parent of 80335) into 77524.