fixups

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

plugins/search/src/components/FiltersNext/FiltersNext.tsx

@@ -181,6 +181,7 @@ export const FiltersNext = ({ definitions }: FiltersProps) => {
           case 'checkbox':
             return (
               <CheckBoxFilter
+                key={definition.field}
                 fieldName={definition.field}
                 values={definition.values}
               />
@@ -188,6 +189,7 @@ export const FiltersNext = ({ definitions }: FiltersProps) => {
           case 'select':
             return (
               <SelectFilter
+                key={definition.field}
                 fieldName={definition.field}
                 values={definition.values}
               />

plugins/search/src/components/SearchBarNext/SearchBarNext.tsx

@@ -34,16 +34,13 @@ const useStyles = makeStyles(() => ({
 
 export const SearchBarNext = () => {
   const classes = useStyles();
-  const {
-    queryState: { term },
-    setQueryState,
-  } = useSearch();
+  const { term, setTerm, setPageCursor } = useSearch();
 
   const [queryString, setQueryString] = useQueryParamState<string>('query');
 
   useEffect(() => {
-    setQueryState({ term: queryString ?? '', pageCursor: '' });
-  }, [queryString, setQueryState]);
+    setTerm(queryString ?? '');
+  }, [queryString, setTerm]);
 
   useDebounce(
     () => {
@@ -55,14 +52,12 @@ export const SearchBarNext = () => {
 
   const handleSearch = (event: React.ChangeEvent | React.FormEvent) => {
     event.preventDefault();
-    setQueryState({
-      term: (event.target as HTMLInputElement).value,
-      pageCursor: '',
-    });
+    setTerm((event.target as HTMLInputElement).value as string);
   };
 
   const handleClearSearchBar = () => {
-    setQueryState({ term: '', pageCursor: '' });
+    setTerm('');
+    setPageCursor('');
   };
 
   return (

plugins/search/src/components/SearchPageNext/SearchPageNext.tsx

@@ -22,11 +22,16 @@ import { SearchResultNext } from '../SearchResultNext';
 import { SearchContextProvider } from '../SearchContext';
 import { FiltersNext, FilterType } from '../FiltersNext';
 
-const exampleFilterDefinition = [
+const defaultFilterDefinitions = [
+  {
+    field: 'kind',
+    type: FilterType.SELECT,
+    values: ['Component', 'Template'],
+  },
   {
     field: 'lifecycle',
     type: FilterType.CHECKBOX,
-    values: ['exerpimental', 'production'],
+    values: ['experimental', 'production'],
   },
 ];
 
@@ -41,7 +46,7 @@ export const SearchPageNext = () => {
               <SearchBarNext />
             </Grid>
             <Grid item xs={3}>
-              <FiltersNext definitions={exampleFilterDefinition} />
+              <FiltersNext definitions={defaultFilterDefinitions} />
             </Grid>
             <Grid item xs={9}>
               <SearchResultNext />

plugins/search/src/components/SearchResultNext/SearchResultNext.tsx

@@ -37,7 +37,7 @@ const DefaultResultListItem = ({ result }: any) => {
 
 export const SearchResultNext = () => {
   const {
-    resultState: { loading, error, value },
+    result: { loading, error, value },
   } = useSearch();
 
   if (loading) {
@@ -58,9 +58,10 @@ export const SearchResultNext = () => {
   return (
     <List>
       {value.results.map(result => (
-        <>
-          <DefaultResultListItem result={result.document} />
-        </>
+        <DefaultResultListItem
+          key={result.document.location}
+          result={result.document}
+        />
       ))}
     </List>
   );