diet

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

@@ -2,23 +2,16 @@ import React, {
   FC, useState, useCallback,
 } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { SupportedActionType } from '~/interfaces/activity';
 
-import { SupportedTargetModelType, SupportedActionType } from '~/interfaces/activity';
-
-
-type DropdownProps = {
-  targetModelName: SupportedTargetModelType
-  actionNames: SupportedActionType[]
+type Props = {
+  dropdownItems: Array<{actionType: string, actionNames: SupportedActionType[]}>
   checkedItems: Map<SupportedActionType, boolean>
   onCheckItem: (action: SupportedActionType) => void
 }
 
-const Dropdown: FC<DropdownProps> = (props: DropdownProps) => {
-
-  const {
-    targetModelName, actionNames, checkedItems, onCheckItem,
-  } = props;
+export const SelectActionDropdown: FC<Props> = (props: Props) => {
+  const { dropdownItems, checkedItems, onCheckItem } = props;
 
   const [checkedAllItems, setCheckedAllItems] = useState(true);
 
@@ -26,59 +19,6 @@ const Dropdown: FC<DropdownProps> = (props: DropdownProps) => {
     onCheckItem(action);
   }, [onCheckItem]);
 
-  return (
-    <>
-      <div className="dropdown-item">
-        <div className="form-group px-2 m-0">
-          <input
-            type="checkbox"
-            className="form-check-input"
-            checked={checkedAllItems}
-            onChange={() => setCheckedAllItems(!checkedAllItems)}
-          />
-          <label className="form-check-label">{targetModelName}</label>
-        </div>
-      </div>
-      {
-        actionNames.map(action => (
-          <div className="dropdown-item" key={action}>
-            <div className="form-group px-4 m-0">
-              <input
-                type="checkbox"
-                className="form-check-input"
-                id={`checkbox${action}`}
-                onChange={() => { handleChange(action) }}
-                checked={checkedItems.get(action)}
-              />
-              <label
-                className="form-check-label"
-                htmlFor={`checkbox${action}`}
-              >
-                {action}
-              </label>
-            </div>
-          </div>
-        ))
-      }
-    </>
-  );
-};
-
-
-type Props = {
-  dropdownItems: Array<{
-    targetModelName: SupportedTargetModelType
-    actionNames: SupportedActionType[]
-    checkedItems: Map<SupportedActionType, boolean>
-    onCheckItem: (action: SupportedActionType) => void
-  }>
-}
-
-export const SelectActionDropdown: FC<Props> = (props: Props) => {
-  const { t } = useTranslation();
-
-  const { dropdownItems } = props;
-
   return (
     <div className="btn-group mr-2 mb-3">
       <div className="dropdown">
@@ -87,13 +27,39 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
         </button>
         <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
           {dropdownItems.map(item => (
-            <div key={item.targetModelName}>
-              <Dropdown
-                targetModelName={item.targetModelName}
-                actionNames={item.actionNames}
-                checkedItems={item.checkedItems}
-                onCheckItem={item.onCheckItem}
-              />
+            <div key={item.actionType}>
+              <div className="dropdown-item">
+                <div className="form-group px-2 m-0">
+                  <input
+                    type="checkbox"
+                    className="form-check-input"
+                    checked={checkedAllItems}
+                    onChange={() => setCheckedAllItems(!checkedAllItems)}
+                  />
+                  <label className="form-check-label">{item.actionType}</label>
+                </div>
+              </div>
+              {
+                item.actionNames.map(action => (
+                  <div className="dropdown-item" key={action}>
+                    <div className="form-group px-4 m-0">
+                      <input
+                        type="checkbox"
+                        className="form-check-input"
+                        id={`checkbox${action}`}
+                        onChange={() => { handleChange(action) }}
+                        checked={checkedItems.get(action)}
+                      />
+                      <label
+                        className="form-check-label"
+                        htmlFor={`checkbox${action}`}
+                      >
+                        {action}
+                      </label>
+                    </div>
+                  </div>
+                ))
+              }
             </div>
           ))}
         </ul>

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

@@ -56,19 +56,11 @@ export const AuditLogManagement: FC = () => {
 
       <SelectActionDropdown
         dropdownItems={[
-          {
-            targetModelName: SUPPORTED_TARGET_MODEL_TYPE.MODEL_PAGE,
-            actionNames: AllSupportedPageAction,
-            checkedItems,
-            onCheckItem: checkActionNameHandler,
-          },
-          {
-            targetModelName: SUPPORTED_TARGET_MODEL_TYPE.MODEL_COMMENT,
-            actionNames: AllSupportedCommentAction,
-            checkedItems,
-            onCheckItem: checkActionNameHandler,
-          },
+          { actionType: 'Page', actionNames: AllSupportedPageAction },
+          { actionType: 'Comment', actionNames: AllSupportedCommentAction },
         ]}
+        checkedItems={checkedItems}
+        onCheckItem={checkActionNameHandler}
       />
 
       { isLoading