wip

packages/app/src/components/Page/PageList.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+import PageListItem from './PageListItem';
+import { IPageSearchResultData } from '../../interfaces/search';
+
+
+type Props = {
+  pages: IPageSearchResultData[],
+  isEnableActions: boolean,
+  shortBodiesMap?: Record<string, string>,
+  onClickCheckbox?: (pageId: string) => void,
+  onClickDeleteButton?: (pageId: string) => void,
+}
+
+const PageList: FC<Props> = (props:Props) => {
+  const {
+    isEnableActions, shortBodiesMap,
+  } = props;
+
+  return (
+    <>
+      {Array.isArray(props.pages) && props.pages.map((page) => {
+
+        return (
+          <PageListItem
+            key={page.pageData._id}
+            page={page}
+            isEnableActions={isEnableActions}
+            shortBody={shortBodiesMap?.[page.pageData._id]}
+            onClickCheckbox={props.onClickCheckbox}
+            onClickDeleteButton={props.onClickDeleteButton}
+            showPageUpdatedTime
+          />
+        );
+      })}
+
+    </>
+  );
+
+};
+
+export default PageList;

packages/app/src/components/Page/PageListItem.tsx

@@ -13,23 +13,29 @@ const { isTopPage } = pagePathUtils;
 
 type Props = {
   page: IPageSearchResultData,
-  isSelected: boolean,
-  isChecked: boolean,
   isEnableActions: boolean,
+  isSelected?: boolean,
+  isChecked?: boolean,
   shortBody?: string
-  showCheckbox: boolean, // whether you show checkbox on the left side of an item
-  changeBgColorOnSelected: boolean, // whether you change background color of an item on selected
-  showPageUpdatedTime: boolean, // whether you show page's updatedAt at the top-right corner of an item
+  showCheckbox?: boolean, // whether you show checkbox on the left side of an item
+  showPageUpdatedTime?: boolean, // whether you show page's updatedAt at the top-right corner of an item
   onClickCheckbox?: (pageId: string) => void,
   onClickSearchResultItem?: (pageId: string) => void,
   onClickDeleteButton?: (pageId: string) => void,
 }
 
+const defaultProps = {
+  isSelected: false,
+  isChecked: false,
+  showCheckbox: false,
+  showPageUpdatedTime: false,
+};
+
 const PageListItem: FC<Props> = memo((props:Props) => {
   const {
     // todo: refactoring variable name to clear what changed
     page: { pageData, pageMeta }, isSelected, onClickSearchResultItem, onClickCheckbox,
-    isChecked, isEnableActions, shortBody, showCheckbox, changeBgColorOnSelected, showPageUpdatedTime,
+    isChecked, isEnableActions, shortBody, showCheckbox, showPageUpdatedTime,
   } = props;
 
   const { data: isDeviceSmallerThanLg } = useIsDeviceSmallerThanLg();
@@ -64,7 +70,7 @@ const PageListItem: FC<Props> = memo((props:Props) => {
     }
   }, [isDeviceSmallerThanLg, onClickSearchResultItem, pageData._id]);
 
-  const responsiveListStyleClass = `${isDeviceSmallerThanLg ? '' : `list-group-item-action ${changeBgColorOnSelected && isSelected ? 'active' : ''}`}`;
+  const responsiveListStyleClass = `${isDeviceSmallerThanLg ? '' : `list-group-item-action ${isSelected ? 'active' : ''}`}`;
   return (
     <li
       key={pageData._id}
@@ -147,4 +153,5 @@ const PageListItem: FC<Props> = memo((props:Props) => {
   );
 });
 
+PageListItem.defaultProps = defaultProps;
 export default PageListItem;

packages/app/src/components/SearchPage.jsx

@@ -327,6 +327,7 @@ class SearchPage extends React.Component {
         shortBodiesMap={this.state.shortBodiesMap}
         activePage={this.state.activePage}
         pagingLimit={this.state.pagingLimit}
+        showPagenation
         onClickSearchResultItem={this.selectPage}
         onClickCheckbox={this.toggleCheckBox}
         onPagingNumberChanged={this.onPagingNumberChanged}

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

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import SearchResultListItem from '../Page/PageListItem';
+import PageListItem from '../Page/PageListItem';
 import PaginationWrapper from '../PaginationWrapper';
 import { IPageSearchResultData } from '../../interfaces/search';
 
@@ -32,7 +32,7 @@ const SearchResultList: FC<Props> = (props:Props) => {
         const isChecked = selectedPagesIdList.has(page.pageData._id);
 
         return (
-          <SearchResultListItem
+          <PageListItem
             key={page.pageData._id}
             page={page}
             isEnableActions={isEnableActions}
@@ -43,8 +43,6 @@ const SearchResultList: FC<Props> = (props:Props) => {
             isSelected={page.pageData._id === focusedPageId || false}
             onClickDeleteButton={props.onClickDeleteButton}
             showCheckbox
-            changeBgColorOnSelected
-            showPageUpdatedTime={false}
           />
         );
       })}