80481 like button in Search

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

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import PagePathNav from '../PagePathNav';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../client/services/AppContainer';
+import SearchResultSubNavButton from './SearchResultSubNavButton';
 
 type Props = {
   appContainer:AppContainer
@@ -15,7 +16,7 @@ const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
   const {
     appContainer, pageId, path, isCompactMode, isSignleLineMode,
   } = props;
-
+  const SearchResultSubNavButtonTypeAny: any = SearchResultSubNavButton;
   const { isSharedUser } = appContainer;
   return (
     <div className={`grw-subnav container-fluid d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
@@ -35,11 +36,7 @@ const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
       </div>
       {/* Right side */}
       <div className="d-flex">
-        {/* TODO: refactor SubNavButtons in a way that it can be used independently from pageContainer
-              TASK : #80481 https://estoc.weseek.co.jp/redmine/issues/80481
-              CONDITION reference: https://dev.growi.org/5fabddf8bbeb1a0048bcb9e9
-        */}
-        {/* <SubnavButtons isCompactMode={isCompactMode} /> */}
+        <SearchResultSubNavButtonTypeAny pageId={pageId}></SearchResultSubNavButtonTypeAny>
       </div>
     </div>
   );

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

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import React, {
+  FC, useState, useEffect,
+} from 'react';
 import AppContainer from '../../client/services/AppContainer';
 import NavigationContainer from '../../client/services/NavigationContainer';
 import { withUnstatedContainers } from '../UnstatedUtils';
@@ -6,32 +8,78 @@ import { withUnstatedContainers } from '../UnstatedUtils';
 import BookmarkButton from '../BookmarkButton';
 import LikeButtons from '../LikeButtons';
 import PageManagement from '../Page/PageManagement';
+import { toastError } from '~/client/util/apiNotification';
 
-type Props = {
+
+type PageReactionButtonsProps = {
   appContainer: AppContainer,
-  navigationContainer: NavigationContainer,
-  isCompactMode: boolean,
+  pageId: string,
 }
 
-const PageReactionButtons = () => {
+const PageReactionButtons : React.FC<PageReactionButtonsProps> = (props: PageReactionButtonsProps) => {
+  const { appContainer, pageId } = props;
+  const LikeButtonsTypeAny : any = LikeButtons;
+  const BookMarkButtonTypeAny: any = BookmarkButton;
+
+  const [sumOflikers, setSumOfLikers] = useState(0);
+  const [likers, setLikers] = useState([]);
+  const [isLiked, setIsLiked] = useState(true);
+
+  // component did mount
+  useEffect(() => {
+    const f = async() => {
+      const {
+        data: { likerIds, sumOfLikers, isLiked },
+      } = await appContainer.apiv3Get('/page/info', { _id: pageId });
+
+      setSumOfLikers(sumOfLikers);
+      setLikers(likerIds);
+      setIsLiked(isLiked);
+    };
+    f();
+  }, []);
+
+  const toggleLike = async() => {
+    const { isGuestUser } = appContainer;
+    if (isGuestUser) {
+      return;
+    }
+    try {
+      const id = pageId;
+      const toggledIsLiked = isLiked;
+      await appContainer.apiv3Put('/page/likes', { pageId: id, bool: toggledIsLiked });
+    }
+    catch (err) {
+      toastError(err);
+    }
+  };
+
   return (
     <>
       <span>
-        {/* <LikeButtons onClickInvoked={} likers={} sumOfLikers={} isLiked={}></LikeButtons> */}
+        <LikeButtonsTypeAny onClickInvoked={toggleLike} likers={likers} sumOfLikers={sumOflikers} isLiked={isLiked}></LikeButtonsTypeAny>
       </span>
       <span>
-        <BookmarkButton></BookmarkButton>
+        {/* <BookmarkButton></BookmarkButton> */}
       </span>
     </>
   );
 };
 
-const SearchResultSubNavButton : FC<Props> = (props: Props) => {
-  const { appContainer, navigationContainer, isCompactMode } = props;
+type Props = {
+  appContainer: AppContainer,
+  isCompactMode: boolean,
 
+  pageId: string,
+}
+
+const SearchResultSubNavButton : FC<Props> = (props: Props) => {
+  const {
+    appContainer, isCompactMode, pageId,
+  } = props;
   return (
     <>
-      <PageReactionButtons></PageReactionButtons>
+      <PageReactionButtons appContainer={appContainer} pageId={pageId}></PageReactionButtons>
       {/*
         TODO : https://estoc.weseek.co.jp/redmine/issues/80789
         CONDITION :isAbleToShowPageManagement = !isNotFoundPage && !isTrashPage && !isSharedUser
@@ -41,6 +89,6 @@ const SearchResultSubNavButton : FC<Props> = (props: Props) => {
   );
 };
 
-const SearchResultSubNavButtonWrapper = withUnstatedContainers(SearchResultSubNavButton, [AppContainer, NavigationContainer]);
+const SearchResultSubNavButtonWrapper = withUnstatedContainers(SearchResultSubNavButton, [AppContainer]);
 
 export default SearchResultSubNavButtonWrapper;