refactor: article list/viewer upvote action (#1167)

* refactor(article-list): handle upvote action on post-list & re-org

* refactor(article-viewer): re-org with real data

* refactor(article-viewer): upvote, viewer workflow, re-org

* refactor(utils): macros re-org & doc update

* style(editor): editor delete action adjust

* refactor(upvote): enhance latestUser in upvote actions

* refactor(upvote): enhance latestUser in viewer

* chore(clean-up): unused container & code

Author: mydearxym

package-lock.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",

package.json

@@ -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/ArticleCard/Footer.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/ArticleReadLabel/index.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/RealAvatar.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/index.tsx

@@ -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/index.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/AvatarsRow/styles/real_avatar.ts

@@ -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/Cards/UserCard.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