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,15 @@ const AnnouncementsDisplay: FC<Props> = (props) => {
     setShavedAnnouncements(announcements);
   }, [announcements]);
 
-  const handleSearchBarChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-  ): void => {
-    if (event.target.value.trim() === '') {
+  const handleSearchBarChange = (keyword: string): void => {
+    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 +82,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,13 @@ 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 = (keyword: string): void => {
+    if (keyword === '') {
       setShavedCourses(courses);
     } else {
       setShavedCourses(
         courses.filter((course: CourseMiniEntity) =>
-          course.title
-            .toLowerCase()
-            .includes(event.target.value.trim().toLowerCase()),
+          course.title.toLowerCase().includes(keyword.trim().toLowerCase()),
         ),
       );
     }
@@ -64,17 +60,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/components/SearchField.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={{

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

@@ -0,0 +1,61 @@
+import { useState, useTransition } from 'react';
+import { Clear, Search } from '@mui/icons-material';
+import { IconButton, InputAdornment } from '@mui/material';
+
+import TextField from 'lib/components/core/fields/TextField';
+import LoadingIndicator from 'lib/components/core/LoadingIndicator';
+
+interface SearchFieldProps {
+  onChangeKeyword?: (keyword: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+const SearchField = (props: SearchFieldProps): JSX.Element => {
+  const [keyword, setKeyword] = useState('');
+  const [isPending, startTransition] = useTransition();
+
+  const changeKeyword = (newKeyword: string): void => {
+    setKeyword(newKeyword);
+    startTransition(() => props.onChangeKeyword?.(newKeyword));
+  };
+
+  const clearKeyword = (): void => {
+    setKeyword('');
+    props.onChangeKeyword?.('');
+  };
+
+  return (
+    <TextField
+      className={props.className}
+      fullWidth
+      hiddenLabel
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <Search color={keyword ? 'primary' : undefined} />
+          </InputAdornment>
+        ),
+        endAdornment: (
+          <InputAdornment position="end">
+            {isPending && <LoadingIndicator bare size={20} />}
+
+            {keyword && (
+              <IconButton edge="end" onClick={clearKeyword}>
+                <Clear />
+              </IconButton>
+            )}
+          </InputAdornment>
+        ),
+      }}
+      onChange={(e): void => changeKeyword(e.target.value)}
+      placeholder={props.placeholder}
+      size="small"
+      trims
+      value={keyword}
+      variant="filled"
+    />
+  );
+};
+
+export default SearchField;