feat(AccessCodeTable): add search (#192)

mikewuu · web-flow · commit 14dd1e9d954b · 2023-05-30T04:23:29.000+09:00
diff --git a/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx b/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx
@@ -19,6 +19,7 @@ import { TableCell } from 'lib/ui/Table/TableCell.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
 import { TableRow } from 'lib/ui/Table/TableRow.js'
 import { TableTitle } from 'lib/ui/Table/TableTitle.js'
+import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
@@ -38,6 +39,7 @@ export function AccessCodeTable(
   const [selectedAccessCode, selectAccessCode] = useState<AccessCode | null>(
     null
   )
+  const [searchTerm, setSearchTerm] = useState('')
 
   if (selectedAccessCode != null) {
     return (
@@ -54,16 +56,31 @@ export function AccessCodeTable(
     return null
   }
 
+  const filteredCodes = accessCodes.filter((accessCode) => {
+    if (searchTerm === '') {
+      return true
+    }
+
+    return new RegExp(searchTerm, 'i').test(accessCode.name ?? '')
+  })
+
+  const accessCodeCount = accessCodes.length
+
   return (
     <div className='seam-access-code-table'>
       <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
-          {t.accessCodes} <Caption>({accessCodes.length})</Caption>
+          {t.accessCodes} <Caption>({accessCodeCount})</Caption>
         </TableTitle>
+        <SearchTextField
+          value={searchTerm}
+          onChange={setSearchTerm}
+          disabled={accessCodeCount === 0}
+        />
       </TableHeader>
       <TableBody>
-        <Body accessCodes={accessCodes} selectAccessCode={selectAccessCode} />
+        <Body accessCodes={filteredCodes} selectAccessCode={selectAccessCode} />
       </TableBody>
     </div>
   )
diff --git a/src/styles/_access-code-table.scss b/src/styles/_access-code-table.scss
@@ -2,6 +2,10 @@
 
 @mixin all {
   .seam-access-code-table {
+    .seam-search-text-field {
+      width: 170px;
+    }
+
     .seam-table-row {
       cursor: pointer;
 
