fix naming

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

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

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

@@ -13,11 +13,11 @@ const Categories = {
   activitySnapshotUser: 'Activity Snapshot User',
 } as const;
 
-type CategorieType = typeof Categories[keyof typeof Categories]
+type CategoryType = typeof Categories[keyof typeof Categories]
 
 type UserDataType = {
   username: string
-  category: CategorieType
+  category: CategoryType
 }
 
 type Props = {
@@ -43,7 +43,7 @@ export const SearchUsernameTypeahead: FC<Props> = (props: Props) => {
   const isLoading = usernameData === undefined && error == null;
 
   const allUser: UserDataType[] = [];
-  const pushToAllUser = (usernames: string[], category: CategorieType) => {
+  const pushToAllUser = (usernames: string[], category: CategoryType) => {
     usernames.forEach(username => allUser.push({ username, category }));
   };
   pushToAllUser(activeUsernames, Categories.activeUser);
@@ -102,7 +102,7 @@ export const SearchUsernameTypeahead: FC<Props> = (props: Props) => {
         </span>
       </div>
       <AsyncTypeahead
-        id="auditlog-username-typeahead-asynctypeahead"
+        id="search-username-typeahead-asynctypeahead"
         multiple
         delay={400}
         minLength={0}

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

@@ -102,7 +102,7 @@ export const AuditLogManagement: FC = () => {
         <DateRangePicker
           startDate={startDate}
           endDate={endDate}
-          onChangeDatePicker={datePickerChangedHandler}
+          onChange={datePickerChangedHandler}
         />
 
         <SelectActionDropdown