feat(components): searchbar -> searchfield

Author: purfectliterature

client/app/bundles/course/announcements/components/misc/AnnouncementsDisplay.tsx

@@ -9,7 +9,7 @@ import {
 } from 'types/course/announcements';
 import { Operation } from 'types/store';
 
-import SearchBar from 'lib/components/core/fields/SearchBar';
+import SearchField from 'lib/components/core/fields/SearchField';
 import Pagination from 'lib/components/core/layouts/Pagination';
 
 import AnnouncementCard from './AnnouncementCard';
@@ -56,21 +56,17 @@ const AnnouncementsDisplay: FC<Props> = (props) => {
     setShavedAnnouncements(announcements);
   }, [announcements]);
 
-  const handleSearchBarChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-  ): void => {
-    if (event.target.value.trim() === '') {
+  const handleSearchBarChange = (rawKeyword: string): void => {
+    const keyword = rawKeyword.trim();
+
+    if (keyword === '') {
       setShavedAnnouncements(announcements);
     } else {
       setShavedAnnouncements(
         announcements.filter(
           (announcement: AnnouncementMiniEntity) =>
-            announcement.title
-              .toLowerCase()
-              .includes(event.target.value.trim().toLowerCase()) ||
-            announcement.content
-              .toLowerCase()
-              .includes(event.target.value.trim().toLowerCase()),
+            announcement.title.toLowerCase().includes(keyword.toLowerCase()) ||
+            announcement.content.toLowerCase().includes(keyword.toLowerCase()),
         ),
       );
     }
@@ -88,12 +84,12 @@ const AnnouncementsDisplay: FC<Props> = (props) => {
           xs={1}
         >
           <div style={{ paddingTop: 7, paddingBottom: 5 }}>
-            <SearchBar
-              onChange={handleSearchBarChange}
+            <SearchField
+              className="w-[350px]"
+              onChangeKeyword={handleSearchBarChange}
               placeholder={intl.formatMessage(
                 translations.searchBarPlaceholder,
               )}
-              width={350}
             />
           </div>
         </Grid>

client/app/bundles/course/courses/components/misc/CourseDisplay.tsx

@@ -3,7 +3,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Grid } from '@mui/material';
 import { CourseMiniEntity } from 'types/course/courses';
 
-import SearchBar from 'lib/components/core/fields/SearchBar';
+import SearchField from 'lib/components/core/fields/SearchField';
 import Pagination from 'lib/components/core/layouts/Pagination';
 import Note from 'lib/components/core/Note';
 
@@ -40,17 +40,15 @@ const CourseDisplay: FC<Props> = (props) => {
     return <Note message={intl.formatMessage(translations.noCourse)} />;
   }
 
-  const handleSearchBarChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-  ): void => {
-    if (event.target.value === '') {
+  const handleSearchBarChange = (rawKeyword: string): void => {
+    const keyword = rawKeyword.trim();
+
+    if (keyword === '') {
       setShavedCourses(courses);
     } else {
       setShavedCourses(
         courses.filter((course: CourseMiniEntity) =>
-          course.title
-            .toLowerCase()
-            .includes(event.target.value.trim().toLowerCase()),
+          course.title.toLowerCase().includes(keyword.toLowerCase()),
         ),
       );
     }
@@ -64,17 +62,15 @@ const CourseDisplay: FC<Props> = (props) => {
           style={{
             display: 'flex',
             justifyContent: 'left',
+            paddingTop: 16,
+            paddingBottom: 16,
           }}
           xs={1}
         >
-          <div style={{ paddingTop: 16, paddingBottom: 16 }}>
-            <SearchBar
-              onChange={handleSearchBarChange}
-              placeholder={intl.formatMessage(
-                translations.searchBarPlaceholder,
-              )}
-            />
-          </div>
+          <SearchField
+            onChangeKeyword={handleSearchBarChange}
+            placeholder={intl.formatMessage(translations.searchBarPlaceholder)}
+          />
         </Grid>
         <Grid item xs={1}>
           <Pagination

client/app/bundles/course/reference-timelines/views/DayView/DayView.tsx

@@ -2,11 +2,11 @@ import { ComponentRef, useMemo, useRef, useState } from 'react';
 import { Chip, Typography } from '@mui/material';
 import { TimelineData } from 'types/course/referenceTimelines';
 
+import SearchField from 'lib/components/core/fields/SearchField';
 import { useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
 import DayCalendar from '../../components/DayCalendar';
-import SearchField from '../../components/SearchField';
 import SubmitIndicator from '../../components/SubmitIndicator';
 import TimelinesOverview from '../../components/TimelinesOverview';
 import TimelinesStack from '../../components/TimelinesStack';

client/app/lib/components/core/fields/SearchBar.tsx

@@ -8,6 +8,7 @@ import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 interface SearchFieldProps {
   onChangeKeyword?: (keyword: string) => void;
   placeholder?: string;
+  className?: string;
 }
 
 const SearchField = (props: SearchFieldProps): JSX.Element => {
@@ -26,6 +27,7 @@ const SearchField = (props: SearchFieldProps): JSX.Element => {
 
   return (
     <TextField
+      className={props.className}
       fullWidth
       hiddenLabel
       InputProps={{