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

Commit 2d1c829

Browse files
dastrong-codigadastrong-codiga
committed
chore: updated table to use reusable components
1 parent 37247c8 commit 2d1c829

File tree

2 files changed

+42
-98
lines changed

2 files changed

+42
-98
lines changed

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

Lines changed: 18 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,16 @@ import {
1010
TableCellProps,
1111
Link,
1212
} from '@chakra-ui/react';
13-
import {
14-
LockIcon,
15-
Avatar,
16-
UsersIcon,
17-
CodeIcon,
18-
Logos,
19-
} from '@codiga/components';
13+
import { UsersIcon, Logos } from '@codiga/components';
2014

2115
import { getCookbookUrl, getGroupUrl } from '../../utils/urlUtils';
22-
import { getAvatarUrl } from '../../utils/userUtils';
2316
import { AssistantCookbook } from '../../types/assistantTypes';
2417
import { PageTypes } from '../../types/pageTypes';
2518
import FavoriteCookbook from '../Favorite/FavoriteCookbook';
26-
import UserLink from '../UserLink';
27-
import VotesCurrent from '../VotesCurrent';
19+
import PrivacyAndVotes from '../PrivacyAndVotes';
20+
import FormattedDate from '../FormattedDate';
21+
import AvatarAndName from '../AvatarAndName';
22+
import Uses from '../Uses';
2823

2924
const Td = (props: TableCellProps) => (
3025
<ChakraTd
@@ -89,6 +84,7 @@ export default function CookbookTable({ cookbooks, page }: CookbookTableProps) {
8984
/>
9085
</Flex>
9186
</Td>
87+
9288
{cookbook.groups && cookbook.groups.length > 0 && (
9389
<Td>
9490
<Flex alignItems="center" gap="space_8">
@@ -107,50 +103,25 @@ export default function CookbookTable({ cookbooks, page }: CookbookTableProps) {
107103
</Flex>
108104
</Td>
109105
)}
106+
110107
<Td>
111-
<Flex alignItems="center" gap="space_8">
112-
<Avatar
113-
size="xs"
114-
name={cookbook.owner?.displayName || 'Anonymous'}
115-
src={getAvatarUrl({ id: cookbook.owner?.id })}
116-
/>
117-
<Text size="xs" noOfLines={1}>
118-
<UserLink owner={cookbook.owner} />
119-
</Text>
120-
</Flex>
108+
<AvatarAndName owner={cookbook.owner} />
121109
</Td>
110+
122111
<Td>
123-
<Flex alignItems="center" gap="space_8">
124-
<Text
125-
size="xs"
126-
noOfLines={1}
127-
gridGap="space_4"
128-
d="flex"
129-
alignItems="center"
130-
>
131-
<LockIcon open={!!cookbook.isPublic} />
132-
{cookbook.isPublic ? 'Public' : 'Private'}
133-
</Text>
134-
<VotesCurrent
135-
upvotes={cookbook.upvotes}
136-
downvotes={cookbook.downvotes}
137-
/>
138-
</Flex>
112+
<PrivacyAndVotes
113+
isPublic={cookbook.isPublic}
114+
upvotes={cookbook.upvotes}
115+
downvotes={cookbook.downvotes}
116+
/>
139117
</Td>
118+
140119
<Td>
141-
<Flex alignItems="center" gap="space_8">
142-
<Text size="xs" noOfLines={1}>
143-
{new Date(cookbook.creationTimestampMs!).toDateString()}
144-
</Text>
145-
</Flex>
120+
<FormattedDate timestamp={cookbook.creationTimestampMs!} />
146121
</Td>
122+
147123
<Td>
148-
<Flex alignItems="center" gap="space_8">
149-
<CodeIcon />
150-
<Text size="xs" noOfLines={1}>
151-
{cookbook?.recipesCount}
152-
</Text>
153-
</Flex>
124+
<Uses count={cookbook?.recipesCount} />
154125
</Td>
155126

156127
<Td>

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

Lines changed: 24 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,18 @@ import {
77
Tr,
88
Tbody,
99
Td as ChakraTd,
10-
Tag,
1110
TableCellProps,
1211
Link,
1312
} from '@chakra-ui/react';
14-
import { LockIcon, Logo, Avatar, UsersIcon } from '@codiga/components';
13+
import { Logo, UsersIcon, Tags } from '@codiga/components';
1514

16-
import { getAvatarUrl } from '../../utils/userUtils';
1715
import { getGroupUrl, getSnippetUrl } from '../../utils/urlUtils';
1816
import { AssistantRecipeWithStats } from '../../types/assistantTypes';
1917
import { PageTypes } from '../../types/pageTypes';
2018
import FavoriteSnippet from '../Favorite/FavoriteSnippet';
21-
import UserLink from '../UserLink';
22-
import VotesCurrent from '../VotesCurrent';
19+
import PrivacyAndVotes from '../PrivacyAndVotes';
20+
import FormattedDate from '../FormattedDate/FormattedDate';
21+
import AvatarAndName from '../AvatarAndName/AvatarAndName';
2322

2423
const Td = (props: TableCellProps) => (
2524
<ChakraTd {...props} p="space_16" pr="space_64" _last={{ pr: 'space_56' }} />
@@ -57,6 +56,7 @@ export default function SnippetTable({ page, recipes }: SnippetTableProps) {
5756
logoSize={24}
5857
/>
5958
</Td>
59+
6060
{recipe.groups && recipe.groups.length > 0 && (
6161
<Td>
6262
<Flex alignItems="center" gap="space_8">
@@ -75,6 +75,7 @@ export default function SnippetTable({ page, recipes }: SnippetTableProps) {
7575
</Flex>
7676
</Td>
7777
)}
78+
7879
<Td>
7980
<Flex alignItems="center" gap="space_8">
8081
<Text
@@ -103,59 +104,31 @@ export default function SnippetTable({ page, recipes }: SnippetTableProps) {
103104
/>
104105
</Flex>
105106
</Td>
107+
106108
<Td>
107-
<Flex alignItems="center" gap="space_8">
108-
<Avatar
109-
size="xs"
110-
name={recipe.owner?.displayName || 'Anonymous'}
111-
src={getAvatarUrl({ id: recipe.owner?.id })}
112-
/>
113-
<Text
114-
size="xs"
115-
noOfLines={1}
116-
maxW="300px"
117-
display="inline-block"
118-
>
119-
<UserLink owner={recipe.owner} />
120-
</Text>
121-
</Flex>
109+
<AvatarAndName owner={recipe.owner} />
122110
</Td>
111+
123112
<Td>
124-
<Flex alignItems="center" gap="space_8">
125-
<Text
126-
size="xs"
127-
noOfLines={1}
128-
gridGap="space_4"
129-
d="flex"
130-
alignItems="center"
131-
>
132-
<LockIcon open={!!recipe.isPublic} />
133-
{recipe.isPublic ? 'Public' : 'Private'}
134-
</Text>
135-
<VotesCurrent
136-
upvotes={recipe.upvotes}
137-
downvotes={recipe.downvotes}
138-
/>
139-
</Flex>
113+
<PrivacyAndVotes
114+
isPublic={recipe.isPublic}
115+
upvotes={recipe.upvotes}
116+
downvotes={recipe.downvotes}
117+
/>
140118
</Td>
119+
141120
<Td>
142-
<Flex alignItems="center" gap="space_8">
143-
<Text size="xs" noOfLines={1}>
144-
{new Date(recipe.creationTimestampMs!).toDateString()}
145-
</Text>
146-
</Flex>
121+
<FormattedDate timestamp={recipe.creationTimestampMs!} />
147122
</Td>
123+
148124
<Td isNumeric>
149-
<Flex gridGap="space_8">
150-
{recipe.tags?.slice(0, 1).map((tag) => (
151-
<Tag size="sm" key={`${tag}-${recipe.id}`}>
152-
{tag}
153-
</Tag>
154-
))}
155-
{(recipe.tags || []).length - 1 > 0 ? (
156-
<Tag size="sm">+{(recipe.tags || []).length - 1}</Tag>
157-
) : null}
158-
</Flex>
125+
{recipe?.tags && recipe?.tags.length > 0 && (
126+
<Tags
127+
values={recipe?.tags || []}
128+
max={1}
129+
tagProps={{ size: 'sm' }}
130+
/>
131+
)}
159132
</Td>
160133
</Tr>
161134
);

0 commit comments

Comments
 (0)