Merge pull request #4963 from thematters/fix/product-test-feedback

fix product test feedback

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"

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": {
@@ -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"

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"

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"

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(' ')}`
   }
 }
 

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<ToggleBookmarkTagMutation>(
     TOGGLE_BOOKMARK_TAG,
     {
@@ -35,6 +38,11 @@ const Bookmark = ({ tag }: BookmarkProps) => {
               },
             }
           : undefined,
+      refetchQueries: [
+        {
+          query: ME_BOOKMARK_TAGS_FEED,
+        },
+      ],
     }
   )
 

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 = () => (
+  <Empty
+    icon={<Icon icon={IconSave} size={64} />}
+    description={
+      <>
+        <FormattedMessage id="iIitRg" defaultMessage="Tag not bookmarked yet" />
+      </>
+    }
+  />
+)

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'

src/components/Slides/index.tsx

@@ -12,7 +12,7 @@ interface SlidesProps {
 }
 
 interface SlideItemProps {
-  size?: 'sm' | 'md'
+  size?: 'xs' | 'sm' | 'md'
   onClick?: () => any
 }
 

src/components/Slides/styles.module.css

@@ -48,6 +48,10 @@
   background: var(--color-grey-lighter);
 }
 
+.sizeXs {
+  width: 15rem;
+}
+
 .sizeSm {
   width: 18rem;
 }

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);
   }
 

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 {

src/views/Me/Bookmarks/BookmarksTags.tsx

@@ -5,7 +5,7 @@ import { FormattedMessage, useIntl } from 'react-intl'
 
 import { mergeConnections } from '~/common/utils'
 import {
-  EmptyBookmark,
+  EmptyTagBookmark,
   Head,
   InfiniteScroll,
   Layout,
@@ -18,7 +18,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
@@ -57,7 +57,15 @@ const BaseMeBookmarksTags = () => {
   const { edges, pageInfo } = data?.viewer?.bookmarkedTags || {}
 
   if (!edges || edges.length <= 0 || !pageInfo) {
-    return <EmptyBookmark />
+    return <EmptyTagBookmark />
+  }
+
+  const hasFollowedTags = edges.some(
+    ({ node }) => node.__typename === 'Tag' && node.isFollower
+  )
+
+  if (!hasFollowedTags) {
+    return <EmptyTagBookmark />
   }
 
   const loadMore = () =>

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<RecommendedAuthorsProps> = ({
   tagId,
   inSidebar,
 }) => {
+  const perColumn = 3
   const { data } = usePublicQuery<TagDetailRecommendedAuthorsQuery>(
     RECOMMENDED_AUTHORS,
     {
@@ -59,25 +60,49 @@ const RecommendedAuthors: React.FC<RecommendedAuthorsProps> = ({
     [styles.inSidebar]: inSidebar,
   })
 
+  if (inSidebar) {
+    return (
+      <section className={recommendedAuthorsClasses}>
+        <RecommendedAuthorsHeader />
+        <section className={styles.users}>
+          <List hasBorder={false}>
+            {edges.map(({ node, cursor }, i) => (
+              <List.Item key={node.id}>
+                <UserDigest.Rich
+                  user={node}
+                  spacing={[0, 0]}
+                  bgColor="none"
+                  onClick={() => trackRecommendedAuthors(i, node.id)}
+                  hasFollow={false}
+                  hasState={false}
+                />
+              </List.Item>
+            ))}
+          </List>
+        </section>
+      </section>
+    )
+  }
+
   return (
     <section className={recommendedAuthorsClasses}>
-      <RecommendedAuthorsHeader />
-      <section className={styles.users}>
-        <List hasBorder={false}>
-          {edges.map(({ node, cursor }, i) => (
-            <List.Item key={node.id}>
+      <Slides header={<RecommendedAuthorsHeader />}>
+        {_chunk(edges, perColumn).map((chunks, i) => (
+          <Slides.Item size="xs" key={i}>
+            {chunks.map(({ node, cursor }) => (
               <UserDigest.Rich
+                key={node.id}
                 user={node}
-                spacing={[0, 0]}
+                spacing={[12, 0]}
                 bgColor="none"
                 onClick={() => trackRecommendedAuthors(i, node.id)}
                 hasFollow={false}
                 hasState={false}
               />
-            </List.Item>
-          ))}
-        </List>
-      </section>
+            ))}
+          </Slides.Item>
+        ))}
+      </Slides>
     </section>
   )
 }

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;

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<FeedQuery>(query)
+  const { data, loading, error, fetchMore, client } =
+    usePublicQuery<FeedQuery>(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 <SpinnerBlock />

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
+      }
+    }
+  }
+`