feat: added snippet/cookbook view pages

Author: dastrong-codiga

src/renderer/pages/ViewCookbookSnippets.tsx

@@ -0,0 +1,78 @@
+import { useQuery } from '@apollo/client';
+import { useParams } from 'react-router-dom';
+import { Box, Flex, HStack, Text } from '@chakra-ui/react';
+
+import { GET_COOKBOOK_RECIPES } from '../graphql/queries';
+import { GET_USER_RECIPES_VARIABLES } from '../graphql/variables';
+import ViewCookbookSnippetsError from '../components/ViewCookbookSnippets/ViewCookbookSnippetsError';
+import ViewCookbookSnippetsLoading from '../components/ViewCookbookSnippets/ViewCookbookSnippetsLoading';
+import ViewCookbookSnippetsEmpty from '../components/ViewCookbookSnippets/ViewCookbookSnippetsEmpty';
+import BackButton from '../components/BackButton';
+import FavoriteCookbook from '../components/Favorite/FavoriteCookbook';
+import AvatarAndName from '../components/AvatarAndName';
+import PrivacyAndVotes from '../components/PrivacyAndVotes';
+import FormattedDate from '../components/FormattedDate';
+import SnippetResults from '../components/SnippetResults/SnippetResults';
+
+export default function ViewCookbookSnippets() {
+  const params = useParams();
+
+  const { data, loading, error } = useQuery(GET_COOKBOOK_RECIPES, {
+    variables: {
+      cookbookId: Number(params.cookbookId),
+      ...GET_USER_RECIPES_VARIABLES,
+    },
+  });
+
+  const cookbook = data?.cookbook;
+
+  if (loading) {
+    return <ViewCookbookSnippetsLoading />;
+  }
+
+  if (error || !cookbook) {
+    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 />
+
+        <Flex alignItems="center" gridGap="space_8">
+          <Text size="sm" fontWeight="bold" noOfLines={1}>
+            {cookbook.name}
+          </Text>
+          <FavoriteCookbook
+            isSubscribed={cookbook.isSubscribed}
+            cookbookId={cookbook.id}
+          />
+        </Flex>
+
+        <AvatarAndName owner={cookbook.owner} />
+
+        <PrivacyAndVotes
+          isPublic={cookbook.isPublic}
+          upvotes={cookbook.upvotes}
+          downvotes={cookbook.downvotes}
+        />
+
+        <FormattedDate timestamp={cookbook.creationTimestampMs} />
+      </HStack>
+
+      {!cookbook.recipes || cookbook.recipes.length === 0 ? (
+        <ViewCookbookSnippetsEmpty />
+      ) : (
+        <SnippetResults results={cookbook.recipes} />
+      )}
+    </Box>
+  );
+}

src/renderer/pages/ViewSnippet.tsx

@@ -0,0 +1,78 @@
+import { useParams } from 'react-router-dom';
+import { Box, Flex, HStack, Text } from '@chakra-ui/react';
+import { Logo, Tags } from '@codiga/components';
+import { useQuery } from '@apollo/client';
+
+import { GET_RECIPE } from '../graphql/queries';
+import FavoriteSnippet from '../components/Favorite/FavoriteSnippet';
+import ViewSnippetError from '../components/ViewSnippet/ViewSnippetError';
+import ViewSnippetLoading from '../components/ViewSnippet/ViewSnippetLoading';
+import BackButton from '../components/BackButton';
+import PrivacyAndVotes from '../components/PrivacyAndVotes';
+import FormattedDate from '../components/FormattedDate';
+import AvatarAndName from '../components/AvatarAndName';
+import Code from '../components/Code/Code';
+
+export default function ViewSnippet() {
+  const params = useParams();
+
+  const { data, loading, error } = useQuery(GET_RECIPE, {
+    variables: {
+      recipeId: Number(params.snippetId),
+    },
+  });
+
+  const recipe = data?.recipe;
+
+  if (loading) {
+    return <ViewSnippetLoading />;
+  }
+
+  if (error || !recipe) {
+    return <ViewSnippetError />;
+  }
+
+  return (
+    <Box h="full">
+      {/* INFO SECTION */}
+      <HStack
+        alignItems="center"
+        bg="neutral.25"
+        _dark={{ bg: 'base.dark' }}
+        h="74px"
+        w="full"
+        spacing="space_16"
+      >
+        <BackButton />
+
+        <Flex alignItems="center" gridGap="space_8">
+          <Logo value={recipe.language} fullSize={false} logoSize={24} />
+          <Text size="sm" fontWeight="bold" noOfLines={1}>
+            {recipe.name}
+          </Text>
+          <FavoriteSnippet
+            isSubscribed={recipe.isSubscribed}
+            recipeId={recipe.id}
+          />
+        </Flex>
+
+        <AvatarAndName owner={recipe.owner} />
+
+        <PrivacyAndVotes
+          isPublic={recipe.isPublic}
+          upvotes={recipe.upvotes}
+          downvotes={recipe.downvotes}
+        />
+
+        <FormattedDate timestamp={recipe.creationTimestampMs} />
+
+        {recipe?.tags && recipe?.tags.length > 0 && (
+          <Tags values={recipe?.tags || []} max={1} tagProps={{ size: 'sm' }} />
+        )}
+      </HStack>
+
+      {/* CODE */}
+      <Code recipe={recipe} />
+    </Box>
+  );
+}