From 956764c2123570d6f4be51d102e66a38ac2a5bcb Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Mon, 2 Dec 2024 14:52:55 +0800 Subject: [PATCH 01/10] fix(TagDigest): add word-break to tag names for better text wrapping PR-2411-1-1 --- src/components/TagDigest/Feed/styles.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/TagDigest/Feed/styles.module.css b/src/components/TagDigest/Feed/styles.module.css index 7ba1341211..2ec224d579 100644 --- a/src/components/TagDigest/Feed/styles.module.css +++ b/src/components/TagDigest/Feed/styles.module.css @@ -8,6 +8,7 @@ font-size: var(--text16); line-height: 1.5rem; /* 24px */ + word-break: break-all; } & .nums { From 27227cd16e370434042d03dc1d014563cdcf5171 Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Mon, 2 Dec 2024 14:59:09 +0800 Subject: [PATCH 02/10] fix(i18n): fix copy --- lang/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lang/en.json b/lang/en.json index 1ec6f90326..8511a9c5d0 100644 --- a/lang/en.json +++ b/lang/en.json @@ -1214,7 +1214,7 @@ "defaultMessage": "Agree" }, "IUS82d": { - "defaultMessage": "Recommended Authors", + "defaultMessage": "Tag active authors", "description": "src/views/TagDetail/RecommendedAuthors/index.tsx" }, "IXycMo": { From e16337d3a915aa34a59a1f474f3d0890c43a0d89 Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Mon, 2 Dec 2024 15:21:18 +0800 Subject: [PATCH 03/10] fix(tag): add space separator between tag words ref: PR-2411-1-5 --- src/common/utils/text/tag.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/utils/text/tag.ts b/src/common/utils/text/tag.ts index 1242d582dc..1d716d4816 100644 --- a/src/common/utils/text/tag.ts +++ b/src/common/utils/text/tag.ts @@ -25,7 +25,7 @@ const stripTagAllPunct = (content: string) => { return words[0] default: const [first, ...rest] = words - return `${first} ${rest.join('')}` + return `${first} ${rest.join(' ')}` } } From 7c84f7340846e4fc04303934cf2df1a5cd181015 Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Mon, 2 Dec 2024 15:44:54 +0800 Subject: [PATCH 04/10] fix(Tags): add reactive tag data fetching --- src/views/Tags/Feed.tsx | 26 ++++++++++++++++++++++++-- src/views/Tags/gql.ts | 11 +++++++++++ 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/src/views/Tags/Feed.tsx b/src/views/Tags/Feed.tsx index 7d286e01b2..82455aa2a0 100644 --- a/src/views/Tags/Feed.tsx +++ b/src/views/Tags/Feed.tsx @@ -1,4 +1,5 @@ import _get from 'lodash/get' +import { useEffect } from 'react' import { analytics, mergeConnections } from '~/common/utils' import { @@ -11,7 +12,7 @@ import { } from '~/components' import { AllTagsHottestQuery } from '~/gql/graphql' -import { ALL_TAGS_HOTTEST } from './gql' +import { ALL_TAGS_HOTTEST, TAG_REACTIVE_DATA } from './gql' export type FeedType = 'recommended' | 'hottest' @@ -26,7 +27,28 @@ const Feed = ({ type }: Props) => { const query = ALL_TAGS_HOTTEST - const { data, loading, error, fetchMore } = usePublicQuery(query) + const { data, loading, error, fetchMore, client } = + usePublicQuery(query) + + // fetch the latest tag data + const loadTagReactiveData = (publicData?: FeedQuery) => { + const publicEdges = publicData?.viewer?.recommendation.tags.edges || [] + const publicIds = publicEdges.map(({ node }) => node.id) + + if (publicIds.length <= 0) { + return + } + + client.query({ + query: TAG_REACTIVE_DATA, + fetchPolicy: 'network-only', + variables: { ids: publicIds }, + }) + } + + useEffect(() => { + loadTagReactiveData(data) + }, [data]) if (loading) { return diff --git a/src/views/Tags/gql.ts b/src/views/Tags/gql.ts index 23261429a9..94dbb2448a 100644 --- a/src/views/Tags/gql.ts +++ b/src/views/Tags/gql.ts @@ -27,3 +27,14 @@ export const ALL_TAGS_HOTTEST = gql` } ${TagDigest.Feed.fragments.tag} ` + +export const TAG_REACTIVE_DATA = gql` + query TagReactiveData($ids: [ID!]!) { + nodes(input: { ids: $ids }) { + id + ... on Tag { + numArticles + } + } + } +` From efa08149be0cf8dff038f61e63b980a95018d088 Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Mon, 2 Dec 2024 16:59:17 +0800 Subject: [PATCH 05/10] feat(TagDetail): enhance RecommendedAuthors with Slides component ref: PR-2411-1-7 --- src/components/Slides/index.tsx | 2 +- src/components/Slides/styles.module.css | 4 ++ .../TagDetail/RecommendedAuthors/index.tsx | 47 ++++++++++++++----- .../RecommendedAuthors/styles.module.css | 11 +++-- 4 files changed, 49 insertions(+), 15 deletions(-) diff --git a/src/components/Slides/index.tsx b/src/components/Slides/index.tsx index 541cafc620..e89084fe0f 100644 --- a/src/components/Slides/index.tsx +++ b/src/components/Slides/index.tsx @@ -12,7 +12,7 @@ interface SlidesProps { } interface SlideItemProps { - size?: 'sm' | 'md' + size?: 'xs' | 'sm' | 'md' onClick?: () => any } diff --git a/src/components/Slides/styles.module.css b/src/components/Slides/styles.module.css index d94027868e..e0797c3639 100644 --- a/src/components/Slides/styles.module.css +++ b/src/components/Slides/styles.module.css @@ -48,6 +48,10 @@ background: var(--color-grey-lighter); } +.sizeXs { + width: 15rem; +} + .sizeSm { width: 18rem; } diff --git a/src/views/TagDetail/RecommendedAuthors/index.tsx b/src/views/TagDetail/RecommendedAuthors/index.tsx index ecd430d9f5..b2df587273 100644 --- a/src/views/TagDetail/RecommendedAuthors/index.tsx +++ b/src/views/TagDetail/RecommendedAuthors/index.tsx @@ -5,7 +5,7 @@ import _random from 'lodash/random' import { FormattedMessage } from 'react-intl' import { analytics } from '~/common/utils' -import { List, usePublicQuery, UserDigest } from '~/components' +import { List, Slides, usePublicQuery, UserDigest } from '~/components' import { TagDetailRecommendedAuthorsQuery } from '~/gql/graphql' import { RECOMMENDED_AUTHORS } from './gql' @@ -32,6 +32,7 @@ const RecommendedAuthors: React.FC = ({ tagId, inSidebar, }) => { + const perColumn = 3 const { data } = usePublicQuery( RECOMMENDED_AUTHORS, { @@ -59,25 +60,49 @@ const RecommendedAuthors: React.FC = ({ [styles.inSidebar]: inSidebar, }) + if (inSidebar) { + return ( +
+ +
+ + {edges.map(({ node, cursor }, i) => ( + + trackRecommendedAuthors(i, node.id)} + hasFollow={false} + hasState={false} + /> + + ))} + +
+
+ ) + } + return (
- -
- - {edges.map(({ node, cursor }, i) => ( - + }> + {_chunk(edges, perColumn).map((chunks, i) => ( + + {chunks.map(({ node, cursor }) => ( trackRecommendedAuthors(i, node.id)} hasFollow={false} hasState={false} /> - - ))} - -
+ ))} + + ))} +
) } diff --git a/src/views/TagDetail/RecommendedAuthors/styles.module.css b/src/views/TagDetail/RecommendedAuthors/styles.module.css index 705672e91e..8aa5c05b58 100644 --- a/src/views/TagDetail/RecommendedAuthors/styles.module.css +++ b/src/views/TagDetail/RecommendedAuthors/styles.module.css @@ -1,7 +1,12 @@ .recommendedAuthors { - padding-bottom: var(--sp24); - margin-top: var(--sp24); + padding-bottom: var(--sp20); + margin-top: var(--sp8); border-bottom: 1px dashed var(--color-grey-light); + + @media (--sm-up) { + padding-bottom: var(--sp24); + margin-top: var(--sp24); + } } .inSidebar { @@ -11,7 +16,7 @@ } .header { - margin-bottom: var(--sp18); + margin-bottom: var(--sp6); font-size: var(--text14); font-weight: var(--font-medium); line-height: 1.375rem; From 3f78e4f807f66628e9ee81071fdbaeee044744a8 Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Mon, 2 Dec 2024 18:26:06 +0800 Subject: [PATCH 06/10] fix(Tag): fix tails on letters cut off PR-2411-1-8 --- src/components/Tag/InlineTag/styles.module.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Tag/InlineTag/styles.module.css b/src/components/Tag/InlineTag/styles.module.css index 3ff6789424..b6b64f164e 100644 --- a/src/components/Tag/InlineTag/styles.module.css +++ b/src/components/Tag/InlineTag/styles.module.css @@ -15,9 +15,8 @@ & .name { @mixin line-clamp; - @mixin fix-cropped-letters; - line-height: inherit; + line-height: 1.01; color: var(--color-black); } From 7d5a781501edeab77c8ba930874c339fd253abce Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Mon, 2 Dec 2024 18:46:56 +0800 Subject: [PATCH 07/10] fix(BookmarksTags): revise empty state PR-2411-1-9 --- lang/default.json | 3 +++ lang/en.json | 3 +++ lang/zh-Hans.json | 3 +++ lang/zh-Hant.json | 3 +++ src/components/Empty/EmptyTagBookmark.tsx | 15 +++++++++++++++ src/components/Empty/index.tsx | 1 + src/views/Me/Bookmarks/BookmarksTags.tsx | 4 ++-- 7 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 src/components/Empty/EmptyTagBookmark.tsx diff --git a/lang/default.json b/lang/default.json index 12c702c931..784c113eba 100644 --- a/lang/default.json +++ b/lang/default.json @@ -2544,6 +2544,9 @@ "iEJeQH": { "defaultMessage": "Liker ID" }, + "iIitRg": { + "defaultMessage": "Tag not bookmarked yet" + }, "iNZdM/": { "defaultMessage": "Switch to support creators with the Optimism network {br} Make support more convenient and affordable", "description": "src/components/Forms/PaymentForm/SwitchNetwork/index.tsx" diff --git a/lang/en.json b/lang/en.json index 8511a9c5d0..2fcbe0300c 100644 --- a/lang/en.json +++ b/lang/en.json @@ -2544,6 +2544,9 @@ "iEJeQH": { "defaultMessage": "Liker ID" }, + "iIitRg": { + "defaultMessage": "Tag not bookmarked yet" + }, "iNZdM/": { "defaultMessage": "Switch to support creators with the Optimism network {br} Make support more convenient and affordable", "description": "src/components/Forms/PaymentForm/SwitchNetwork/index.tsx" diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json index 3a9b30715c..82a99d37af 100644 --- a/lang/zh-Hans.json +++ b/lang/zh-Hans.json @@ -2544,6 +2544,9 @@ "iEJeQH": { "defaultMessage": "设置 Liker ID" }, + "iIitRg": { + "defaultMessage": "尚未收藏标签" + }, "iNZdM/": { "defaultMessage": "切换后即可支持创作者，采用 Optimism 网络{br}让支持更方便且费用低廉", "description": "src/components/Forms/PaymentForm/SwitchNetwork/index.tsx" diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json index 6a769d5231..4d31476398 100644 --- a/lang/zh-Hant.json +++ b/lang/zh-Hant.json @@ -2544,6 +2544,9 @@ "iEJeQH": { "defaultMessage": "設置 Liker ID" }, + "iIitRg": { + "defaultMessage": "尚未收藏標籤" + }, "iNZdM/": { "defaultMessage": "切換後即可支持創作者，採用 Optimism 網路{br}讓支持更方便且費用低廉", "description": "src/components/Forms/PaymentForm/SwitchNetwork/index.tsx" diff --git a/src/components/Empty/EmptyTagBookmark.tsx b/src/components/Empty/EmptyTagBookmark.tsx new file mode 100644 index 0000000000..30c8930fdf --- /dev/null +++ b/src/components/Empty/EmptyTagBookmark.tsx @@ -0,0 +1,15 @@ +import { FormattedMessage } from 'react-intl' + +import { ReactComponent as IconSave } from '@/public/static/icons/24px/save.svg' +import { Empty, Icon } from '~/components' + +export const EmptyTagBookmark = () => ( + } + description={ + <> + + + } + /> +) diff --git a/src/components/Empty/index.tsx b/src/components/Empty/index.tsx index 5d1916b856..d684f0358b 100644 --- a/src/components/Empty/index.tsx +++ b/src/components/Empty/index.tsx @@ -13,6 +13,7 @@ export * from './EmptyResponse' export * from './EmptySearch' export * from './EmptyTag' export * from './EmptyTagArticles' +export * from './EmptyTagBookmark' export * from './EmptyTransaction' export * from './EmptyTransactionCurrency' export * from './EmptyTransactionSubscription' diff --git a/src/views/Me/Bookmarks/BookmarksTags.tsx b/src/views/Me/Bookmarks/BookmarksTags.tsx index f5b36991c2..0c79f403ed 100644 --- a/src/views/Me/Bookmarks/BookmarksTags.tsx +++ b/src/views/Me/Bookmarks/BookmarksTags.tsx @@ -4,7 +4,7 @@ import { FormattedMessage, useIntl } from 'react-intl' import { mergeConnections } from '~/common/utils' import { - EmptyBookmark, + EmptyTagBookmark, Head, InfiniteScroll, Layout, @@ -58,7 +58,7 @@ const BaseMeBookmarksTags = () => { const { edges, pageInfo } = data?.viewer?.following?.tags || {} if (!edges || edges.length <= 0 || !pageInfo) { - return + return } const loadMore = () => From 300c6956ab8e6419e20cde9f6aee639d4a3810f3 Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Mon, 2 Dec 2024 19:04:09 +0800 Subject: [PATCH 08/10] fix(Bookmarks): add followed tags check in BookmarksTags PR-2411-1-13 --- src/views/Me/Bookmarks/BookmarksTags.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/views/Me/Bookmarks/BookmarksTags.tsx b/src/views/Me/Bookmarks/BookmarksTags.tsx index 0c79f403ed..095d06b51f 100644 --- a/src/views/Me/Bookmarks/BookmarksTags.tsx +++ b/src/views/Me/Bookmarks/BookmarksTags.tsx @@ -61,6 +61,14 @@ const BaseMeBookmarksTags = () => { return } + const hasFollowedTags = edges.some( + ({ node }) => node.__typename === 'Tag' && node.isFollower + ) + + if (!hasFollowedTags) { + return + } + const loadMore = () => fetchMore({ variables: { after: pageInfo.endCursor }, From c81f5d4ca9d17a40781dbf497134171b0f7b8c78 Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Mon, 2 Dec 2024 20:09:27 +0800 Subject: [PATCH 09/10] fix(Bookmarks): ensure tag bookmarks update with refetch ref: PR-2411-1-13 --- src/components/Buttons/TagBookmark/Bookmark.tsx | 8 ++++++++ src/views/Me/Bookmarks/BookmarksTags.tsx | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Buttons/TagBookmark/Bookmark.tsx b/src/components/Buttons/TagBookmark/Bookmark.tsx index 3e167b90e8..29273344a7 100644 --- a/src/components/Buttons/TagBookmark/Bookmark.tsx +++ b/src/components/Buttons/TagBookmark/Bookmark.tsx @@ -21,6 +21,9 @@ interface BookmarkProps { const Bookmark = ({ tag }: BookmarkProps) => { const viewer = useContext(ViewerContext) const intl = useIntl() + const { + ME_BOOKMARK_TAGS_FEED, + } = require('~/views/Me/Bookmarks/BookmarksTags') const [bookmark] = useMutation( TOGGLE_BOOKMARK_TAG, { @@ -35,6 +38,11 @@ const Bookmark = ({ tag }: BookmarkProps) => { }, } : undefined, + refetchQueries: [ + { + query: ME_BOOKMARK_TAGS_FEED, + }, + ], } ) diff --git a/src/views/Me/Bookmarks/BookmarksTags.tsx b/src/views/Me/Bookmarks/BookmarksTags.tsx index 095d06b51f..9022976cb3 100644 --- a/src/views/Me/Bookmarks/BookmarksTags.tsx +++ b/src/views/Me/Bookmarks/BookmarksTags.tsx @@ -17,7 +17,7 @@ import { MeBookmarkTagsFeedQuery } from '~/gql/graphql' import BookmarksTabs from './BookmarksTabs' -const ME_BOOKMARK_TAGS_FEED = gql` +export const ME_BOOKMARK_TAGS_FEED = gql` query MeBookmarkTagsFeed($after: String) { viewer { id From abedc51eb0ae6e9c94440a8e7cdc8bf97b72e797 Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Tue, 3 Dec 2024 16:23:38 +0800 Subject: [PATCH 10/10] fix(TagDigest): delete Bookmark test --- .../TagDigest/Bookmark/Bookmark.test.tsx | 51 ------------------- 1 file changed, 51 deletions(-) delete mode 100644 src/components/TagDigest/Bookmark/Bookmark.test.tsx diff --git a/src/components/TagDigest/Bookmark/Bookmark.test.tsx b/src/components/TagDigest/Bookmark/Bookmark.test.tsx deleted file mode 100644 index de25ee0cf4..0000000000 --- a/src/components/TagDigest/Bookmark/Bookmark.test.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { MockedProvider } from '@apollo/react-testing' -import { render, screen } from '@testing-library/react' -import { IntlProvider } from 'react-intl' -import { describe, expect, it } from 'vitest' - -import { TEST_ID } from '~/common/enums' -import { TagDigest } from '~/components' -import { MOCK_TAG } from '~/stories/mocks' - -describe('', () => { - it('should render a TagDigest.Bookmark', () => { - render( - - - - - - ) - - const $bookmark = screen.getByTestId(TEST_ID.DIGEST_TAG_BOOKMARK) - expect($bookmark).toBeInTheDocument() - - const $name = screen.getByText(MOCK_TAG.content) - expect($name).toBeInTheDocument() - - const $bookmarkButton = screen.getByRole('button', { - name: 'Bookmark', - }) - expect($bookmarkButton).toBeInTheDocument() - }) - - it('should render a TagDigest.Bookmark with isFollower', () => { - render( - - - - - - ) - - const $bookmarkButton = screen.getByRole('button', { - name: 'Remove bookmark', - }) - expect($bookmarkButton).toBeInTheDocument() - }) -})