feat: connect search input to filters

checkmarble · Jan 17, 2025 · 94767b4 · 94767b4
1 parent 1b32f46
commit 94767b4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/packages/app-builder/src/components/Cases/Filters/filters.ts b/packages/app-builder/src/components/Cases/Filters/filters.ts
@@ -2,20 +2,18 @@ import { type ParseKeys } from 'i18next';
 import { match } from 'ts-pattern';
 import { type IconName } from 'ui-icons';
 
-export const casesFilterNames = ['dateRange', 'statuses', 'name'] as const;
+export const casesFilterNames = ['dateRange', 'statuses'] as const;
 
 export type CasesFilterName = (typeof casesFilterNames)[number];
 
 export const getFilterIcon = (filterName: CasesFilterName) =>
   match<CasesFilterName, IconName>(filterName)
     .with('dateRange', () => 'calendar-month')
     .with('statuses', () => 'category')
-    .with('name', () => 'search')
     .exhaustive();
 
 export const getFilterTKey = (filterName: CasesFilterName) =>
   match<CasesFilterName, ParseKeys<['cases']>>(filterName)
     .with('dateRange', () => 'cases:case.date')
     .with('statuses', () => 'cases:case.status')
-    .with('name', () => 'cases:case.name')
     .exhaustive();
diff --git a/packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx b/packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx
@@ -103,21 +103,32 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   }
 }
 
-const SearchByName = () => {
+const SearchByName = ({
+  initialValue,
+  onClear,
+  onChange,
+}: {
+  initialValue?: string;
+  onChange: (value?: string) => void;
+  onClear: () => void;
+}) => {
   const { t } = useTranslation(['cases', 'common']);
-  const [value, setValue] = useState<string>();
+  const [value, setValue] = useState(initialValue);
 
   return (
     <div className="flex gap-1">
       <Input
         type="search"
         aria-label={t('cases:search.placeholder')}
         placeholder={t('cases:search.placeholder')}
-        value={value ?? ''}
-        onChange={(e) => setValue(e.target.value)}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+          if (!e.target.value) onClear();
+        }}
         startAdornment="search"
       />
-      <Button type="submit" disabled={!value}>
+      <Button onClick={() => onChange(value)} disabled={!value}>
         {t('common:search')}
       </Button>
     </div>
@@ -175,7 +186,6 @@ export default function Cases() {
         previous();
       }
       if (!pagination.order) {
-        console.log('resetting');
         reset();
       }
       if (pagination.order) {
@@ -209,7 +219,15 @@ export default function Cases() {
               filterValues={filters}
             >
               <div className="flex justify-between">
-                <SearchByName />
+                <SearchByName
+                  initialValue={filters.name}
+                  onClear={() => {
+                    navigateCasesList({ ...filters, name: undefined });
+                  }}
+                  onChange={(value) => {
+                    navigateCasesList({ ...filters, name: value });
+                  }}
+                />
                 <div className="flex gap-4">
                   <CasesFiltersMenu filterNames={casesFilterNames}>
                     <FiltersButton />