80814 validate type

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

@@ -1,21 +1,20 @@
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import loggerFactory from '~/utils/logger';
-// import { CheckboxType } from '../../interfaces/search';
+import { CheckboxType } from '../../interfaces/search';
 
 const logger = loggerFactory('growi:searchResultList');
 
 type Props = {
-  isChecked: boolean,
-  checkboxState: string,
+  checkboxState: CheckboxType,
   onClickInvoked?: () => void,
-  onCheckInvoked?: (string) => void,
+  onCheckInvoked?: (string:CheckboxType) => void,
 }
 
-const DeleteAllButton:FC<Props> = (props:Props) => {
+const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
   const { t } = useTranslation();
   const {
-    isChecked, checkboxState, onClickInvoked, onCheckInvoked,
+    checkboxState, onClickInvoked, onCheckInvoked,
   } = props;
 
   const changeCheckboxStateHandler = () => {
@@ -28,7 +27,7 @@ const DeleteAllButton:FC<Props> = (props:Props) => {
     // https://estoc.weseek.co.jp/redmine/issues/77525
     // use CheckboxType by importing from packages/app/src/interfaces/
     if (onCheckInvoked == null) { logger.error('onCheckInvoked is null') }
-    else { onCheckInvoked('') }
+    else { onCheckInvoked(CheckboxType.ALL_CHECKED) } // change this to an appropriate value
   };
 
 
@@ -40,7 +39,7 @@ const DeleteAllButton:FC<Props> = (props:Props) => {
         name="check-all-pages"
         className="custom-control custom-checkbox"
         onChange={changeCheckboxStateHandler}
-        checked={isChecked}
+        checked={checkboxState === CheckboxType.INDETERMINATE || checkboxState === CheckboxType.ALL_CHECKED}
       />
       <button
         type="button"
@@ -58,6 +57,6 @@ const DeleteAllButton:FC<Props> = (props:Props) => {
 
 };
 
-DeleteAllButton.propTypes = {
+DeleteSelectedPageGroup.propTypes = {
 };
-export default DeleteAllButton;
+export default DeleteSelectedPageGroup;

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

@@ -37,8 +37,8 @@ const SearchControl: FC <Props> = (props: Props) => {
     // https://estoc.weseek.co.jp/redmine/issues/77525
   };
 
-  const onCheckAllPagesInvoked = () => {
-    console.log('onCheckAllPagesInvoked is called');
+  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
 
@@ -59,7 +59,6 @@ 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
-          isChecked={false || false} // Todo: change the left value to appropriate value based on checkboxState
           checkboxState={'' || CheckboxType.NONE_CHECKED} // Todo: change the left value to appropriate value
           onClickInvoked={onDeleteSelectedPageHandler}
           onCheckInvoked={onCheckAllPagesInvoked}