81076 Bookmark in PageReaction

packages/app/src/components/BookmarkButton.jsx

@@ -10,7 +10,7 @@ import { apiv3Put } from '~/client/util/apiv3-client';
 
 import AppContainer from '~/client/services/AppContainer';
 
-class BookmarkButton extends React.Component {
+class LegacyBookmarkButton extends React.Component {
 
   constructor(props) {
     super(props);
@@ -19,25 +19,11 @@ class BookmarkButton extends React.Component {
   }
 
   async handleClick() {
-    const {
-      appContainer, pageId, isBookmarked, onChangeInvoked,
-    } = this.props;
-    const { isGuestUser } = appContainer;
 
-    if (isGuestUser) {
+    if (this.props.onBookMarkClicked == null) {
       return;
     }
-
-    try {
-      const bool = !isBookmarked;
-      await apiv3Put('/bookmarks', { pageId, bool });
-      if (onChangeInvoked != null) {
-        onChangeInvoked();
-      }
-    }
-    catch (err) {
-      toastError(err);
-    }
+    this.props.onBookMarkClicked();
   }
 
   render() {
@@ -77,21 +63,24 @@ class BookmarkButton extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const BookmarkButtonWrapper = withUnstatedContainers(BookmarkButton, [AppContainer]);
+const LegacyBookmarkButtonWrapper = withUnstatedContainers(LegacyBookmarkButton, [AppContainer]);
 
-BookmarkButton.propTypes = {
+LegacyBookmarkButton.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
-  pageId: PropTypes.string.isRequired,
   isBookmarked: PropTypes.bool.isRequired,
   sumOfBookmarks: PropTypes.number,
-  onChangeInvoked: PropTypes.func,
   t: PropTypes.func.isRequired,
   size: PropTypes.string,
+  onBookMarkClicked: PropTypes.func,
 };
 
-BookmarkButton.defaultProps = {
+LegacyBookmarkButton.defaultProps = {
   size: 'md',
 };
 
-export default withTranslation()(BookmarkButtonWrapper);
+const BookmarkButton = (props) => {
+  return <LegacyBookmarkButtonWrapper {...props}></LegacyBookmarkButtonWrapper>;
+};
+
+export default withTranslation()(BookmarkButton);

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

@@ -8,6 +8,7 @@ import { withUnstatedContainers } from '../UnstatedUtils';
 import PageReactionButtons from '../PageReactionButtons';
 import PageManagement from '../Page/PageManagement';
 import { useSWRPageInfo } from '../../stores/page';
+import { useSWRBookmarkInfo } from '../../stores/bookmark';
 import { toastError } from '../../client/util/apiNotification';
 import { apiv3Put } from '../../client/util/apiv3-client';
 
@@ -24,11 +25,12 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
   } = props;
   const { editorMode } = navigationContainer.state;
   const isViewMode = editorMode === 'view';
+  const { isGuestUser } = appContainer;
+
   const { data: pageInfo, error: pageInfoError, mutate: mutatePageInfo } = useSWRPageInfo(pageId);
+  const { data: bookmarkInfo, error: bookmarkInfoError, mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(pageId);
 
   const likeClickhandler = useCallback(async() => {
-    const { isGuestUser } = appContainer;
-
     if (isGuestUser) {
       return;
     }
@@ -43,11 +45,30 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     }
   }, [pageInfo]);
 
+  const bookmarkClickHandler = useCallback(async() => {
+    if (isGuestUser) {
+      return;
+    }
+    try {
+      await apiv3Put('/bookmarks', { pageId, bool: !bookmarkInfo.isBookmarked });
+      mutateBookmarkInfo();
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }, [bookmarkInfo]);
+
 
   if (pageInfoError != null || pageInfo == null) {
     return <></>;
   }
+
+  if (bookmarkInfoError != null || bookmarkInfo == null) {
+    return <></>;
+  }
+
   const { sumOfLikers, likerIds, isLiked } = pageInfo;
+  const { sumOfBookmarks, isBookmarked } = bookmarkInfo;
 
   return (
     <>
@@ -58,6 +79,9 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
           likerIds={likerIds}
           isLiked={isLiked}
           onLikeClicked={likeClickhandler}
+          sumOfBookmarks={sumOfBookmarks}
+          isBookmarked={isBookmarked}
+          onBookMarkClicked={bookmarkClickHandler}
         >
         </PageReactionButtons>
       )}

packages/app/src/components/PageReactionButtons.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useState, useEffect } from 'react';
 import LikeButtons from './LikeButtons';
+import BookmarkButton from './BookmarkButton';
 
 
 type Props = {
@@ -7,13 +8,16 @@ type Props = {
   sumOfLikers: number,
   likerIds: string[],
   isLiked: boolean,
-  onLikeClicked: (isLiked : boolean)=>void,
+  sumOfBookmarks: number,
+  isBookmarked: boolean,
+  onLikeClicked: ()=>void,
+  onBookMarkClicked: ()=>void,
 }
 
 
 const PageReactionButtons : FC<Props> = (props: Props) => {
   const {
-    pageId, sumOfLikers, likerIds, isLiked, onLikeClicked,
+    pageId, sumOfLikers, likerIds, isLiked, sumOfBookmarks, isBookmarked, onLikeClicked, onBookMarkClicked,
   } = props;
 
 
@@ -23,14 +27,7 @@ const PageReactionButtons : FC<Props> = (props: Props) => {
         <LikeButtons onLikeClicked={onLikeClicked} pageId={pageId} likerIds={likerIds} sumOfLikers={sumOfLikers} isLiked={isLiked}></LikeButtons>
       </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> */}
+        <BookmarkButton sumOfBookmarks={sumOfBookmarks} isBookmarked={isBookmarked} onBookMarkClicked={onBookMarkClicked}></BookmarkButton>
       </span>
     </>
   );

packages/app/src/stores/bookmark.ts

@@ -0,0 +1,16 @@
+import useSWR, { SWRResponse } from 'swr';
+import { apiv3Get } from '../client/util/apiv3-client';
+
+
+// TODO response type
+export const useSWRBookmarkInfo = (pageId: string) => {
+  return useSWR(
+    `/bookmarks/info?pageId=${pageId}`,
+    endpoint => apiv3Get(endpoint).then((response) => {
+      return {
+        sumOfBookmarks: response.data.sumOfBookmarks,
+        isBookmarked: response.data.isBookmarked,
+      };
+    }),
+  );
+};