feat: added search and improved loading structure

Author: dastrong-codiga

src/renderer/graphql/queries.ts

@@ -437,15 +437,8 @@ export const GET_RECIPE = gql`
   }
 `;
 
-export const GET_COOKBOOK_RECIPES = gql`
-  query getCookbookRecipes(
-    $cookbookId: Long!
-    $howmany: Long!
-    $skip: Long!
-    $name: String
-    $orderBy: AssistantRecipeQueryOrderBy
-    $desc: Boolean
-  ) {
+export const GET_COOKBOOK_INFO = gql`
+  query getCookbookRecipes($cookbookId: Long!) {
     cookbook: assistantCookbook(id: $cookbookId) {
       id
       name
@@ -466,6 +459,20 @@ export const GET_COOKBOOK_RECIPES = gql`
       upvotes
       downvotes
       languages
+    }
+  }
+`;
+
+export const GET_COOKBOOK_RECIPES = gql`
+  query getCookbookRecipes(
+    $cookbookId: Long!
+    $howmany: Long!
+    $skip: Long!
+    $name: String
+    $orderBy: AssistantRecipeQueryOrderBy
+    $desc: Boolean
+  ) {
+    cookbook: assistantCookbook(id: $cookbookId) {
       recipes(
         howmany: $howmany
         skip: $skip

src/renderer/pages/ViewCookbookSnippets.tsx

@@ -1,10 +1,12 @@
+import { useState } from 'react';
 import { useQuery } from '@apollo/client';
 import { useParams } from 'react-router-dom';
-import { Box, Flex, HStack, Link, Text } from '@chakra-ui/react';
+import { Box, Flex, HStack, Input, Link, Text } from '@chakra-ui/react';
 
 import { getCookbookUrl } from '../utils/urlUtils';
-import { GET_COOKBOOK_RECIPES } from '../graphql/queries';
+import { GET_COOKBOOK_INFO, GET_COOKBOOK_RECIPES } from '../graphql/queries';
 import { GET_USER_RECIPES_VARIABLES } from '../graphql/variables';
+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';
@@ -14,72 +16,110 @@ import AvatarAndName from '../components/AvatarAndName';
 import PrivacyAndVotes from '../components/PrivacyAndVotes';
 import FormattedDate from '../components/FormattedDate';
 import SnippetResults from '../components/SnippetResults/SnippetResults';
+import SnippetResultsLoading from '../components/SnippetResults/SnippetResultsLoading';
 
 export default function ViewCookbookSnippets() {
   const params = useParams();
+  const [searchTerm, setSearchTerm] = useState('');
 
-  const { data, loading, error } = useQuery(GET_COOKBOOK_RECIPES, {
+  const {
+    data: cookbookInfoData,
+    loading: cookbookInfoLoading,
+    error: cookbookInfoError,
+  } = useQuery(GET_COOKBOOK_INFO, {
+    pollInterval: PAGE_QUERY_POLL_INTERVAL_IN_MS,
+    variables: {
+      cookbookId: Number(params.cookbookId),
+    },
+  });
+
+  const {
+    data: cookbookSnippetData,
+    loading: cookbookSnippetLoading,
+    error: cookbookSnippetError,
+  } = useQuery(GET_COOKBOOK_RECIPES, {
+    pollInterval: PAGE_QUERY_POLL_INTERVAL_IN_MS,
     variables: {
       cookbookId: Number(params.cookbookId),
       ...GET_USER_RECIPES_VARIABLES,
+      name: searchTerm || null,
+    },
+    context: {
+      debounceKey: 'view-cookbook-snippets',
     },
   });
 
-  const cookbook = data?.cookbook;
+  const cookbook = cookbookInfoData?.cookbook;
+  const snippets = cookbookSnippetData?.cookbook?.recipes || [];
 
-  if (loading) {
-    return <ViewCookbookSnippetsLoading />;
-  }
-
-  if (error || !cookbook) {
+  if (cookbookInfoError || cookbook === null || cookbookSnippetError) {
     return <ViewCookbookSnippetsError />;
   }
 
   return (
     <Box h="full">
       {/* INFO SECTION */}
-      <HStack
-        alignItems="center"
-        bg="neutral.25"
-        _dark={{ bg: 'base.dark' }}
-        h="74px"
-        w="full"
-        spacing="space_16"
-      >
-        <BackButton />
+      {cookbookInfoLoading ? (
+        <ViewCookbookSnippetsLoading />
+      ) : (
+        <HStack
+          alignItems="center"
+          bg="neutral.25"
+          _dark={{ bg: 'base.dark' }}
+          h="74px"
+          w="full"
+          spacing="space_16"
+        >
+          <BackButton />
 
-        <Flex alignItems="center" gridGap="space_8">
-          <Text size="sm" fontWeight="bold" noOfLines={1}>
-            <Link
-              isExternal
-              variant="subtle"
+          <Flex alignItems="center" gridGap="space_8">
+            <Text size="sm" fontWeight="bold" noOfLines={1}>
+              <Link
+                isExternal
+                variant="subtle"
                 _focus={{ boxShadow: 'none' }}
-              href={getCookbookUrl(cookbook.id)}
-            >
-              {cookbook.name}
-            </Link>
-          </Text>
-          <FavoriteCookbook
-            isSubscribed={cookbook.isSubscribed}
-            cookbookId={cookbook.id}
-          />
-        </Flex>
+                href={getCookbookUrl(cookbook.id)}
+              >
+                {cookbook.name}
+              </Link>
+            </Text>
+            <FavoriteCookbook
+              isSubscribed={cookbook.isSubscribed}
+              cookbookId={cookbook.id}
+            />
+          </Flex>
 
-        <AvatarAndName owner={cookbook.owner} />
+          <AvatarAndName owner={cookbook.owner} />
 
-        <PrivacyAndVotes
-          isPublic={cookbook.isPublic}
-          upvotes={cookbook.upvotes}
-          downvotes={cookbook.downvotes}
-        />
+          <PrivacyAndVotes
+            isPublic={cookbook.isPublic}
+            upvotes={cookbook.upvotes}
+            downvotes={cookbook.downvotes}
+          />
+
+          <FormattedDate timestamp={cookbook.creationTimestampMs} />
 
-        <FormattedDate timestamp={cookbook.creationTimestampMs} />
-      </HStack>
+          <Flex w="full" flex={1} justifyContent="flex-end">
+            <Input
+              minWidth="200px"
+              maxWidth="500px"
+              justifySelf="flex-end"
+              mr="space_16"
+              placeholder="Search on this cookbook"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </Flex>
+        </HStack>
+      )}
 
-      {!cookbook.recipes || cookbook.recipes.length === 0 ? (
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {cookbookSnippetLoading ? (
+        <SnippetResultsLoading />
+      ) : snippets.length === 0 ? (
         <ViewCookbookSnippetsEmpty />
       ) : (
-        <SnippetResults results={cookbook.recipes} />
+        <SnippetResults results={snippets} />
       )}
     </Box>
   );