selectAll checkbox works...

packages/app/src/components/Admin/AuditLog/SelectActionDropdown.tsx

@@ -1,23 +1,30 @@
-import React, {
-  FC, useState, useCallback,
-} from 'react';
+import React, { FC, useCallback } from 'react';
 
 import { SupportedActionType } from '~/interfaces/activity';
 
 type Props = {
   dropdownItems: Array<{actionType: string, actionNames: SupportedActionType[]}>
   checkedItems: Map<SupportedActionType, boolean>
-  onCheckItem: (action: SupportedActionType) => void
+  onSelectAction: (action: SupportedActionType) => void
+  onSelectAllACtion: (actions: SupportedActionType[], isChecked: boolean) => void
 }
 
 export const SelectActionDropdown: FC<Props> = (props: Props) => {
-  const { dropdownItems, checkedItems, onCheckItem } = props;
+  const {
+    dropdownItems, checkedItems, onSelectAction, onSelectAllACtion,
+  } = props;
 
-  const [checkedAllItems, setCheckedAllItems] = useState(true);
+  const selectActionCheckboxChangedHandler = useCallback((action) => {
+    if (onSelectAction != null) {
+      onSelectAction(action);
+    }
+  }, [onSelectAction]);
 
-  const handleChange = useCallback((action: SupportedActionType) => {
-    onCheckItem(action);
-  }, [onCheckItem]);
+  const selectAllActionCheckboxChangedHandler = useCallback((actions, isChecked) => {
+    if (onSelectAllACtion) {
+      onSelectAllACtion(actions, isChecked);
+    }
+  }, [onSelectAllACtion]);
 
   return (
     <div className="btn-group mr-2 mb-3">
@@ -33,8 +40,8 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
                   <input
                     type="checkbox"
                     className="form-check-input"
-                    checked={checkedAllItems}
-                    onChange={() => setCheckedAllItems(!checkedAllItems)}
+                    defaultChecked
+                    onChange={(e) => { selectAllActionCheckboxChangedHandler(item.actionNames, e.target.checked) }}
                   />
                   <label className="form-check-label">{item.actionType}</label>
                 </div>
@@ -47,7 +54,7 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
                         type="checkbox"
                         className="form-check-input"
                         id={`checkbox${action}`}
-                        onChange={() => { handleChange(action) }}
+                        onChange={() => { selectActionCheckboxChangedHandler(action) }}
                         checked={checkedItems.get(action)}
                       />
                       <label

packages/app/src/components/Admin/AuditLogManagement.tsx

@@ -3,7 +3,7 @@ import React, { FC, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
-  SUPPORTED_TARGET_MODEL_TYPE, SupportedActionType, AllSupportedPageAction, AllSupportedCommentAction, AllSupportedActionType,
+  SupportedActionType, AllSupportedPageAction, AllSupportedCommentAction, AllSupportedActionType,
 } from '~/interfaces/activity';
 import { useSWRxActivityList } from '~/stores/activity';
 
@@ -46,8 +46,13 @@ export const AuditLogManagement: FC = () => {
     setActivePage(selectedPageNum);
   }, []);
 
-  const checkActionNameHandler = useCallback((action: SupportedActionType) => {
-    setCheckedItems(new Map(checkedItems.set(action, !checkedItems.get(action))));
+  const selectActionCheckboxChangedHandler = useCallback((action: SupportedActionType) => {
+    setCheckedItems(prev => new Map([...prev, [action, !checkedItems.get(action)]]));
+  }, [checkedItems, setCheckedItems]);
+
+  const selectAllActionCheckboxChangedHandler = useCallback((actions: SupportedActionType[], isChecked) => {
+    actions.forEach(action => checkedItems.set(action, isChecked));
+    setCheckedItems(new Map(checkedItems.entries()));
   }, [checkedItems, setCheckedItems]);
 
   return (
@@ -60,7 +65,8 @@ export const AuditLogManagement: FC = () => {
           { actionType: 'Comment', actionNames: AllSupportedCommentAction },
         ]}
         checkedItems={checkedItems}
-        onCheckItem={checkActionNameHandler}
+        onSelectAction={selectActionCheckboxChangedHandler}
+        onSelectAllACtion={selectAllActionCheckboxChangedHandler}
       />
 
       { isLoading