Feat/update tag

lang/default.json

@@ -2858,10 +2858,6 @@
     "defaultMessage": "Pass and ask me next time",
     "description": "src/components/Forms/PaymentForm/BindWallet/index.tsx"
   },
-  "mzCz0Z": {
-    "defaultMessage": "Tags",
-    "description": "src/views/Tags/index.tsx"
-  },
   "n/w6lW": {
     "defaultMessage": "Most Supporters",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"

lang/en.json

@@ -2858,10 +2858,6 @@
     "defaultMessage": "Pass and ask me next time",
     "description": "src/components/Forms/PaymentForm/BindWallet/index.tsx"
   },
-  "mzCz0Z": {
-    "defaultMessage": "Tags",
-    "description": "src/views/Tags/index.tsx"
-  },
   "n/w6lW": {
     "defaultMessage": "Most Supporters",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"

lang/zh-Hans.json

@@ -2694,7 +2694,7 @@
     "description": "src/views/Me/Settings/Misc/LikerID.tsx"
   },
   "kc79d3": {
-    "defaultMessage": "找你想看的"
+    "defaultMessage": "热门标签"
   },
   "kkZioy": {
     "defaultMessage": "确认移出",
@@ -2858,10 +2858,6 @@
     "defaultMessage": "先不要，下次再说",
     "description": "src/components/Forms/PaymentForm/BindWallet/index.tsx"
   },
-  "mzCz0Z": {
-    "defaultMessage": "全部标签",
-    "description": "src/views/Tags/index.tsx"
-  },
   "n/w6lW": {
     "defaultMessage": "最多支持",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"

lang/zh-Hant.json

@@ -2694,7 +2694,7 @@
     "description": "src/views/Me/Settings/Misc/LikerID.tsx"
   },
   "kc79d3": {
-    "defaultMessage": "找你想看的"
+    "defaultMessage": "熱門標籤"
   },
   "kkZioy": {
     "defaultMessage": "確認移出",
@@ -2858,10 +2858,6 @@
     "defaultMessage": "先不要，下次再說",
     "description": "src/components/Forms/PaymentForm/BindWallet/index.tsx"
   },
-  "mzCz0Z": {
-    "defaultMessage": "全部標籤",
-    "description": "src/views/Tags/index.tsx"
-  },
   "n/w6lW": {
     "defaultMessage": "最多支持",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"

src/components/Buttons/Shuffle.tsx

@@ -18,13 +18,13 @@ export const ShuffleButton: React.FC<ShuffleButtonProps> = ({
   <Button
     size={[null, '1.25rem']}
     spacing={[0, 8]}
-    bgActiveColor="greyLighter"
+    textColor="greyDarker"
+    textActiveColor="black"
     {...props}
   >
     <TextIcon
-      icon={<Icon icon={IconReset} size={12} />}
-      color={color || 'grey'}
-      size={12}
+      icon={<Icon icon={IconReset} size={20} />}
+      size={14}
       weight="medium"
     >
       <FormattedMessage defaultMessage="Shuffle" id="Pp/0po" />

src/components/Slides/styles.module.css

@@ -1,5 +1,5 @@
 .slides {
-  padding: var(--sp16) 0;
+  padding: var(--sp24) 0 var(--sp8);
 
   & ul {
     @mixin hide-scrollbar;

src/components/TagDigest/Concise/index.tsx

@@ -11,8 +11,12 @@ import styles from './styles.module.css'
 
 export type TagDigestConciseTagProps = {
   tag: TagDigestConciseTagFragment
-  textSize?: 14 | 15
+  textSize?: 14 | 15 | 16
+  textWeight?: 'normal' | 'medium'
+  iconSize?: 20
   showArticlesNum?: boolean
+  textLineClamp?: boolean
+  onClick?: () => void
 }
 
 const fragments = {
@@ -28,21 +32,30 @@ const fragments = {
 const Concise = ({
   tag,
   textSize = 15,
+  textWeight = 'medium',
   showArticlesNum,
+  iconSize,
+  textLineClamp,
+  onClick,
 }: TagDigestConciseTagProps) => {
   const path = toPath({
     page: 'tagDetail',
     tag,
   })
   return (
-    <LinkWrapper {...path} testId={TEST_ID.DIGEST_TAG_CONCISE}>
+    <LinkWrapper
+      {...path}
+      testId={TEST_ID.DIGEST_TAG_CONCISE}
+      onClick={onClick}
+    >
       <section className={styles.content}>
         <TextIcon
-          icon={<Icon icon={IconHashTag} color="grey" />}
+          icon={<Icon icon={IconHashTag} color="grey" size={iconSize} />}
           color="black"
           size={textSize}
           spacing={4}
-          weight="medium"
+          weight={textWeight}
+          textLineClamp={textLineClamp}
         >
           {tag.content}
         </TextIcon>

src/components/TagDigest/Feed/index.tsx

@@ -29,7 +29,7 @@ const Feed = ({ tag, onClick }: TagDigestFeedProps) => {
     tag,
   })
 
-  const numArticles = abbr(tag.numArticles, 2)
+  const numArticles = abbr(tag.numArticles, 1)
 
   return (
     <Link {...path} legacyBehavior onClick={onClick}>

src/components/TextIcon/index.tsx

@@ -34,6 +34,8 @@ export interface TextIconProps {
   decoration?: 'underline'
 
   allowUserSelect?: boolean
+
+  textLineClamp?: boolean
 }
 
 /**
@@ -61,6 +63,7 @@ export const TextIcon: React.FC<React.PropsWithChildren<TextIconProps>> = ({
   weight,
   placement = 'right',
   decoration,
+  textLineClamp,
 
   allowUserSelect = false,
 
@@ -76,6 +79,7 @@ export const TextIcon: React.FC<React.PropsWithChildren<TextIconProps>> = ({
     [styles[`text${capitalizeFirstLetter(placement)}`]]: true,
     [decoration ? styles[`text${capitalizeFirstLetter(decoration)}`] : '']:
       true,
+    [textLineClamp ? styles.textLineClamp : '']: textLineClamp,
     [weight ? styles[`weight${capitalizeFirstLetter(weight)}`] : '']: !!weight,
     [styles.noneSelect]: !allowUserSelect,
     [styles.hasIcon]: !!icon,

src/components/TextIcon/styles.module.css

@@ -225,3 +225,11 @@
 .textUnderline {
   text-decoration: underline;
 }
+
+.textLineClamp {
+  & .text {
+    @mixin line-clamp;
+
+    display: -webkit-inline-box;
+  }
+}

src/views/Home/Feed/Authors/index.tsx

@@ -2,9 +2,7 @@ import { useQuery } from '@apollo/react-hooks'
 import _chunk from 'lodash/chunk'
 import _random from 'lodash/random'
 import { useContext, useEffect } from 'react'
-import { FormattedMessage } from 'react-intl'
 
-import { PATHS } from '~/common/enums'
 import { analytics } from '~/common/utils'
 import {
   Media,
@@ -15,7 +13,6 @@ import {
   usePublicQuery,
   UserDigest,
   ViewerContext,
-  ViewMoreCard,
 } from '~/components'
 import FETCH_RECORD from '~/components/GQL/queries/lastFetchRandom'
 import { FeedAuthorsQuery, LastFetchRandomQuery } from '~/gql/graphql'
@@ -118,7 +115,7 @@ const Authors = () => {
                     key={node.id}
                     user={node}
                     is="link"
-                    spacing={[12, 0]}
+                    spacing={[16, 0]}
                     bgColor="none"
                     hasFollow={false}
                     hasState={false}
@@ -136,23 +133,6 @@ const Authors = () => {
             </Slides.Item>
           ))}
       </Slides>
-
-      <Media lessThan="md">
-        <section className={styles.backToAll}>
-          <ViewMoreCard
-            spacing={[12, 12]}
-            href={PATHS.AUTHORS}
-            textIconProps={{
-              size: 16,
-              weight: 'semibold',
-              spacing: 4,
-            }}
-            textAlign="center"
-          >
-            <FormattedMessage defaultMessage="View All" id="wbcwKd" />
-          </ViewMoreCard>
-        </section>
-      </Media>
     </section>
   )
 }

src/views/Home/Feed/Authors/styles.module.css

@@ -1,7 +1,6 @@
 .authors {
   @mixin border-bottom-grey;
 
-  padding-bottom: var(--sp32);
   border-bottom-style: dashed;
 
   @media (--sm-up) {

src/views/Home/Feed/Tags/index.tsx

@@ -2,20 +2,13 @@ import { useQuery } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 import _chunk from 'lodash/chunk'
 import { useContext } from 'react'
-import { FormattedMessage } from 'react-intl'
 
-import { PATHS } from '~/common/enums'
 import { analytics } from '~/common/utils'
 import {
-  Media,
   QueryError,
-  ShuffleButton,
-  Slides,
-  SpinnerBlock,
   TagDigest,
   usePublicQuery,
   ViewerContext,
-  ViewMoreCard,
 } from '~/components'
 import FETCH_RECORD from '~/components/GQL/queries/lastFetchRandom'
 import { FeedTagsPublicQuery, LastFetchRandomQuery } from '~/gql/graphql'
@@ -49,16 +42,15 @@ const FEED_TAGS = gql`
 const TagsFeed = () => {
   const viewer = useContext(ViewerContext)
 
-  const { data: lastFetchRandom, client } = useQuery<LastFetchRandomQuery>(
+  const { data: lastFetchRandom } = useQuery<LastFetchRandomQuery>(
     FETCH_RECORD,
     { variables: { id: 'local' } }
   )
   const lastRandom = lastFetchRandom?.lastFetchRandom.feedTags
 
   const perPage = 6
-  const perColumn = 3
-  const randomMaxSize = 50
-  const { data, loading, error, refetch } = usePublicQuery<FeedTagsPublicQuery>(
+  const perColumn = 2
+  const { data, error } = usePublicQuery<FeedTagsPublicQuery>(
     FEED_TAGS,
     {
       notifyOnNetworkStatusChange: true,
@@ -68,19 +60,6 @@ const TagsFeed = () => {
   )
   const edges = data?.viewer?.recommendation.tags.edges
 
-  const shuffle = () => {
-    const size = Math.round(
-      (data?.viewer?.recommendation.tags.totalCount || randomMaxSize) / perPage
-    )
-    const random = Math.floor(Math.min(randomMaxSize, size) * Math.random()) // in range [0..50) not including 50
-    refetch({ random })
-
-    client.writeData({
-      id: 'LastFetchRandom:local',
-      data: { feedTags: random },
-    })
-  }
-
   if (error) {
     return <QueryError error={error} />
   }
@@ -89,73 +68,30 @@ const TagsFeed = () => {
     return null
   }
 
-  const SlideHeader = (
-    <>
-      <Media lessThan="md">
-        <SectionHeader
-          type="tags"
-          rightButton={<ShuffleButton onClick={shuffle} />}
-          viewAll={false}
-        />
-      </Media>
-      <Media greaterThanOrEqual="md">
-        <SectionHeader
-          type="tags"
-          rightButton={<ShuffleButton onClick={shuffle} />}
-          viewAll={true}
-        />
-      </Media>
-    </>
-  )
-
   return (
     <section className={styles.tags}>
-      <Slides header={SlideHeader}>
-        {loading && (
-          <Slides.Item>
-            <SpinnerBlock />
-          </Slides.Item>
-        )}
-
-        {!loading &&
-          _chunk(edges, perColumn).map((chunks, edgeIndex) => (
-            <Slides.Item size="md" key={edgeIndex}>
-              <section>
-                {chunks.map(({ node, cursor }, nodeIndex) => (
-                  <TagDigest.Sidebar
-                    key={node.id}
-                    tag={node}
-                    spacing={[12, 0]}
-                    onClick={() =>
-                      analytics.trackEvent('click_feed', {
-                        type: 'tags',
-                        contentType: 'tag',
-                        location: (edgeIndex + 1) * (nodeIndex + 1) - 1,
-                        id: node.id,
-                      })
-                    }
-                  />
-                ))}
-              </section>
-            </Slides.Item>
+      <SectionHeader type="tags" viewAll={true} />
+      {_chunk(edges, perColumn).map((chunks, edgeIndex) => (
+        <section key={edgeIndex} className={styles.tagSection}>
+          {chunks.map(({ node, cursor }, nodeIndex) => (
+            <TagDigest.Concise
+              key={node.id}
+              tag={node}
+              iconSize={20}
+              textSize={16}
+              textLineClamp={true}
+              onClick={() =>
+                analytics.trackEvent('click_feed', {
+                  type: 'tags',
+                  contentType: 'tag',
+                  location: (edgeIndex + 1) * (nodeIndex + 1) - 1,
+                  id: node.id,
+                })
+              }
+            />
           ))}
-      </Slides>
-      <Media lessThan="md">
-        <section className={styles.backToAll}>
-          <ViewMoreCard
-            spacing={[12, 12]}
-            href={PATHS.TAGS}
-            textIconProps={{
-              size: 16,
-              weight: 'semibold',
-              spacing: 4,
-            }}
-            textAlign="center"
-          >
-            <FormattedMessage defaultMessage="View All" id="wbcwKd" />
-          </ViewMoreCard>
         </section>
-      </Media>
+      ))}
     </section>
   )
 }