Skip to content
This repository was archived by the owner on May 4, 2023. It is now read-only.

Commit ff7d9ba

Browse files
dastrong-codigadastrong-codiga
committed
feat: made snippet/cookbook tables properly clickable
1 parent ac77eed commit ff7d9ba

File tree

4 files changed

+58
-64
lines changed

4 files changed

+58
-64
lines changed

‎src/renderer/components/CookbookTable/CookbookTable.tsx‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ import {
99
Td as ChakraTd,
1010
TableCellProps,
1111
Link,
12+
LinkBox,
13+
LinkOverlay,
1214
} from '@chakra-ui/react';
1315
import { UsersIcon, Logos } from '@codiga/components';
14-
import { useNavigate } from 'react-router-dom';
16+
import { Link as RouterLink } from 'react-router-dom';
1517

16-
import { getCookbookUrl, getGroupUrl } from '../../utils/urlUtils';
18+
import { getGroupUrl } from '../../utils/urlUtils';
1719
import { AssistantCookbook } from '../../types/assistantTypes';
18-
import { PageTypes } from '../../types/pageTypes';
1920
import FavoriteCookbook from '../Favorite/FavoriteCookbook';
2021
import PrivacyAndVotes from '../PrivacyAndVotes';
2122
import FormattedDate from '../FormattedDate';
@@ -34,12 +35,9 @@ const Td = (props: TableCellProps) => (
3435

3536
type CookbookTableProps = {
3637
cookbooks: AssistantCookbook[];
37-
page: PageTypes;
3838
};
3939

40-
export default function CookbookTable({ cookbooks, page }: CookbookTableProps) {
41-
const navigate = useNavigate();
42-
40+
export default function CookbookTable({ cookbooks }: CookbookTableProps) {
4341
return (
4442
<Box
4543
w="full"
@@ -54,7 +52,9 @@ export default function CookbookTable({ cookbooks, page }: CookbookTableProps) {
5452
<Tbody>
5553
{cookbooks.map((cookbook) => {
5654
return (
57-
<Tr
55+
<LinkBox
56+
as={Tr}
57+
cursor="pointer"
5858
key={cookbook.id}
5959
p="space_16"
6060
borderBottom="1px"
@@ -65,7 +65,6 @@ export default function CookbookTable({ cookbooks, page }: CookbookTableProps) {
6565
bg: 'neutral.25',
6666
_dark: { bg: 'base.onyx' },
6767
}}
68-
onClick={() => navigate(`/view-cookbook/${cookbook.id}`)}
6968
>
7069
<Td>
7170
<Flex alignItems="center" gap="space_8">
@@ -75,19 +74,12 @@ export default function CookbookTable({ cookbooks, page }: CookbookTableProps) {
7574
maxWidth="300px"
7675
display="inline-block"
7776
>
78-
<Link
79-
isExternal
80-
variant="subtle"
81-
href={getCookbookUrl(
82-
page,
83-
cookbook.id,
84-
cookbook.groups?.length
85-
? cookbook.groups[0].id
86-
: undefined
87-
)}
77+
<LinkOverlay
78+
as={RouterLink}
79+
to={`/view-cookbook/${cookbook.id}`}
8880
>
8981
{cookbook.name}
90-
</Link>
82+
</LinkOverlay>
9183
</Text>
9284
<FavoriteCookbook
9385
isSubscribed={!!cookbook.isSubscribed}
@@ -138,7 +130,7 @@ export default function CookbookTable({ cookbooks, page }: CookbookTableProps) {
138130
<Td>
139131
<Logos values={cookbook?.languages || []} max={2} />
140132
</Td>
141-
</Tr>
133+
</LinkBox>
142134
);
143135
})}
144136
</Tbody>

‎src/renderer/components/SnippetTable/SnippetTable.tsx‎

Lines changed: 31 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ import {
99
Td as ChakraTd,
1010
TableCellProps,
1111
Link,
12+
LinkBox,
13+
LinkOverlay,
1214
} from '@chakra-ui/react';
1315
import { Logo, UsersIcon, Tags } from '@codiga/components';
14-
import { useNavigate } from 'react-router-dom';
16+
import { Link as RouterLink } from 'react-router-dom';
1517

16-
import { getGroupUrl, getSnippetUrl } from '../../utils/urlUtils';
18+
import { getGroupUrl } from '../../utils/urlUtils';
1719
import { AssistantRecipeWithStats } from '../../types/assistantTypes';
18-
import { PageTypes } from '../../types/pageTypes';
1920
import FavoriteSnippet from '../Favorite/FavoriteSnippet';
2021
import PrivacyAndVotes from '../PrivacyAndVotes';
2122
import FormattedDate from '../FormattedDate/FormattedDate';
@@ -26,13 +27,10 @@ const Td = (props: TableCellProps) => (
2627
);
2728

2829
type SnippetTableProps = {
29-
page: PageTypes;
3030
recipes: AssistantRecipeWithStats[];
3131
};
3232

33-
export default function SnippetTable({ page, recipes }: SnippetTableProps) {
34-
const navigate = useNavigate();
35-
33+
export default function SnippetTable({ recipes }: SnippetTableProps) {
3634
return (
3735
<Box
3836
w="full"
@@ -47,8 +45,9 @@ export default function SnippetTable({ page, recipes }: SnippetTableProps) {
4745
<Tbody>
4846
{recipes.map((recipe) => {
4947
return (
50-
<Tr
51-
onClick={() => navigate(`/view-snippet/${recipe.id}`)}
48+
<LinkBox
49+
as={Tr}
50+
cursor="pointer"
5251
key={recipe.id}
5352
p="space_16"
5453
borderBottom="1px"
@@ -68,6 +67,28 @@ export default function SnippetTable({ page, recipes }: SnippetTableProps) {
6867
/>
6968
</Td>
7069

70+
<Td>
71+
<Flex alignItems="center" gap="space_8">
72+
<Text
73+
size="sm"
74+
noOfLines={1}
75+
maxWidth="300px"
76+
display="inline-block"
77+
>
78+
<LinkOverlay
79+
as={RouterLink}
80+
to={`/view-snippet/${recipe.id}`}
81+
>
82+
{recipe.name}
83+
</LinkOverlay>
84+
</Text>
85+
<FavoriteSnippet
86+
isSubscribed={!!recipe.isSubscribed}
87+
recipeId={recipe.id}
88+
/>
89+
</Flex>
90+
</Td>
91+
7192
{recipe.groups && recipe.groups.length > 0 && (
7293
<Td>
7394
<Flex alignItems="center" gap="space_8">
@@ -87,35 +108,6 @@ export default function SnippetTable({ page, recipes }: SnippetTableProps) {
87108
</Td>
88109
)}
89110

90-
<Td>
91-
<Flex alignItems="center" gap="space_8">
92-
<Text
93-
size="sm"
94-
noOfLines={1}
95-
maxWidth="300px"
96-
display="inline-block"
97-
>
98-
<Link
99-
isExternal
100-
variant="subtle"
101-
href={getSnippetUrl(
102-
page,
103-
recipe.id,
104-
recipe.groups?.length
105-
? recipe.groups[0].id
106-
: undefined
107-
)}
108-
>
109-
{recipe.name}
110-
</Link>
111-
</Text>
112-
<FavoriteSnippet
113-
isSubscribed={!!recipe.isSubscribed}
114-
recipeId={recipe.id}
115-
/>
116-
</Flex>
117-
</Td>
118-
119111
<Td>
120112
<AvatarAndName owner={recipe.owner} />
121113
</Td>
@@ -141,7 +133,7 @@ export default function SnippetTable({ page, recipes }: SnippetTableProps) {
141133
/>
142134
)}
143135
</Td>
144-
</Tr>
136+
</LinkBox>
145137
);
146138
})}
147139
</Tbody>

‎src/renderer/pages/ViewCookbookSnippets.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { useQuery } from '@apollo/client';
22
import { useParams } from 'react-router-dom';
3-
import { Box, Flex, HStack, Text } from '@chakra-ui/react';
3+
import { Box, Flex, HStack, Link, Text } from '@chakra-ui/react';
44

5+
import { getCookbookUrl } from '../utils/urlUtils';
56
import { GET_COOKBOOK_RECIPES } from '../graphql/queries';
67
import { GET_USER_RECIPES_VARIABLES } from '../graphql/variables';
78
import ViewCookbookSnippetsError from '../components/ViewCookbookSnippets/ViewCookbookSnippetsError';
@@ -49,7 +50,13 @@ export default function ViewCookbookSnippets() {
4950

5051
<Flex alignItems="center" gridGap="space_8">
5152
<Text size="sm" fontWeight="bold" noOfLines={1}>
52-
{cookbook.name}
53+
<Link
54+
isExternal
55+
variant="subtle"
56+
href={getCookbookUrl(cookbook.id)}
57+
>
58+
{cookbook.name}
59+
</Link>
5360
</Text>
5461
<FavoriteCookbook
5562
isSubscribed={cookbook.isSubscribed}

‎src/renderer/pages/ViewSnippet.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { useParams } from 'react-router-dom';
2-
import { Box, Flex, HStack, Text } from '@chakra-ui/react';
2+
import { Box, Flex, HStack, Link, Text } from '@chakra-ui/react';
33
import { Logo, Tags } from '@codiga/components';
44
import { useQuery } from '@apollo/client';
55

6+
import { getSnippetUrl } from '../utils/urlUtils';
67
import { GET_RECIPE } from '../graphql/queries';
78
import FavoriteSnippet from '../components/Favorite/FavoriteSnippet';
89
import ViewSnippetError from '../components/ViewSnippet/ViewSnippetError';
@@ -48,7 +49,9 @@ export default function ViewSnippet() {
4849
<Flex alignItems="center" gridGap="space_8">
4950
<Logo value={recipe.language} fullSize={false} logoSize={24} />
5051
<Text size="sm" fontWeight="bold" noOfLines={1}>
51-
{recipe.name}
52+
<Link isExternal variant="subtle" href={getSnippetUrl(recipe.id)}>
53+
{recipe.name}
54+
</Link>
5255
</Text>
5356
<FavoriteSnippet
5457
isSubscribed={recipe.isSubscribed}

0 commit comments

Comments
 (0)