imprv naming

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

@@ -26,7 +26,7 @@ const CustomInput = forwardRef<HTMLButtonElement, CustomInputProps>((props: Cust
 type DateRangePickerProps = {
   startDate: Date | null
   endDate: Date | null
-  onChangeDate: (dateList: Date[] | null[]) => void
+  onChangeDatePicker: (dateList: Date[] | null[]) => void
 }
 
 export const DateRangePicker: FC<DateRangePickerProps> = (props: DateRangePickerProps) => {
@@ -34,15 +34,15 @@ export const DateRangePicker: FC<DateRangePickerProps> = (props: DateRangePicker
 
   const buttonRef = useRef(null);
 
-  const changeDateHandler = useCallback((dateList: Date[] | null[]) => {
-    if (props.onChangeDate != null) {
+  const datePickerChangedHandler = useCallback((dateList: Date[] | null[]) => {
+    if (props.onChangeDatePicker != null) {
       const [start, end] = dateList;
       const isSameTime = (start != null && end != null) && (start.getTime() === end.getTime());
       if (isSameTime) {
-        props.onChangeDate([null, null]);
+        props.onChangeDatePicker([null, null]);
       }
       else {
-        props.onChangeDate(dateList);
+        props.onChangeDatePicker(dateList);
       }
     }
   }, []);
@@ -53,7 +53,7 @@ export const DateRangePicker: FC<DateRangePickerProps> = (props: DateRangePicker
         selectsRange
         startDate={startDate}
         endDate={endDate}
-        onChange={changeDateHandler}
+        onChange={datePickerChangedHandler}
         customInput={<CustomInput buttonRef={buttonRef} />}
       />
     </div>

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

@@ -5,26 +5,26 @@ import { SupportedActionType } from '~/interfaces/activity';
 type Props = {
   dropdownItems: Array<{actionCategory: string, actionNames: SupportedActionType[]}>
   actionMap: Map<SupportedActionType, boolean>
-  onSelectAction: (action: SupportedActionType) => void
-  onSelectMultipleAction: (actions: SupportedActionType[], isChecked: boolean) => void
+  onChangeAction: (action: SupportedActionType) => void
+  onChangeMultipleAction: (actions: SupportedActionType[], isChecked: boolean) => void
 }
 
 export const SelectActionDropdown: FC<Props> = (props: Props) => {
   const {
-    dropdownItems, actionMap, onSelectAction, onSelectMultipleAction,
+    dropdownItems, actionMap, onChangeAction, onChangeMultipleAction,
   } = props;
 
-  const selectActionCheckboxChangedHandler = useCallback((action) => {
-    if (onSelectAction != null) {
-      onSelectAction(action);
+  const actionCheckboxChangedHandler = useCallback((action) => {
+    if (onChangeAction != null) {
+      onChangeAction(action);
     }
-  }, [onSelectAction]);
+  }, [onChangeAction]);
 
-  const selectMultipleActionCheckboxChangedHandler = useCallback((actions, isChecked) => {
-    if (onSelectMultipleAction != null) {
-      onSelectMultipleAction(actions, isChecked);
+  const multipleActionCheckboxChangedHandler = useCallback((actions, isChecked) => {
+    if (onChangeMultipleAction != null) {
+      onChangeMultipleAction(actions, isChecked);
     }
-  }, [onSelectMultipleAction]);
+  }, [onChangeMultipleAction]);
 
   return (
     <div className="btn-group mr-2 mb-3">
@@ -40,7 +40,7 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
                   type="checkbox"
                   className="form-check-input"
                   defaultChecked
-                  onChange={(e) => { selectMultipleActionCheckboxChangedHandler(item.actionNames, e.target.checked) }}
+                  onChange={(e) => { multipleActionCheckboxChangedHandler(item.actionNames, e.target.checked) }}
                 />
                 <label className="form-check-label">{item.actionCategory}</label>
               </div>
@@ -53,7 +53,7 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
                       type="checkbox"
                       className="form-check-input"
                       id={`checkbox${action}`}
-                      onChange={() => { selectActionCheckboxChangedHandler(action) }}
+                      onChange={() => { actionCheckboxChangedHandler(action) }}
                       checked={actionMap.get(action)}
                     />
                     <label

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

@@ -57,20 +57,20 @@ export const AuditLogManagement: FC = () => {
     setActivePage(selectedPageNum);
   }, []);
 
-  const selectDateChangedHandler = useCallback((dateList: Date[] | null[]) => {
+  const datePickerChangedHandler = useCallback((dateList: Date[] | null[]) => {
     console.log(dateList);
     setActivePage(1);
     setStartDate(dateList[0]);
     setEndDate(dateList[1]);
   }, []);
 
-  const selectActionCheckboxChangedHandler = useCallback((action: SupportedActionType) => {
+  const actionCheckboxChangedHandler = useCallback((action: SupportedActionType) => {
     setActivePage(1);
     actionMap.set(action, !actionMap.get(action));
     setActionMap(new Map(actionMap.entries()));
   }, [actionMap, setActionMap]);
 
-  const selectMultipleActionCheckboxChangedHandler = useCallback((actions: SupportedActionType[], isChecked) => {
+  const multipleActionCheckboxChangedHandler = useCallback((actions: SupportedActionType[], isChecked) => {
     setActivePage(1);
     actions.forEach(action => actionMap.set(action, isChecked));
     setActionMap(new Map(actionMap.entries()));
@@ -86,7 +86,7 @@ export const AuditLogManagement: FC = () => {
       <DateRangePicker
         startDate={startDate}
         endDate={endDate}
-        onChangeDate={selectDateChangedHandler}
+        onChangeDatePicker={datePickerChangedHandler}
       />
 
       <SelectActionDropdown
@@ -95,8 +95,8 @@ export const AuditLogManagement: FC = () => {
           { actionCategory: 'Comment', actionNames: CommentActions },
         ]}
         actionMap={actionMap}
-        onSelectAction={selectActionCheckboxChangedHandler}
-        onSelectMultipleAction={selectMultipleActionCheckboxChangedHandler}
+        onChangeAction={actionCheckboxChangedHandler}
+        onChangeMultipleAction={multipleActionCheckboxChangedHandler}
       />
 
       { isLoading