Merge pull request #4614 from weseek/feat/77543-80875-refactoring

Feat/77543 80875 refactoring

packages/app/src/components/PaginationWrapper.jsx → packages/app/src/components/PaginationWrapper.tsx

@@ -1,18 +1,21 @@
-import React, { useCallback, useMemo } from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  FC, memo, useCallback, useMemo,
+} from 'react';
 
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 
-/**
- *
- * @author Mikitaka Itizawa <itizawa@weseek.co.jp>
- *
- * @export
- * @class PaginationWrapper
- * @extends {React.Component}
- */
 
-const PaginationWrapper = React.memo((props) => {
+type Props = {
+  activePage: number,
+  changePage?: (number) => void,
+  totalItemsCount: number,
+  pagingLimit?: number,
+  align?: string,
+  size?: string,
+};
+
+
+const PaginationWrapper: FC<Props> = memo((props: Props) => {
   const {
     activePage, changePage, totalItemsCount, pagingLimit, align,
   } = props;
@@ -59,7 +62,7 @@ const PaginationWrapper = React.memo((props) => {
    * this function set << & <
    */
   const generateFirstPrev = useCallback(() => {
-    const paginationItems = [];
+    const paginationItems: JSX.Element[] = [];
     if (activePage !== 1) {
       paginationItems.push(
         <PaginationItem key="painationItemFirst">
@@ -89,7 +92,7 @@ const PaginationWrapper = React.memo((props) => {
    * this function set  numbers
    */
   const generatePaginations = useCallback(() => {
-    const paginationItems = [];
+    const paginationItems: JSX.Element[] = [];
     for (let number = paginationStart; number <= maxViewPageNum; number++) {
       paginationItems.push(
         <PaginationItem key={`paginationItem-${number}`} active={number === activePage}>
@@ -108,7 +111,7 @@ const PaginationWrapper = React.memo((props) => {
    * this function set > & >>
    */
   const generateNextLast = useCallback(() => {
-    const paginationItems = [];
+    const paginationItems: JSX.Element[] = [];
     if (totalPage !== activePage) {
       paginationItems.push(
         <PaginationItem key="painationItemNext">
@@ -133,7 +136,7 @@ const PaginationWrapper = React.memo((props) => {
   }, [activePage, changePage, totalPage]);
 
   const getListClassName = useMemo(() => {
-    const listClassNames = [];
+    const listClassNames: string[] = [];
 
     if (align === 'center') {
       listClassNames.push('justify-content-center');
@@ -157,15 +160,6 @@ const PaginationWrapper = React.memo((props) => {
 
 });
 
-PaginationWrapper.propTypes = {
-  activePage: PropTypes.number.isRequired,
-  changePage: PropTypes.func,
-  totalItemsCount: PropTypes.number.isRequired,
-  pagingLimit: PropTypes.number,
-  align: PropTypes.string,
-  size: PropTypes.string,
-};
-
 PaginationWrapper.defaultProps = {
   align: 'left',
   size: 'md',

packages/app/src/components/SearchPage.jsx

@@ -205,10 +205,9 @@ class SearchPage extends React.Component {
   renderSearchResultList = () => {
     return (
       <SearchResultList
-        pages={this.state.searchedPages}
-        deletionMode={false}
+        pages={this.state.searchedPages || []}
         selectedPage={this.state.selectedPage}
-        selectedPages={this.state.selectedPages}
+        selectedPages={this.state.selectedPages || []}
         searchResultCount={this.state.searchResultCount}
         activePage={this.state.activePage}
         pagingLimit={this.state.pagingLimit}

packages/app/src/components/SearchPage/SearchResultList.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SearchResultListItem from './SearchResultListItem';
-import PaginationWrapper from '../PaginationWrapper';
-
-class SearchResultList extends React.Component {
-
-  render() {
-    return (
-      <>
-        {this.props.pages.map((page) => {
-        // TODO : send cetain length of body (revisionBody) from elastisearch by adding some settings to the query and
-        //         when keyword is not in page content, display revisionBody.
-        // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
-          return (
-            <SearchResultListItem
-              page={page}
-              onClickInvoked={this.props.onClickInvoked}
-              noLink
-            />
-          );
-        })}
-        {this.props.searchResultCount != null && this.props.searchResultCount > 0 && (
-          <div className="my-4 mx-auto">
-            <PaginationWrapper
-              activePage={this.props.activePage}
-              changePage={this.props.onPagingNumberChanged}
-              totalItemsCount={this.props.searchResultCount || 0}
-              pagingLimit={this.props.pagingLimit}
-            />
-          </div>
-        )}
-      </>
-    );
-  }
-
-}
-
-SearchResultList.propTypes = {
-  pages: PropTypes.array.isRequired,
-  deletionMode: PropTypes.bool.isRequired,
-  selectedPages: PropTypes.array.isRequired,
-  searchResultCount: PropTypes.number,
-  activePage: PropTypes.number.isRequired,
-  pagingLimit: PropTypes.number,
-  onClickInvoked: PropTypes.func,
-  onChangeInvoked: PropTypes.func,
-  onPagingNumberChanged: PropTypes.func,
-};
-
-export default SearchResultList;

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

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import SearchResultListItem from './SearchResultListItem';
 import { IPageHasId } from '../../interfaces/page';
+import PaginationWrapper from '../PaginationWrapper';
 
 // TOOD: retrieve bookmark count and add it to the following type
 export type ISearchedPage = IPageHasId & {
@@ -13,9 +14,12 @@ export type ISearchedPage = IPageHasId & {
 
 type Props = {
   pages: ISearchedPage[],
-  deletionMode: boolean,
   selectedPages: ISearchedPage[],
   onClickInvoked?: (pageId: string) => void,
+  searchResultCount?: number,
+  activePage?: number,
+  pagingLimit?: number,
+  onPagingNumberChanged?: (activePage: number) => void,
 }
 
 const SearchResultList: FC<Props> = (props:Props) => {
@@ -29,6 +33,17 @@ const SearchResultList: FC<Props> = (props:Props) => {
           />
         );
       })}
+      {props.searchResultCount != null && props.searchResultCount > 0 && (
+        <div className="my-4 mx-auto">
+          <PaginationWrapper
+            activePage={props.activePage || 1}
+            changePage={props.onPagingNumberChanged}
+            totalItemsCount={props.searchResultCount || 0}
+            pagingLimit={props.pagingLimit}
+          />
+        </div>
+      )}
+
     </>
   );