refactor: article list/viewer upvote action

package.json

@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.13.14",
-    "@groupher/react-editor": "^1.1.25",
+    "@groupher/react-editor": "^1.1.26",
     "@next/bundle-analyzer": "^9.4.4",
     "@sentry/browser": "5.17.0",
     "@sentry/node": "5.17.0",

src/components/ArticleCard/Footer.tsx

@@ -1,7 +1,8 @@
 import { FC, memo } from 'react'
 import TimeAgo from 'timeago-react'
 
-import type { TJob } from '@/spec'
+import type { TArticle } from '@/spec'
+import { upvoteOnArticleList } from '@/utils/helper'
 import { ICON } from '@/config'
 import Upvote from '@/components/Upvote'
 import DotDivider from '@/components/DotDivider'
@@ -10,11 +11,18 @@ import IconText from '@/components/IconText'
 import { Wrapper, PublishWrapper, Bottom } from './styles/footer'
 
 type TProps = {
-  data: TJob
+  data: TArticle
 }
 
 const Footer: FC<TProps> = ({ data }) => {
-  const { author, insertedAt, commentsCount, upvotesCount, meta } = data
+  const {
+    author,
+    insertedAt,
+    commentsCount,
+    upvotesCount,
+    viewerHasUpvoted,
+    meta,
+  } = data
 
   return (
     <Wrapper>
@@ -23,7 +31,14 @@ const Footer: FC<TProps> = ({ data }) => {
         <TimeAgo datetime={insertedAt} locale="zh_CN" />
       </PublishWrapper>
       <Bottom>
-        <Upvote count={upvotesCount} avatarList={meta.latestUpvotedUsers} />
+        <Upvote
+          count={upvotesCount}
+          avatarList={meta.latestUpvotedUsers}
+          viewerHasUpvoted={viewerHasUpvoted}
+          onAction={(viewerHasUpvoted) =>
+            upvoteOnArticleList(data, viewerHasUpvoted)
+          }
+        />
         <IconText iconSrc={`${ICON}/article/comment.svg`} size="medium">
           {commentsCount}
         </IconText>

src/components/ArticleReadLabel/index.tsx

@@ -29,7 +29,7 @@ const ArticleReadLabel: FC<TProps> = ({ entry, top = 24, left = -30 }) => {
   if (entry.pin) return null
   // return <ReadedLabel top={top} left={left} />
   if (!isLogin) return null
-  if (markViewed && viewerHasViewed) {
+  if (markViewed && !viewerHasViewed) {
     return <ReadedLabel top={top} left={left} />
   }
 

src/components/AvatarsRow/RealAvatar.tsx

@@ -18,7 +18,6 @@ import {
 type TProps = {
   user?: TUser
   size?: TAvatarSize
-  scrollPosition?: any
   popCardPlacement?: 'top' | 'bottom'
   onUserSelect: (user: TUser) => void
 }
@@ -36,6 +35,7 @@ const RealAvatar: FC<TProps> = ({
         delay={0}
         contentHeight={getAvatarSize(size, 'number') as string}
         placement={popCardPlacement}
+        interactive={false}
       >
         <InnerWrapper>
           <AvatarsImg

src/components/AvatarsRow/index.tsx

@@ -91,7 +91,7 @@ const AvatarsRow: FC<TProps> = ({
   onTotalSelect = log,
   showMore = true,
   showTotalNumber = false,
-  reverse = true,
+  reverse = false,
   // see https://github.com/Aljullu/react-lazy-load-image-component/issues/42
   scrollPosition = null,
   popCardPlacement = 'bottom',
@@ -103,7 +103,7 @@ const AvatarsRow: FC<TProps> = ({
   const totalCount = total || users.length
 
   users = filter(validUser, getUniqueArray(users, 'login'))
-  const sortedUsers = reverse ? users : reverseFn(users)
+  const sortedUsers = reverse ? reverseFn(users) : users
 
   return (
     <Wrapper total={totalCount}>

src/components/AvatarsRow/styles/index.ts

@@ -18,7 +18,6 @@ export const Wrapper = styled.ul<{ total: number }>`
 `
 export const AvatarsWrapper = styled.div`
   ${css.flex()}
-  flex-direction: row-reverse;
 `
 export const TotalOneOffset = styled.span`
   margin-right: 10px;

src/components/AvatarsRow/styles/real_avatar.ts

@@ -15,7 +15,7 @@ export const Wrapper = styled.li<TWrapper>`
   padding: 0px 0px 0px 0px;
   position: relative;
   width: ${({ size }) => getLiSize(size)};
-  z-index: 2;
+  /* z-index: 2; */
 
   &:hover {
     z-index: 3;

src/components/Cards/UserCard.tsx

@@ -31,7 +31,7 @@ const UserCard: FC<TProps> = ({ item }) => {
         <Avatar src={avatar} />
         <Info>
           <Title href={`user/${login}`}>
-            <Nickname>{nickname}</Nickname>
+            <Nickname>{cutRest(nickname, 12)}</Nickname>
             <Login>{login}</Login>
           </Title>
           {/* <ShortBio>{bio || '--'}</ShortBio> */}

src/components/EmotionSelector/SelectedEmotions/EmotionUnit.tsx

@@ -33,14 +33,8 @@ const EmotionUnit: FC<TProps> = ({ item, onAction }) => {
 
   return (
     <Tooltip
-      content={
-        <UsersPanel
-          name={name}
-          count={count}
-          users={users}
-          hasEmotioned={hasEmotioned}
-        />
-      }
+      content={<UsersPanel name={name} count={count} users={users} />}
+      interactive={false}
       noPadding
     >
       <Wrapper

src/components/EmotionSelector/SelectedEmotions/UsersPanel.tsx

@@ -3,9 +3,10 @@
  */
 
 import { FC, memo } from 'react'
-import { buildLog } from '@/utils/logger'
 
 import type { TSimpleUser, TEmotionType } from '@/spec'
+import { buildLog } from '@/utils/logger'
+import { cutRest } from '@/utils/helper'
 
 import EmotionIcon from './EmotionIcon'
 
@@ -23,18 +24,17 @@ type TProps = {
   name: TEmotionType
   count: number
   users: TSimpleUser[]
-  hasEmotioned: boolean
 }
 
-const UsersPanel: FC<TProps> = ({ name, count, users, hasEmotioned }) => {
+const UsersPanel: FC<TProps> = ({ name, count, users }) => {
   const showUnit = users.length > count
 
   return (
     <Wrapper>
       <UsersWrapper>
         {users.slice(0, 5).map((u, index) => (
           <Username key={u.login}>
-            {u.nickname}
+            {cutRest(u.nickname, 12)}
             {users.length - 1 !== index ? ',' : ''}
           </Username>
         ))}

src/components/EmotionSelector/SelectedEmotions/index.tsx

@@ -29,4 +29,4 @@ const SelectedEmotions: FC<TProps> = ({ emotions, onAction }) => {
   )
 }
 
-export default memo(SelectedEmotions)
+export default SelectedEmotions

src/components/EmotionSelector/index.tsx

@@ -10,7 +10,7 @@ import IconButton from '@/components/Buttons/IconButton'
 import Tooltip from '@/components/Tooltip'
 
 import { emotionsCoverter } from './helper'
-import SelectedEmotions from './SelectedEmotions'
+import SelectedEmotions from './SelectedEmotions/index'
 import Panel from './Panel'
 import { Wrapper } from './styles'
 

src/components/PostItem/DesktopView/index.tsx

@@ -1,10 +1,12 @@
 import { FC, Fragment, memo } from 'react'
 
-import type { TPost, TUser, TAccount } from '@/spec'
+import type { TPost } from '@/spec'
 import { UPVOTE_LAYOUT } from '@/constant'
 
+import { upvoteOnArticleList } from '@/utils/helper'
 import TheAvatar from '@/components/TheAvatar'
 import Upvote from '@/components/Upvote'
+
 import { ArticleReadLabel, ArticlePinLabel } from '@/components/dynamic'
 
 import Header from './Header'
@@ -13,11 +15,10 @@ import Body from './Body'
 import { AvatarWrapper, UpvoteWrapper, Main } from '../styles/desktop_view'
 
 type TProps = {
-  active?: TPost | null
   entry: TPost
 
-  onUserSelect?: (obj: TUser) => void
-  onAuthorSelect?: (obj: TAccount) => void
+  // onUserSelect?: (obj: TUser) => void
+  // onAuthorSelect?: (obj: TAccount) => void
 }
 
 const DigestView: FC<TProps> = ({ entry }) => {
@@ -28,7 +29,14 @@ const DigestView: FC<TProps> = ({ entry }) => {
       <AvatarWrapper>
         <TheAvatar user={entry.author} />
         <UpvoteWrapper>
-          <Upvote type={UPVOTE_LAYOUT.POST_LIST} count={entry.upvotesCount} />
+          <Upvote
+            type={UPVOTE_LAYOUT.POST_LIST}
+            count={entry.upvotesCount}
+            viewerHasUpvoted={entry.viewerHasUpvoted}
+            onAction={(viewerHasUpvoted) =>
+              upvoteOnArticleList(entry, viewerHasUpvoted)
+            }
+          />
         </UpvoteWrapper>
       </AvatarWrapper>
       <Main>

src/components/PostItem/index.tsx

@@ -5,7 +5,6 @@
  */
 
 import { FC, memo } from 'react'
-import dynamic from 'next/dynamic'
 
 import type { TPost, TUser, TAccount, TC11N } from '@/spec'
 import { buildLog } from '@/utils/logger'
@@ -39,11 +38,7 @@ const PostItem: FC<TProps> = ({
   return (
     <Wrapper entry={entry} c11n={c11n}>
       {!isMobile ? (
-        <DesktopView
-          entry={entry}
-          onUserSelect={onUserSelect}
-          onAuthorSelect={onAuthorSelect}
-        />
+        <DesktopView entry={entry} />
       ) : (
         <MobileView entry={entry} onAuthorSelect={onAuthorSelect} />
       )}

src/components/Tooltip/RealTooltip.tsx

@@ -58,6 +58,7 @@ type TProps = {
    * 暂时没有精力看 Tippy 的具体实现，小心使用。
    */
   forceZIndex?: boolean
+  interactive?: boolean
 
   onShow?: () => void
   onHide?: () => void
@@ -67,6 +68,7 @@ type TProps = {
 const Tooltip: FC<TProps> = ({
   children,
   noPadding = false,
+  interactive = true,
   onHide,
   onShow,
   placement = 'top',
@@ -151,7 +153,7 @@ const Tooltip: FC<TProps> = ({
     duration,
     trigger,
     // see https://github.com/atomiks/tippyjs/issues/751#issuecomment-611979594 for detail
-    interactive: true,
+    interactive,
 
     onHide: () => {
       setInstance(null)

src/components/Tooltip/index.tsx

@@ -54,6 +54,7 @@ type TProps = {
    * 暂时没有精力看 Tippy 的具体实现，小心使用。
    */
   forceZIndex?: boolean
+  interactive?: boolean
 
   onShow?: () => void
   onHide?: () => void

src/components/Upvote/BlogListLayout.tsx

@@ -35,7 +35,7 @@ const Upvote: FC<TProps> = ({
         <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} />
       </UpWrapper>
       <CountWrapper>
-        <AnimatedCount count={count} />
+        <AnimatedCount count={count} active={viewerHasUpvoted} />
       </CountWrapper>
     </Wrapper>
   )