feat: add search to job modal (#16)

UnownHash · Dec 16, 2023 · a481c58 · a481c58
1 parent c809013
commit a481c58
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx
@@ -1,17 +1,30 @@
+import React, { useState, useMemo, useCallback } from 'react';
 import { Button, Modal, Table, Text } from '@nextui-org/react';
 import { DeviceControlDTO } from '@rotom/connections';
 import { Selection } from '@react-types/shared/src/selection';
 import { toast } from 'react-toastify';
-import { useCallback, useState } from 'react';
+
+import { SearchInput } from '../status/search';
 
 interface ExecuteJobModalProps {
   closeModal: () => void;
   devices?: DeviceControlDTO[];
   jobId: string;
 }
 
-export const ExecuteJobModal = ({ closeModal, devices, jobId }: ExecuteJobModalProps): JSX.Element => {
+export const ExecuteJobModal: React.FC<ExecuteJobModalProps> = ({ closeModal, devices, jobId }) => {
   const [selectedDevices, setSelectedDevices] = useState<Selection>();
+  const [search, setSearch] = useState('');
+
+  const filteredDevices = useMemo(() => {
+    return (
+      devices?.filter(
+        (device) =>
+          device.deviceId?.toLowerCase().includes(search.toLowerCase()) ||
+          device.origin?.toLowerCase().includes(search.toLowerCase()),
+      ) || []
+    );
+  }, [devices, search]);
 
   const executeJob = useCallback(
     async ({ deviceIds }: { deviceIds: string[] | number[] }) => {
@@ -20,19 +33,17 @@ export const ExecuteJobModal = ({ closeModal, devices, jobId }: ExecuteJobModalP
           if (response.status !== 200) {
             throw new Error();
           }
-
           closeModal();
         },
       );
 
       toast.promise(promise, {
         pending: `Running ${jobId}...`,
-        success: `${jobId} started succesfully`,
+        success: `${jobId} started successfully`,
         error: `Failed to start job ${jobId}`,
       });
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [jobId],
+    [jobId, closeModal],
   );
 
   return (
@@ -41,7 +52,8 @@ export const ExecuteJobModal = ({ closeModal, devices, jobId }: ExecuteJobModalP
         <Text h3>Execute {jobId}</Text>
       </Modal.Header>
       <Modal.Body>
-        {devices && (
+        <SearchInput value={search} onChange={setSearch} />
+        {filteredDevices && (
           <Table
             aria-label="Devices"
             bordered
@@ -64,7 +76,7 @@ export const ExecuteJobModal = ({ closeModal, devices, jobId }: ExecuteJobModalP
               <Table.Column>Origin</Table.Column>
             </Table.Header>
             <Table.Body>
-              {devices.map((device) => (
+              {filteredDevices.map((device) => (
                 <Table.Row key={`${device.deviceId}`}>
                   <Table.Cell>{device.deviceId}</Table.Cell>
                   <Table.Cell>{device.origin}</Table.Cell>