80481 tsx clean code

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} pageId={pageId} />
+            <SubNavButtons isCompactMode={isCompactMode} pageId={pageId} />
           </div>
           <div className="mt-2">
             {pageContainer.isAbleToShowPageEditorModeManager && (

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

@@ -74,6 +74,14 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
   );
 };
 
-const SubNavButtonsWrapper = withUnstatedContainers(SubNavButtons, [AppContainer, NavigationContainer]);
+/**
+ * Wrapper component for using unstated
+ */
+const SubNavButtonsUnstatedWrapper = withUnstatedContainers(SubNavButtons, [AppContainer, NavigationContainer]);
+
+// wrapping tsx component returned by withUnstatedContainers to avoid type error when using in other tsx components.
+const SubNavButtonsWrapper = (props) => {
+  return <SubNavButtonsUnstatedWrapper {...props}></SubNavButtonsUnstatedWrapper>;
+};
 
 export default SubNavButtonsWrapper;

packages/app/src/components/PageReactionButtons.tsx

@@ -10,9 +10,6 @@ type Props = {
   onLikeClicked: (isLiked : boolean)=>void,
 }
 
-const LikeButtonsWrapper = (props) => {
-  return <LikeButtons {...props}></LikeButtons>;
-};
 
 const PageReactionButtons : FC<Props> = (props: Props) => {
   const {
@@ -23,7 +20,7 @@ const PageReactionButtons : FC<Props> = (props: Props) => {
   return (
     <>
       <span>
-        <LikeButtonsWrapper onLikeClicked={onLikeClicked} pageId={pageId} likerIds={likerIds} 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,9 +13,6 @@ type Props ={
   focusedPage: null | any,
 }
 
-const SearchResultContentSubNavigationWrapper = (props) => {
-  return <SearchResultContentSubNavigation {...props}></SearchResultContentSubNavigation>;
-};
 
 const SearchResultContent: FC<Props> = (props: Props) => {
   const page = props.focusedPage;
@@ -25,7 +22,7 @@ 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>
+      <SearchResultContentSubNavigation pageId={page._id} path={page.path}></SearchResultContentSubNavigation>
       <RevisionLoader
         growiRenderer={growiRenderer}
         pageId={page._id}

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

@@ -12,9 +12,6 @@ type Props = {
   isCompactMode?: boolean,
 }
 
-const SubNavButtonsWrapper = (props) => {
-  return <SubNavButtons {...props}></SubNavButtons>;
-};
 
 const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
   const {
@@ -39,7 +36,7 @@ const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
       </div>
       {/* Right side */}
       <div className="d-flex">
-        <SubNavButtonsWrapper isCompactMode={isCompactMode} pageId={pageId}></SubNavButtonsWrapper>
+        <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 using in other tsx components.
+const SearchResultContentSubNavigationWrapper = (props) => {
+  return <SearchResultContentSubNavigationUnstatedWrapper {...props}></SearchResultContentSubNavigationUnstatedWrapper>;
+};
 export default SearchResultContentSubNavigationWrapper;