Merge branch 'feat/77524-search-result-conent-page' into feat/77524-81110-show-liker-icon

packages/app/src/components/LikeButtons.jsx

@@ -6,13 +6,11 @@ import { withTranslation } from 'react-i18next';
 import UserPictureList from './User/UserPictureList';
 import { withUnstatedContainers } from './UnstatedUtils';
 
-import { toastError } from '~/client/util/apiNotification';
 import AppContainer from '~/client/services/AppContainer';
-import { 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
-class LikeButtons extends React.Component {
+class LegacyLikeButtons extends React.Component {
 
   constructor(props) {
     super(props);
@@ -32,31 +30,17 @@ class LikeButtons extends React.Component {
     }));
   }
 
-  async handleClick() {
-    const {
-      appContainer, pageId, isLiked, onChangeInvoked,
-    } = this.props;
-    const { isGuestUser } = appContainer;
 
-    if (isGuestUser) {
+  handleClick() {
+    if (this.props.onLikeClicked == null) {
       return;
     }
-
-    try {
-      const toggleLike = !isLiked;
-      await apiv3Put('/page/likes', { pageId, bool: toggleLike });
-      if (onChangeInvoked !== null) {
-        await onChangeInvoked();
-      }
-    }
-    catch (err) {
-      toastError(err);
-    }
+    this.props.onLikeClicked();
   }
 
   render() {
     const {
-      appContainer, likers, sumOfLikers, isLiked, t,
+      appContainer, likerIds, sumOfLikers, isLiked, t,
     } = this.props;
     const { isGuestUser } = appContainer;
 
@@ -83,7 +67,7 @@ class LikeButtons extends React.Component {
         <Popover placement="bottom" isOpen={this.state.isPopoverOpen} target="po-total-likes" toggle={this.togglePopover} trigger="legacy">
           <PopoverBody className="seen-user-popover">
             <div className="px-2 text-right user-list-content text-truncate text-muted">
-              {likers.length ? <UserPictureList users={likers} /> : t('No users have liked this yet.')}
+              {likerIds.length ? <UserPictureList users={likerIds} /> : t('No users have liked this yet.')}
             </div>
           </PopoverBody>
         </Popover>
@@ -96,16 +80,20 @@ class LikeButtons extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const LikeButtonsWrapper = withUnstatedContainers(LikeButtons, [AppContainer]);
+const LegacyLikeButtonsWrapper = withUnstatedContainers(LegacyLikeButtons, [AppContainer]);
 
-LikeButtons.propTypes = {
+LegacyLikeButtons.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   onChangeInvoked: PropTypes.func,
   pageId: PropTypes.string.isRequired,
-  likers: PropTypes.arrayOf(PropTypes.object).isRequired,
+  likerIds: PropTypes.arrayOf(PropTypes.object).isRequired,
   sumOfLikers: PropTypes.number.isRequired,
   isLiked: PropTypes.bool.isRequired,
+  onLikeClicked: PropTypes.func,
   t: PropTypes.func.isRequired,
 };
+const LikeButtons = (props) => {
+  return <LegacyLikeButtonsWrapper {...props}></LegacyLikeButtonsWrapper>;
+};
 
-export default withTranslation()(LikeButtonsWrapper);
+export default withTranslation()(LikeButtons);

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

@@ -7,7 +7,7 @@ import NavigationContainer from '~/client/services/NavigationContainer';
 import PageContainer from '~/client/services/PageContainer';
 
 import TagLabels from '../Page/TagLabels';
-import SubnavButtons from './SubNavButtons';
+import SubNavButtons from './SubNavButtons';
 import PageEditorModeManager from './PageEditorModeManager';
 
 import AuthorInfo from './AuthorInfo';
@@ -59,7 +59,7 @@ const GrowiSubNavigation = (props) => {
 
         <div className="d-flex flex-column align-items-end">
           <div className="d-flex">
-            <SubnavButtons isCompactMode={isCompactMode} />
+            <SubNavButtons isCompactMode={isCompactMode} pageId={pageId} />
           </div>
           <div className="mt-2">
             {pageContainer.isAbleToShowPageEditorModeManager && (

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

@@ -1,54 +0,0 @@
-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 PageReactionButtons from '../PageReactionButtons';
-import PageManagement from '../Page/PageManagement';
-
-
-const SubnavButtons = (props) => {
-  const {
-    appContainer, navigationContainer, pageContainer, isCompactMode,
-  } = props;
-
-  const { pageId } = pageContainer.state;
-  const { editorMode } = navigationContainer.state;
-  const isViewMode = editorMode === 'view';
-  const { sumOfLikers, likerIds, isLiked } = pageContainer.state;
-  return (
-    <>
-      {isViewMode && (
-        <>
-          {pageContainer.isAbleToShowPageReactionButtons && (
-            <PageReactionButtons
-              pageId={pageId}
-              currentUserId={appContainer.state.currentUserId}
-              likerSum={sumOfLikers}
-              likerIds={likerIds}
-              isAlreadyLiked={isLiked}
-            />
-          )}
-          {pageContainer.isAbleToShowPageManagement && <PageManagement isCompactMode={isCompactMode} />}
-        </>
-      )}
-    </>
-  );
-};
-
-/**
- * Wrapper component for using unstated
- */
-const SubnavButtonsWrapper = withUnstatedContainers(SubnavButtons, [AppContainer, NavigationContainer, PageContainer]);
-
-SubnavButtons.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-
-  isCompactMode: PropTypes.bool,
-};
-
-export default SubnavButtonsWrapper;

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

@@ -0,0 +1,87 @@
+import React, {
+  FC, useCallback,
+} from 'react';
+import AppContainer from '../../client/services/AppContainer';
+import NavigationContainer from '../../client/services/NavigationContainer';
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+import PageReactionButtons from '../PageReactionButtons';
+import PageManagement from '../Page/PageManagement';
+import { useSWRPageInfo } from '../../stores/page';
+import { toastError } from '../../client/util/apiNotification';
+import { apiv3Put } from '../../client/util/apiv3-client';
+
+
+type SubNavButtonsProps= {
+  appContainer: AppContainer,
+  navigationContainer: NavigationContainer,
+  isCompactMode?: boolean,
+  pageId: string,
+}
+const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
+  const {
+    appContainer, navigationContainer, isCompactMode, pageId,
+  } = props;
+  const { editorMode } = navigationContainer.state;
+  const isViewMode = editorMode === 'view';
+  const { data: pageInfo, error: pageInfoError, mutate: mutatePageInfo } = useSWRPageInfo(pageId);
+
+  const likeClickhandler = useCallback(async() => {
+    const { isGuestUser } = appContainer;
+
+    if (isGuestUser) {
+      return;
+    }
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      await apiv3Put('/page/likes', { pageId, bool: !pageInfo!.isLiked });
+      mutatePageInfo();
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }, [pageInfo]);
+
+
+  if (pageInfoError != null || pageInfo == null) {
+    return <></>;
+  }
+  const { sumOfLikers, likerIds, isLiked } = pageInfo;
+
+  return (
+    <>
+      {isViewMode && (
+        <PageReactionButtons
+          pageId={pageId}
+          sumOfLikers={sumOfLikers}
+          likerIds={likerIds}
+          isLiked={isLiked}
+          onLikeClicked={likeClickhandler}
+        >
+        </PageReactionButtons>
+      )}
+      {/*
+        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 PageManagement here.
+        TASK: https://estoc.weseek.co.jp/redmine/issues/81076
+        CONDITION :isAbleToShowPageManagement = !isNotFoundPage && !isTrashPage && !isSharedUser
+      */}
+      {/* if (CONDITION) then <PageManagement isCompactMode> */}
+    </>
+  );
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const SubNavButtonsUnstatedWrapper = withUnstatedContainers(SubNavButtons, [AppContainer, NavigationContainer]);
+
+// wrapping tsx component returned by withUnstatedContainers to avoid type error when this component used in other tsx components.
+const SubNavButtonsWrapper = (props) => {
+  return <SubNavButtonsUnstatedWrapper {...props}></SubNavButtonsUnstatedWrapper>;
+};
+
+export default SubNavButtonsWrapper;

packages/app/src/components/Page/RevisionLoader.jsx

@@ -13,7 +13,7 @@ import RevisionRenderer from './RevisionRenderer';
 /**
  * Load data from server and render RevisionBody component
  */
-class RevisionLoader extends React.Component {
+class LegacyRevisionLoader extends React.Component {
 
   constructor(props) {
     super(props);
@@ -116,9 +116,9 @@ class RevisionLoader extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const RevisionLoaderWrapper = withUnstatedContainers(RevisionLoader, [AppContainer]);
+const LegacyRevisionLoaderWrapper = withUnstatedContainers(LegacyRevisionLoader, [AppContainer]);
 
-RevisionLoader.propTypes = {
+LegacyRevisionLoader.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   growiRenderer: PropTypes.instanceOf(GrowiRenderer).isRequired,
@@ -129,4 +129,7 @@ RevisionLoader.propTypes = {
   highlightKeywords: PropTypes.string,
 };
 
-export default RevisionLoaderWrapper;
+const RevisionLoader = (props) => {
+  return <LegacyRevisionLoaderWrapper {...props}></LegacyRevisionLoaderWrapper>;
+};
+export default RevisionLoader;

packages/app/src/components/PageReactionButtons.tsx

@@ -1,45 +1,26 @@
 import React, { FC, useState, useEffect } from 'react';
 import LikeButtons from './LikeButtons';
-import { apiv3Get } from '../client/util/apiv3-client';
 
 
 type Props = {
   pageId: string,
-  currentUserId: string,
-  likerSum: number,
+  sumOfLikers: number,
   likerIds: string[],
-  isAlreadyLiked: boolean,
+  isLiked: boolean,
+  onLikeClicked: (isLiked : boolean)=>void,
 }
 
-const LikeButtonsWrapper = (props) => {
-  return <LikeButtons {...props}></LikeButtons>;
-};
 
 const PageReactionButtons : FC<Props> = (props: Props) => {
   const {
-    pageId, currentUserId, likerSum, likerIds, isAlreadyLiked,
+    pageId, sumOfLikers, likerIds, isLiked, onLikeClicked,
   } = props;
-  const [sumOflikers, setSumOfLikers] = useState(likerSum);
-  const [likers, setLikers] = useState<string[]>(likerIds);
-  const [isLiked, setIsLiked] = useState(isAlreadyLiked);
-
-  useEffect(() => {
-    setSumOfLikers(likerSum);
-    setLikers(likerIds);
-    setIsLiked(isAlreadyLiked);
-  }, [props]);
-
 
-  const likeInvoked = async() => {
-    setSumOfLikers(sumOflikers => (isLiked ? sumOflikers - 1 : sumOflikers + 1));
-    setLikers(likerIds => (isLiked ? likerIds.filter(id => id !== currentUserId) : [...likerIds, currentUserId]));
-    setIsLiked(isLiked => !isLiked);
-  };
 
   return (
     <>
       <span>
-        <LikeButtonsWrapper onChangeInvoked={likeInvoked} pageId={pageId} likers={likers} sumOfLikers={sumOflikers} isLiked={isLiked}></LikeButtonsWrapper>
+        <LikeButtons onLikeClicked={onLikeClicked} pageId={pageId} likerIds={likerIds} sumOfLikers={sumOfLikers} isLiked={isLiked}></LikeButtons>
       </span>
       <span>
         {/*

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

@@ -13,13 +13,7 @@ type Props ={
   focusedPage: null | any,
 }
 
-const SearchResultContentSubNavigationWrapper = (props) => {
-  return <SearchResultContentSubNavigation {...props}></SearchResultContentSubNavigation>;
-};
 
-const RevisionLoaderWrapper = (props) => {
-  return <RevisionLoader {...props}></RevisionLoader>;
-};
 const SearchResultContent: FC<Props> = (props: Props) => {
   const page = props.focusedPage;
   if (page == null) return null;
@@ -28,8 +22,8 @@ const SearchResultContent: FC<Props> = (props: Props) => {
   if (page.tags != null && page.tags.length > 0) { showTags = true }
   return (
     <div key={page._id} className="search-result-page mb-5">
-      <SearchResultContentSubNavigationWrapper pageId={page._id} path={page.path}></SearchResultContentSubNavigationWrapper>
-      <RevisionLoaderWrapper
+      <SearchResultContentSubNavigation pageId={page._id} path={page.path}></SearchResultContentSubNavigation>
+      <RevisionLoader
         growiRenderer={growiRenderer}
         pageId={page._id}
         pagePath={page.path}

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

@@ -2,7 +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';
+import SubNavButtons from '../Navbar/SubNavButtons';
 
 type Props = {
   appContainer:AppContainer
@@ -12,9 +12,6 @@ type Props = {
   isCompactMode?: boolean,
 }
 
-const SearchResultSubNavButtonWrapper = (props) => {
-  return <SearchResultSubNavButton {...props}></SearchResultSubNavButton>;
-};
 
 const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
   const {
@@ -39,7 +36,7 @@ const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
       </div>
       {/* Right side */}
       <div className="d-flex">
-        <SearchResultSubNavButtonWrapper pageId={pageId} isCompactMode={isCompactMode}></SearchResultSubNavButtonWrapper>
+        <SubNavButtons isCompactMode={isCompactMode} pageId={pageId}></SubNavButtons>
       </div>
     </div>
   );
@@ -49,7 +46,10 @@ const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
 /**
  * Wrapper component for using unstated
  */
-const SearchResultContentSubNavigationWrapper = withUnstatedContainers(SearchResultContentSubNavigation, [AppContainer]);
-
+const SearchResultContentSubNavigationUnstatedWrapper = withUnstatedContainers(SearchResultContentSubNavigation, [AppContainer]);
 
+// wrapping tsx component returned by withUnstatedContainers to avoid type error when this component used in other tsx components.
+const SearchResultContentSubNavigationWrapper = (props) => {
+  return <SearchResultContentSubNavigationUnstatedWrapper {...props}></SearchResultContentSubNavigationUnstatedWrapper>;
+};
 export default SearchResultContentSubNavigationWrapper;

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

@@ -1,48 +0,0 @@
-import React, {
-  FC,
-} from 'react';
-import AppContainer from '../../client/services/AppContainer';
-import { withUnstatedContainers } from '../UnstatedUtils';
-
-import PageReactionButtons from '../PageReactionButtons';
-import PageManagement from '../Page/PageManagement';
-import { useSWRPageInfo } from '../../stores/page';
-
-
-type SearchResultSubNavButtonProps = {
-  appContainer: AppContainer,
-  isCompactMode: boolean,
-
-  pageId: string,
-}
-const SearchResultSubNavButton: FC<SearchResultSubNavButtonProps> = (props: SearchResultSubNavButtonProps) => {
-  const { appContainer, isCompactMode, pageId } = props;
-  const { data: pageInfo, error: pageInfoError } = useSWRPageInfo(pageId);
-  return (
-    <>
-      {pageInfo != null && (
-        <PageReactionButtons
-          pageId={pageId}
-          currentUserId={appContainer.currentUserId}
-          likerSum={pageInfo.sumOfLikers}
-          likerIds={pageInfo.likerIds}
-          isAlreadyLiked={pageInfo.isLiked}
-        >
-        </PageReactionButtons>
-      )}
-      {/*
-        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 PageManagement here.
-        TASK: https://estoc.weseek.co.jp/redmine/issues/81076
-        CONDITION :isAbleToShowPageManagement = !isNotFoundPage && !isTrashPage && !isSharedUser
-      */}
-      {/* if (CONDITION) then <PageManagement isCompactMode> */}
-    </>
-  );
-};
-
-const SearchResultSubNavButtonWrapper = withUnstatedContainers(SearchResultSubNavButton, [AppContainer]);
-
-export default SearchResultSubNavButtonWrapper;

packages/app/src/interfaces/page-info.ts

@@ -1,4 +1,4 @@
-export type IpageInfo = {
+export type IPageInfo = {
   sumOfLikers: number;
   likerIds: string[];
   seenUserIds: string[];

packages/app/src/stores/page.tsx

@@ -1,11 +1,10 @@
 import useSWR, { SWRResponse } from 'swr';
 
-import { apiv3Get } from '~/client/util/apiv3-client';
-
-import { IPage } from '~/interfaces/page';
-import { IPagingResult } from '~/interfaces/paging-result';
-import { IpageInfo } from '~/interfaces/page-info';
+import { apiv3Get } from '../client/util/apiv3-client';
 
+import { IPage } from '../interfaces/page';
+import { IPagingResult } from '../interfaces/paging-result';
+import { IPageInfo } from '../interfaces/page-info';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const useSWRxRecentlyUpdated = <Data, Error>(): SWRResponse<IPage[], Error> => {
@@ -34,8 +33,8 @@ export const useSWRxPageList = (
 };
 
 
-export const useSWRPageInfo = (pageId: string): SWRResponse<IpageInfo, Error> => {
-  return useSWR(`page/info?pageId=${pageId}`, endpoint => apiv3Get(endpoint).then((response) => {
+export const useSWRPageInfo = (pageId: string): SWRResponse<IPageInfo, Error> => {
+  return useSWR(`/page/info?pageId=${pageId}`, endpoint => apiv3Get(endpoint).then((response) => {
     return {
       sumOfLikers: response.data.sumOfLikers,
       likerIds: response.data.likerIds,