WIP: impl ISelectableAll

packages/app/src/client/interfaces/selectable-all.ts

@@ -0,0 +1,9 @@
+export interface ISelectable {
+  select: () => void,
+  deselect: () => void,
+}
+
+export interface ISelectableAll {
+  selectAll: () => void,
+  deselectAll: () => void,
+}

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

@@ -1,4 +1,7 @@
-import React, { memo, useCallback } from 'react';
+import React, {
+  forwardRef,
+  ForwardRefRenderFunction, memo, useCallback, useImperativeHandle, useRef,
+} from 'react';
 
 import Clamp from 'react-multiline-clamp';
 import { format } from 'date-fns';
@@ -14,6 +17,7 @@ import { IPageSearchMeta, isIPageSearchMeta } from '~/interfaces/search';
 import { PageItemControl } from '../Common/Dropdown/PageItemControl';
 import LinkedPagePath from '~/models/linked-page-path';
 import PagePathHierarchicalLink from '../PagePathHierarchicalLink';
+import { ISelectable } from '~/client/interfaces/selectable-all';
 
 type Props = {
   page: IPageWithMeta | IPageWithMeta<IPageInfoAll & IPageSearchMeta>,
@@ -25,13 +29,31 @@ type Props = {
   onClickDeleteButton?: (pageId: string) => void,
 }
 
-export const PageListItemL = memo((props: Props): JSX.Element => {
+const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (props: Props, ref): JSX.Element => {
   const {
     // todo: refactoring variable name to clear what changed
     page: { pageData, pageMeta }, isSelected, onClickItem, onClickCheckbox, isEnableActions,
     showPageUpdatedTime,
   } = props;
 
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // publish ISelectable methods
+  useImperativeHandle(ref, () => ({
+    select: () => {
+      const input = inputRef.current;
+      if (input != null) {
+        input.checked = true;
+      }
+    },
+    deselect: () => {
+      const input = inputRef.current;
+      if (input != null) {
+        input.checked = false;
+      }
+    },
+  }));
+
   const { data: isDeviceSmallerThanLg } = useIsDeviceSmallerThanLg();
 
   const elasticSearchResult = isIPageSearchMeta(pageMeta) ? pageMeta.elasticSearchResult : null;
@@ -76,6 +98,7 @@ export const PageListItemL = memo((props: Props): JSX.Element => {
                 className="form-check-input position-relative m-0"
                 type="checkbox"
                 id="flexCheckDefault"
+                ref={inputRef}
                 onChange={() => { onClickCheckbox(pageData._id) }}
               />
             </div>
@@ -135,4 +158,6 @@ export const PageListItemL = memo((props: Props): JSX.Element => {
       </div>
     </li>
   );
-});
+};
+
+export const PageListItemL = memo(forwardRef(PageListItemLSubstance));

packages/app/src/components/SearchPage.tsx

@@ -1,19 +1,21 @@
 import React, {
-  useCallback, useEffect, useMemo, useState,
+  useCallback, useEffect, useMemo, useRef, useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { parse as parseQuerystring } from 'querystring';
 
 import AppContainer from '~/client/services/AppContainer';
-import { IFormattedSearchResult } from '~/interfaces/search';
+import { IFormattedSearchResult, IPageSearchMeta } from '~/interfaces/search';
+import { IPageWithMeta } from '~/interfaces/page';
 
 import { ISearchConditions, ISearchConfigurations, useSWRxFullTextSearch } from '~/stores/search';
 import PaginationWrapper from './PaginationWrapper';
 import { OperateAllControl, useSelectAll } from './SearchPage/OperateAllControl';
 import SearchControl from './SearchPage/SearchControl';
 
-import SearchPageBase from './SearchPage2/SearchPageBase';
+import { SearchPageBase } from './SearchPage2/SearchPageBase';
+import { ISelectableAll } from '~/client/interfaces/selectable-all';
 
 
 // TODO: replace with "customize:showPageLimitationS"
@@ -103,6 +105,8 @@ export const SearchPage = (props: Props): JSX.Element => {
     limit: INITIAL_PAGIONG_SIZE,
   });
 
+  const searchPageBaseRef = useRef<ISelectableAll|null>(null);
+
   const { data, conditions } = useSWRxFullTextSearch(keyword, {
     limit: INITIAL_PAGIONG_SIZE,
     ...configurationsByControl,
@@ -119,6 +123,21 @@ export const SearchPage = (props: Props): JSX.Element => {
     setConfigurationsByControl(newConfigurations);
   }, []);
 
+  const selectAllCheckboxChangedHandler = useCallback((isChecked: boolean) => {
+    const instance = searchPageBaseRef.current;
+
+    if (instance == null) {
+      return;
+    }
+
+    if (isChecked) {
+      instance.selectAll();
+    }
+    if (isChecked) {
+      instance.deselectAll();
+    }
+  }, []);
+
   const pagingNumberChangedHandler = useCallback((activePage: number) => {
     const currentLimit = configurationsByPagination.limit ?? INITIAL_PAGIONG_SIZE;
     setConfigurationsByPagination({
@@ -151,7 +170,7 @@ export const SearchPage = (props: Props): JSX.Element => {
       <OperateAllControl
         checkboxType={selectAllPagesCheckboxType}
         isCheckboxDisabled={isDisabled}
-        onCheckboxChanged={() => null /* TODO implement */}
+        onCheckboxChanged={selectAllCheckboxChangedHandler}
       >
         <button
           type="button"
@@ -164,7 +183,7 @@ export const SearchPage = (props: Props): JSX.Element => {
         </button>
       </OperateAllControl>
     );
-  }, [hitsCount, selectAllPagesCheckboxType, t]);
+  }, [hitsCount, selectAllCheckboxChangedHandler, selectAllPagesCheckboxType, t]);
 
   const searchControl = useMemo(() => {
     return (
@@ -220,6 +239,7 @@ export const SearchPage = (props: Props): JSX.Element => {
 
   return (
     <SearchPageBase
+      ref={searchPageBaseRef}
       appContainer={appContainer}
       pages={data?.data}
       onSelectedPagesByCheckboxesChanged={setSelectedPagesCount}

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

@@ -1,4 +1,8 @@
-import React, { FC, useCallback } from 'react';
+import React, {
+  forwardRef,
+  ForwardRefRenderFunction, useCallback, useImperativeHandle, useRef,
+} from 'react';
+import { ISelectable, ISelectableAll } from '~/client/interfaces/selectable-all';
 import { IPageWithMeta, isIPageInfoForListing } from '~/interfaces/page';
 import { IPageSearchMeta } from '~/interfaces/search';
 import { useIsGuestUser } from '~/stores/context';
@@ -14,7 +18,7 @@ type Props = {
   onClickCheckbox?: (pageId: string) => void,
 }
 
-const SearchResultList: FC<Props> = (props:Props) => {
+const SearchResultListSubstance: ForwardRefRenderFunction<ISelectableAll, Props> = (props:Props, ref) => {
   const {
     pages, selectedPageId,
     onPageSelected,
@@ -27,6 +31,24 @@ const SearchResultList: FC<Props> = (props:Props) => {
   const { data: isGuestUser } = useIsGuestUser();
   const { data: idToPageInfo } = useSWRxPageInfoForList(pageIdsWithNoSnippet);
 
+  const itemsRef = useRef<(ISelectable|null)[]>([]);
+
+  // publish selectAll()
+  useImperativeHandle(ref, () => ({
+    selectAll: () => {
+      const items = itemsRef.current;
+      if (items != null) {
+        items.forEach(item => item != null && item.select());
+      }
+    },
+    deselectAll: () => {
+      const items = itemsRef.current;
+      if (items != null) {
+        items.forEach(item => item != null && item.deselect());
+      }
+    },
+  }));
+
   const clickItemHandler = useCallback((pageId: string) => {
     if (onPageSelected != null) {
       const selectedPage = pages.find(page => page.pageData._id === pageId);
@@ -61,10 +83,12 @@ const SearchResultList: FC<Props> = (props:Props) => {
 
   return (
     <ul className="page-list-ul list-group list-group-flush">
-      { (injectedPage ?? pages).map((page) => {
+      { (injectedPage ?? pages).map((page, i) => {
         return (
           <PageListItemL
             key={page.pageData._id}
+            // eslint-disable-next-line no-return-assign
+            ref={c => itemsRef.current[i] = c}
             page={page}
             isEnableActions={isGuestUser}
             isSelected={page.pageData._id === selectedPageId}
@@ -79,4 +103,4 @@ const SearchResultList: FC<Props> = (props:Props) => {
 
 };
 
-export default SearchResultList;
+export const SearchResultList = forwardRef(SearchResultListSubstance);

packages/app/src/components/SearchPage2/SearchPageBase.tsx

@@ -1,13 +1,14 @@
 import React, {
-  FC, useEffect, useState,
+  FC, forwardRef, ForwardRefRenderFunction, useEffect, useImperativeHandle, useRef, useState,
 } from 'react';
+import { ISelectableAll } from '~/client/interfaces/selectable-all';
 import AppContainer from '~/client/services/AppContainer';
 import { IPageWithMeta } from '~/interfaces/page';
 import { IPageSearchMeta } from '~/interfaces/search';
 import { useIsGuestUser } from '~/stores/context';
 
 import { SearchResultContent } from '../SearchPage/SearchResultContent';
-import SearchResultList from '../SearchPage/SearchResultList';
+import { SearchResultList } from '../SearchPage/SearchResultList';
 
 type Props = {
   appContainer: AppContainer,
@@ -21,7 +22,7 @@ type Props = {
   searchPager: React.ReactNode,
 }
 
-const SearchPageBase: FC<Props> = (props: Props) => {
+const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll, Props> = (props:Props, ref) => {
   const {
     appContainer,
     pages,
@@ -29,6 +30,24 @@ const SearchPageBase: FC<Props> = (props: Props) => {
     searchControl, searchResultListHead, searchPager,
   } = props;
 
+  const searchResultListRef = useRef<ISelectableAll|null>(null);
+
+  // publish selectAll()
+  useImperativeHandle(ref, () => ({
+    selectAll: () => {
+      const instance = searchResultListRef.current;
+      if (instance != null) {
+        instance.selectAll();
+      }
+    },
+    deselectAll: () => {
+      const instance = searchResultListRef.current;
+      if (instance != null) {
+        instance.deselectAll();
+      }
+    },
+  }));
+
   const { data: isGuestUser } = useIsGuestUser();
 
   // TODO get search keywords and split
@@ -83,6 +102,7 @@ const SearchPageBase: FC<Props> = (props: Props) => {
                 </div>
                 <div className="page-list px-md-4">
                   <SearchResultList
+                    ref={searchResultListRef}
                     pages={pages}
                     selectedPageId={selectedPageWithMeta?.pageData._id}
                     onPageSelected={page => setSelectedPageWithMeta(page)}
@@ -116,4 +136,4 @@ const SearchPageBase: FC<Props> = (props: Props) => {
 };
 
 
-export default SearchPageBase;
+export const SearchPageBase = forwardRef(SearchPageBaseSubstance);