feat: added empty filtered states

Author: dastrong-codiga

src/renderer/components/ViewCookbookSnippets/ViewCookbookSnippetsEmptyFiltered.tsx

@@ -0,0 +1,38 @@
+import { Button, Flex, Link } from '@chakra-ui/react';
+import { EmptyState } from '@codiga/components';
+import { useParams } from 'react-router-dom';
+import { APP_URL } from '../../lib/config';
+
+type ViewCookbookSnippetsEmptyFilteredProps = {
+  clearSearch: () => void;
+};
+
+export default function ViewCookbookSnippetsEmptyFiltered({
+  clearSearch,
+}: ViewCookbookSnippetsEmptyFilteredProps) {
+  const params = useParams();
+
+  return (
+    <EmptyState
+      title="No snippets match that search"
+      description="There are no snippets in this cookbook that match your search."
+      illustration="empty"
+      py="space_64"
+    >
+      <Flex gridGap="space_16">
+        <Button variant="secondary" size="sm" onClick={clearSearch}>
+          Clear Filters
+        </Button>
+
+        <Link
+          isExternal
+          href={`${APP_URL}/assistant/snippet/create?cookbookId=${params.cookbookId}`}
+          variant="primary"
+          size="sm"
+        >
+          Add Snippet to Cookbook
+        </Link>
+      </Flex>
+    </EmptyState>
+  );
+}

src/renderer/pages/ViewCookbookSnippets.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { useState } from 'react';
 import { useQuery } from '@apollo/client';
 import { useParams } from 'react-router-dom';
@@ -10,6 +11,7 @@ import { PAGE_QUERY_POLL_INTERVAL_IN_MS } from '../lib/constants';
 import ViewCookbookSnippetsError from '../components/ViewCookbookSnippets/ViewCookbookSnippetsError';
 import ViewCookbookSnippetsLoading from '../components/ViewCookbookSnippets/ViewCookbookSnippetsLoading';
 import ViewCookbookSnippetsEmpty from '../components/ViewCookbookSnippets/ViewCookbookSnippetsEmpty';
+import ViewCookbookSnippetsEmptyFiltered from '../components/ViewCookbookSnippets/ViewCookbookSnippetsEmptyFiltered';
 import BackButton from '../components/BackButton';
 import FavoriteCookbook from '../components/Favorite/FavoriteCookbook';
 import AvatarAndName from '../components/AvatarAndName';
@@ -101,25 +103,28 @@ export default function ViewCookbookSnippets() {
 
           <Flex w="full" flex={1} justifyContent="flex-end">
             <Input
-              minWidth="200px"
+              minWidth="100px"
               maxWidth="500px"
               justifySelf="flex-end"
               mr="space_16"
-              placeholder="Search on this cookbook"
+              placeholder="Search"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
           </Flex>
         </HStack>
       )}
 
-      {/* eslint-disable-next-line no-nested-ternary */}
       {cookbookSnippetLoading ? (
         <SnippetResultsLoading />
-      ) : snippets.length === 0 ? (
-        <ViewCookbookSnippetsEmpty />
-      ) : (
+      ) : snippets.length > 0 ? (
         <SnippetResults results={snippets} />
+      ) : searchTerm ? (
+        <ViewCookbookSnippetsEmptyFiltered
+          clearSearch={() => setSearchTerm('')}
+        />
+      ) : (
+        <ViewCookbookSnippetsEmpty />
       )}
     </Box>
   );