From c925f73cea82047ed1a79eaebe0b9dbbd287af66 Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Tue, 12 Nov 2024 16:26:09 +0800 Subject: [PATCH 1/3] feat(TagDigest): refactor TagDigest.Feed component --- src/common/enums/test.ts | 2 +- src/components/TagDigest/Feed/Feed.test.tsx | 25 +--- src/components/TagDigest/Feed/index.tsx | 114 +++--------------- .../TagDigest/Feed/styles.module.css | 56 ++------- 4 files changed, 32 insertions(+), 165 deletions(-) diff --git a/src/common/enums/test.ts b/src/common/enums/test.ts index 1dc25f7832..dde26d8eb6 100644 --- a/src/common/enums/test.ts +++ b/src/common/enums/test.ts @@ -32,7 +32,7 @@ export enum TEST_ID { DIGEST_USER_VERBOSE = 'digest/user/verbose', DIGEST_TAG_CONCISE = 'digest/tag/concise', DIGEST_TAG_FEED = 'digest/tag/feed', - DIGEST_TAG_FEED_COVER = 'digest/tag/feed/cover', + DIGEST_TAG_FEED_NUM_ARTICLES = 'digest/tag/feed/num-articles', DIGEST_TAG_RICH = 'digest/tag/rich', DIGEST_TAG_SIDEBAR = 'digest/tag/sidebar', DIGRET_CIRCLE_PLAIN = 'digest/circle/plain', diff --git a/src/components/TagDigest/Feed/Feed.test.tsx b/src/components/TagDigest/Feed/Feed.test.tsx index 764610a36e..8de9753b56 100644 --- a/src/components/TagDigest/Feed/Feed.test.tsx +++ b/src/components/TagDigest/Feed/Feed.test.tsx @@ -2,6 +2,7 @@ import mockRouter from 'next-router-mock' import { describe, expect, it } from 'vitest' import { TEST_ID } from '~/common/enums' +import { abbr } from '~/common/utils/number/abbr' import { render, screen } from '~/common/utils/test' import { TagDigest } from '~/components' import { MOCK_TAG } from '~/stories/mocks' @@ -18,24 +19,10 @@ describe('', () => { const $name = screen.getAllByText(MOCK_TAG.content)[0] // duplicated items in the mock expect($name).toBeInTheDocument() - const $articleCount = screen.getByText(MOCK_TAG.numArticles) - expect($articleCount).toBeInTheDocument() - - const $authorCount = screen.getByText(MOCK_TAG.numAuthors) - expect($authorCount).toBeInTheDocument() - - const $cover = screen.getByTestId(TEST_ID.DIGEST_TAG_FEED_COVER) - expect($cover).toBeInTheDocument() - mockRouter.push('/') - $cover.click() - expect(mockRouter.asPath).toContain(MOCK_TAG.slug) - - const $articleList = screen.getByRole('list') - expect($articleList).toBeInTheDocument() - const $articleListItems = screen.getAllByRole('listitem') - expect($articleListItems.length).toBe(4) - mockRouter.push('/') - $articleListItems[0].click() - expect(mockRouter.asPath).toContain(MOCK_TAG.articles.edges[0].node.slug) + const $numArticles = screen.getByTestId( + TEST_ID.DIGEST_TAG_FEED_NUM_ARTICLES + ) + expect($numArticles).toBeInTheDocument() + expect($numArticles).toHaveTextContent(`(${abbr(MOCK_TAG.numArticles, 2)})`) }) }) diff --git a/src/components/TagDigest/Feed/index.tsx b/src/components/TagDigest/Feed/index.tsx index cd7468068e..93c3a771a2 100644 --- a/src/components/TagDigest/Feed/index.tsx +++ b/src/components/TagDigest/Feed/index.tsx @@ -1,19 +1,10 @@ import gql from 'graphql-tag' import Link from 'next/link' -import { ReactComponent as IconDraft } from '@/public/static/icons/24px/draft.svg' -import { ReactComponent as IconUser } from '@/public/static/icons/24px/user.svg' -import IMAGE_TAG_COVER from '@/public/static/images/tag-cover.png' import { TEST_ID } from '~/common/enums' -import { captureClicks, numAbbr, toPath } from '~/common/utils' -import { - Card, - CardProps, - Icon, - PlainTag, - ResponsiveImage, - TextIcon, -} from '~/components' +import { toPath } from '~/common/utils' +import { abbr } from '~/common/utils/number/abbr' +import { CardProps } from '~/components' import { TagDigestFeedTagFragment } from '~/gql/graphql' import styles from './styles.module.css' @@ -27,24 +18,8 @@ const fragments = { fragment TagDigestFeedTag on Tag { id content - cover numArticles numAuthors - articles(input: { first: 3 }) { - edges { - cursor - node { - id - title - slug - shortHash - author { - id - userName - } - } - } - } } `, } @@ -55,79 +30,20 @@ const Feed = ({ tag, ...cardProps }: TagDigestFeedProps) => { tag, }) - const articles = tag.articles.edges + const numArticles = abbr(tag.numArticles, 2) return ( - -
-
- - -
- } - size={12} - spacing={4} - color="greyDark" - > - {numAbbr(tag.numAuthors)} - - - } - size={12} - spacing={4} - color="greyDark" - > - {numAbbr(tag.numArticles)} - -
-
- -
- - -
- - - - - -
-
-
- + + + {tag.content}  + + ({numArticles}) + + + ) } diff --git a/src/components/TagDigest/Feed/styles.module.css b/src/components/TagDigest/Feed/styles.module.css index cac15cbde4..7ba1341211 100644 --- a/src/components/TagDigest/Feed/styles.module.css +++ b/src/components/TagDigest/Feed/styles.module.css @@ -1,53 +1,17 @@ -.container { - position: relative; -} - -.header { - @mixin flex-center-space-between; -} - -.nums { - display: inline-flex; - flex-shrink: 0; +.tag { + @mixin transition; - & > * { - margin-left: var(--sp8); - } -} + display: flex; -.content { - @mixin flex-start-space-between; - - margin-top: var(--sp8); -} - -.cover { - position: relative; - display: inline-flex; - flex-shrink: 0; - width: 4.5rem; - height: 4.5rem; - margin-left: var(--sp8); - - & img { - @mixin object-fit-cover; - - background-color: var(--color-grey-lighter); - border-radius: 0.5rem; - } -} - -.articles { - & .title { + & .name { @mixin line-clamp; - font-size: var(--text13); - line-height: 1.5rem; - color: var(--color-grey-dark); + font-size: var(--text16); + line-height: 1.5rem; /* 24px */ + } - &:hover, - &:focus { - color: var(--color-black); - } + & .nums { + color: var(--color-grey); + word-break: keep-all; } } From 843247fdc6f4d0dc1eff68d161371495da795462 Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Wed, 13 Nov 2024 14:28:00 +0800 Subject: [PATCH 2/3] feat(TagDigest): update Feed stories --- src/stories/components/TagDigest/Feed.stories.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/stories/components/TagDigest/Feed.stories.tsx b/src/stories/components/TagDigest/Feed.stories.tsx index e18bc99a60..5596f784bc 100644 --- a/src/stories/components/TagDigest/Feed.stories.tsx +++ b/src/stories/components/TagDigest/Feed.stories.tsx @@ -21,3 +21,12 @@ export const Default = Template.bind({}) Default.args = { tag: MOCK_TAG as any, } + +export const LongName = Template.bind({}) +LongName.args = { + tag: { + ...MOCK_TAG, + content: + 'Matters.Town 是立足去中心化生態建立的，一個代碼開源、創作者自治的寫作社區。', + } as any, +} From 85008e18e67e7c9b22097c3121e9a34fe686e0b6 Mon Sep 17 00:00:00 2001 From: Kechicode <186776112+Kechicode@users.noreply.github.com> Date: Wed, 13 Nov 2024 16:31:17 +0800 Subject: [PATCH 3/3] fix(TagDigest): remove unused props --- src/components/TagDigest/Feed/index.tsx | 8 ++++---- src/views/Tags/Feed.tsx | 9 +-------- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/TagDigest/Feed/index.tsx b/src/components/TagDigest/Feed/index.tsx index 93c3a771a2..ddfc6af9c3 100644 --- a/src/components/TagDigest/Feed/index.tsx +++ b/src/components/TagDigest/Feed/index.tsx @@ -4,14 +4,14 @@ import Link from 'next/link' import { TEST_ID } from '~/common/enums' import { toPath } from '~/common/utils' import { abbr } from '~/common/utils/number/abbr' -import { CardProps } from '~/components' import { TagDigestFeedTagFragment } from '~/gql/graphql' import styles from './styles.module.css' export type TagDigestFeedProps = { tag: TagDigestFeedTagFragment -} & CardProps + onClick?: () => void +} const fragments = { tag: gql` @@ -24,7 +24,7 @@ const fragments = { `, } -const Feed = ({ tag, ...cardProps }: TagDigestFeedProps) => { +const Feed = ({ tag, onClick }: TagDigestFeedProps) => { const path = toPath({ page: 'tagDetail', tag, @@ -33,7 +33,7 @@ const Feed = ({ tag, ...cardProps }: TagDigestFeedProps) => { const numArticles = abbr(tag.numArticles, 2) return ( - + {tag.content}  {
  • analytics.trackEvent('click_feed', { type: trackingType,