80481 fb

packages/app/src/components/LikeButtons.jsx

@@ -10,7 +10,7 @@ import AppContainer from '~/client/services/AppContainer';
 
 // 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);
@@ -80,9 +80,9 @@ 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,
@@ -92,5 +92,8 @@ LikeButtons.propTypes = {
   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/SubNavButtons.tsx

@@ -18,7 +18,7 @@ type SubNavButtonsProps= {
   isCompactMode?: boolean,
   pageId: string,
 }
-const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
+const SubNavButtons: FC = (props: SubNavButtonsProps) => {
   const {
     appContainer, navigationContainer, isCompactMode, pageId,
   } = props;
@@ -26,7 +26,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
   const isViewMode = editorMode === 'view';
   const { data: pageInfo, error: pageInfoError, mutate: mutatePageInfo } = useSWRPageInfo(pageId);
 
-  const onLikeClicked = useCallback(async(isLiked) => {
+  const likeClickhandler = useCallback(async() => {
     const { isGuestUser } = appContainer;
 
     if (isGuestUser) {
@@ -34,13 +34,14 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     }
 
     try {
-      await apiv3Put('/page/likes', { pageId, bool: !isLiked });
+      // 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) {
@@ -56,9 +57,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
           sumOfLikers={sumOfLikers}
           likerIds={likerIds}
           isLiked={isLiked}
-          onLikeClicked={() => {
-            onLikeClicked(isLiked);
-          }}
+          onLikeClicked={likeClickhandler}
         >
         </PageReactionButtons>
       )}

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/SearchPage/SearchResultContent.tsx

@@ -17,9 +17,6 @@ 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;
@@ -29,7 +26,7 @@ const SearchResultContent: FC<Props> = (props: Props) => {
   return (
     <div key={page._id} className="search-result-page mb-5">
       <SearchResultContentSubNavigationWrapper pageId={page._id} path={page.path}></SearchResultContentSubNavigationWrapper>
-      <RevisionLoaderWrapper
+      <RevisionLoader
         growiRenderer={growiRenderer}
         pageId={page._id}
         pagePath={page.path}