create SelectQueryDropdown.tsx

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

@@ -0,0 +1,50 @@
+import React, { FC, useState, useCallback } from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+
+type SelectQueryDropdownProps = {
+  dropdownLabel: string
+  dropdownItemList: string[]
+  setQueryHandler: (query: string) => void
+}
+
+export const SelectQueryDropdown: FC<SelectQueryDropdownProps> = (props: SelectQueryDropdownProps) => {
+  const { t } = useTranslation();
+
+  const { dropdownLabel, dropdownItemList, setQueryHandler } = props;
+
+  const [selectedItem, setSelectedItem] = useState('');
+
+  const onClickItemButton = useCallback((item) => {
+    if (setQueryHandler == null) {
+      return;
+    }
+    setQueryHandler(item);
+    setSelectedItem(item);
+  }, [setQueryHandler, setSelectedItem]);
+
+  return (
+    <div className="btn-group mr-2 mb-3">
+      <div className="dropdown">
+        <button className="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
+          {selectedItem !== '' ? selectedItem : t(`admin:audit_log_management.${dropdownLabel}`)}
+        </button>
+        <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+          {
+            dropdownItemList.map(item => (
+              <button
+                key={item}
+                type="button"
+                className="dropdown-item"
+                onClick={() => onClickItemButton(item)}
+              >
+                {item}
+              </button>
+            ))
+          }
+        </ul>
+      </div>
+    </div>
+  );
+};

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

@@ -8,60 +8,9 @@ import { useSWRxActivityList } from '~/stores/activity';
 import PaginationWrapper from '../PaginationWrapper';
 
 import { ActivityTable } from './AuditLog/ActivityTable';
+import { SelectQueryDropdown } from './AuditLog/SelectQueryDropdown';
 
 
-const SelectQueryDropdownLabel = {
-  SELECT_ACTION: 'select_action',
-} as const;
-
-const allSelectQueryDropdownLabel = Object.values(SelectQueryDropdownLabel);
-
-type SelectQueryDropdownProps = {
-  dropdownLabel: typeof allSelectQueryDropdownLabel[keyof typeof allSelectQueryDropdownLabel];
-  dropdownItemList: string[]
-  setQueryHandler: (query: string) => void
-}
-
-const SelectQueryDropdown: FC<SelectQueryDropdownProps> = (props: SelectQueryDropdownProps) => {
-  const { t } = useTranslation();
-
-  const { dropdownLabel, dropdownItemList, setQueryHandler } = props;
-
-  const [selectedItem, setSelectedItem] = useState('');
-
-  const onClickItemButton = useCallback((item) => {
-    if (setQueryHandler == null) {
-      return;
-    }
-    setQueryHandler(item);
-    setSelectedItem(item);
-  }, [setQueryHandler, setSelectedItem]);
-
-  return (
-    <div className="btn-group mr-2 mb-3">
-      <div className="dropdown">
-        <button className="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
-          {selectedItem !== '' ? selectedItem : t(`admin:audit_log_management.${dropdownLabel}`)}
-        </button>
-        <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-          {
-            dropdownItemList.map(item => (
-              <button
-                key={item}
-                type="button"
-                className="dropdown-item"
-                onClick={() => onClickItemButton(item)}
-              >
-                {item}
-              </button>
-            ))
-          }
-        </ul>
-      </div>
-    </div>
-  );
-};
-
 const PAGING_LIMIT = 10;
 
 export const AuditLogManagement: FC = () => {
@@ -93,7 +42,7 @@ export const AuditLogManagement: FC = () => {
         : (
           <>
             <SelectQueryDropdown
-              dropdownLabel={SelectQueryDropdownLabel.SELECT_ACTION}
+              dropdownLabel="select_action"
               dropdownItemList={AllSupportedActionType}
               setQueryHandler={setActionQuery}
             />