80785 implement function

packages/app/src/components/SearchPage.jsx

@@ -191,6 +191,17 @@ class SearchPage extends React.Component {
     }
   }
 
+  toggleAllCheckBox = () => {
+    console.log(this.state.selectedPages.size);
+    if (this.state.selectedPages.size === this.state.searchedPages.length) {
+      this.state.selectedPages.clear();
+      return;
+    }
+    this.state.searchedPages.forEach((page) => {
+      this.state.selectedPages.add(page);
+    });
+  };
+
   renderSearchResultContent = () => {
     return (
       <SearchResultContent
@@ -227,6 +238,7 @@ class SearchPage extends React.Component {
         onSearchInvoked={this.searchHandler}
         onExcludeUsersHome={this.onExcludeUsersHome}
         onExcludeTrash={this.onExcludeTrash}
+        onClickInvoked={this.toggleAllCheckBox}
       >
       </SearchControl>
     );

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

@@ -8,7 +8,7 @@ const logger = loggerFactory('growi:searchResultList');
 type Props = {
   checkboxState: CheckboxType,
   onClickInvoked?: () => void,
-  onCheckInvoked?: (string:CheckboxType) => void,
+  onCheckInvoked?: (nextCheckboxState:string) => void,
 }
 
 const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
@@ -18,16 +18,18 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
   } = props;
 
   const changeCheckboxStateHandler = () => {
-    console.log(`changeCheckboxStateHandler is called. current changebox state is ${checkboxState}`);
-    // Todo: determine next checkboxState from one of the following and tell the parent component
-    // to change the checkboxState by passing onCheckInvoked function the next checkboxState
-    // - NONE_CHECKED
-    // - INDETERMINATE
-    // - ALL_CHECKED
-    // https://estoc.weseek.co.jp/redmine/issues/77525
-    // use CheckboxType by importing from packages/app/src/interfaces/
+    let nextCheckboxState!: string;
+    switch (checkboxState) {
+      case CheckboxType.ALL_CHECKED:
+        nextCheckboxState = CheckboxType.NONE_CHECKED;
+        break;
+      case CheckboxType.INDETERMINATE || CheckboxType.NONE_CHECKED:
+        nextCheckboxState = CheckboxType.ALL_CHECKED;
+        break;
+    }
+
     if (onCheckInvoked == null) { logger.error('onCheckInvoked is null') }
-    else { onCheckInvoked(CheckboxType.ALL_CHECKED) } // change this to an appropriate value
+    else { onCheckInvoked(nextCheckboxState) }
   };
 
 
@@ -39,7 +41,7 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         name="check-all-pages"
         className="custom-control custom-checkbox ml-1"
         onChange={changeCheckboxStateHandler}
-        checked={checkboxState === CheckboxType.INDETERMINATE || checkboxState === CheckboxType.ALL_CHECKED}
+        checked={checkboxState !== CheckboxType.NONE_CHECKED}
       />
       <button
         type="button"

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

@@ -1,19 +1,26 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import SearchPageForm from './SearchPageForm';
 import AppContainer from '../../client/services/AppContainer';
 import DeleteSelectedPageGroup from './DeleteSelectedPageGroup';
 import { CheckboxType } from '../../interfaces/search';
 
+import loggerFactory from '~/utils/logger';
+
+const logger = loggerFactory('growi:searchResultList');
+
 type Props = {
   searchingKeyword: string,
   appContainer: AppContainer,
   onSearchInvoked: (data : any[]) => boolean,
   onExcludeUsersHome?: () => void,
   onExcludeTrash?: () => void,
+  onClickInvoked?: () => void,
 }
 
 const SearchControl: FC <Props> = (props: Props) => {
+
+  const [checkboxState, setCheckboxState] = useState(CheckboxType.NONE_CHECKED);
   // Temporaly workaround for lint error
   // later needs to be fixed: SearchControl to typescript componet
   const SearchPageFormTypeAny : any = SearchPageForm;
@@ -38,12 +45,9 @@ const SearchControl: FC <Props> = (props: Props) => {
   };
 
   const onCheckAllPagesInvoked = (nextCheckboxState:CheckboxType) => {
-    console.log(`onCheckAllPagesInvoked is called with arg ${nextCheckboxState}`);
-    // Todo: set the checkboxState, isChecked, and indeterminate value of checkbox element according to the passed argument
-    // https://estoc.weseek.co.jp/redmine/issues/77525
-
-    // setting checkbox to indeterminate is required to use of useRef to access checkbox element.
-    // ref: https://getbootstrap.com/docs/4.5/components/forms/#checkboxes
+    setCheckboxState(nextCheckboxState);
+    if (props.onClickInvoked == null) { logger.error('onClickInvoked is null') }
+    else { props.onClickInvoked() }
   };
 
   return (
@@ -59,7 +63,7 @@ const SearchControl: FC <Props> = (props: Props) => {
       <div className="d-flex my-4">
         {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
         <DeleteSelectedPageGroup
-          checkboxState={'' || CheckboxType.NONE_CHECKED} // Todo: change the left value to appropriate value
+          checkboxState={checkboxState} // Todo: change the left value to appropriate value
           onClickInvoked={onDeleteSelectedPageHandler}
           onCheckInvoked={onCheckAllPagesInvoked}
         />

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

@@ -12,6 +12,7 @@ const logger = loggerFactory('growi:searchResultList');
 type Props ={
   page: ISearchedPage,
   isSelected: boolean,
+  isChecked: boolean,
   onClickInvoked?: (data: string) => void,
   onChangedInvoked?: (page: ISearchedPage) => void,
 }
@@ -19,7 +20,7 @@ type Props ={
 const SearchResultListItem: FC<Props> = (props:Props) => {
 
   const {
-    page, isSelected, onClickInvoked, onChangedInvoked,
+    page, isSelected, onClickInvoked, onChangedInvoked, isChecked,
   } = props;
 
   // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
@@ -63,6 +64,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
                   logger.error(error);
                 }
               }}
+              checked={isChecked}
             />
           </div>
           <div className="w-100">