77833 follow sidebar render way.

packages/app/src/components/SearchPage.jsx

@@ -161,9 +161,9 @@ class SearchPage extends React.Component {
     return (
       <div>
         <SearchPageLayout
-          SearchControl={this.renderSearchControl()}
-          SearchResultList={this.renderSearchResultList()}
-          SearchResultContent={this.renderSearchResultContent()}
+          SearchControl={this.renderSearchControl}
+          SearchResultList={this.renderSearchResultList}
+          SearchResultContent={this.renderSearchResultContent}
           searchResultMeta={this.state.searchResultMeta}
           searchingKeyword={this.state.searchedKeyword}
         >

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

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import PropTypes from 'prop-types';
 import SearchPageForm from './SearchPageForm';
 import AppContainer from '../../client/services/AppContainer';
 

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

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import PropTypes from 'prop-types';
 
 type SearchResultMeta = {
   took : number,
@@ -8,19 +7,20 @@ type SearchResultMeta = {
 }
 
 type Props = {
-  SearchControl:JSX.Element,
-  SearchResultList: JSX.Element,
-  SearchResultContent: JSX.Element,
+  SearchControl: any,
+  SearchResultList: any,
+  SearchResultContent: any,
   searchResultMeta: SearchResultMeta,
   searchingKeyword: string
 }
 
 const SearchPageLayout: FC<Props> = (props: Props) => {
+  const { SearchResultList, SearchControl, SearchResultContent } = props;
   return (
     <div className="content-main">
       <div className="search-result row" id="search-result">
-        <div className="col-lg-6 d-none d-lg-block page-list search-result-list pr-0" id="search-result-list">
-          <nav>{props.SearchControl}</nav>
+        <div className="col-lg-6  page-list search-result-list pr-0" id="search-result-list">
+          <nav><SearchControl></SearchControl></nav>
           <div className="d-flex align-items-start justify-content-between mt-1">
             <div className="search-result-meta">
               <i className="icon-magnifier" /> Found {props.searchResultMeta.total} pages with &quot;{props.searchingKeyword}&quot;
@@ -28,11 +28,11 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
           </div>
 
           <div className="page-list">
-            <ul className="page-list-ul page-list-ul-flat nav nav-pills">{props.SearchResultList}</ul>
+            <ul className="page-list-ul page-list-ul-flat nav nav-pills"><SearchResultList></SearchResultList></ul>
           </div>
         </div>
-        <div className="col-lg-6 search-result-content">
-          {props.SearchResultContent}
+        <div className="col-lg-6 d-none d-lg-block search-result-content">
+          <SearchResultContent></SearchResultContent>
         </div>
       </div>
     </div>

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

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import PropTypes from 'prop-types';
 
 import RevisionLoader from '../Page/RevisionLoader';
 import AppContainer from '../../client/services/AppContainer';