refactor(article-page): use common article & style adjust

src/components/ArticleBaseStats/index.tsx

@@ -0,0 +1,50 @@
+/*
+ *
+ * ArticleBaseStats
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import type { TArticle, TContainer } from '@/spec'
+import { ICON } from '@/config'
+import { buildLog, scrollToComments } from '@/utils'
+
+import { Space } from '@/components/Common'
+import {
+  Wrapper,
+  ViewsIcon,
+  CommentWrapper,
+  CommentIcon,
+  Count,
+  CommentCount,
+} from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ArticleBaseStats:index')
+
+type TProps = {
+  testid?: string
+  article: TArticle
+  container?: TContainer
+}
+
+const ArticleBaseStats: FC<TProps> = ({
+  testid = 'article-base-stats',
+  container = 'body',
+  article,
+}) => {
+  return (
+    <Wrapper testid={testid}>
+      <ViewsIcon src={`${ICON}/article/viewed.svg`} />
+      <Count>{article.views}</Count>
+      <Space left={14} />
+      <CommentWrapper onClick={() => scrollToComments(container)}>
+        <CommentIcon src={`${ICON}/article/comment.svg`} />
+        <CommentCount>{article.commentsCount}</CommentCount>
+      </CommentWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(ArticleBaseStats)

src/components/ArticleBaseStats/styles/index.ts

@@ -0,0 +1,42 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  ${css.flex('align-center')};
+`
+const Icon = styled(Img)`
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(14)};
+  transition: fill 0.25s;
+`
+export const ViewsIcon = styled(Icon)``
+
+export const CommentWrapper = styled.div`
+  ${css.flex('align-center')};
+`
+export const CommentIcon = styled(Icon)`
+  ${CommentWrapper}:hover & {
+    cursor: pointer;
+    fill: ${theme('thread.articleTitle')};
+  }
+
+  transition: fill 0.2s;
+`
+export const Count = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 15px;
+  margin-left: 5px;
+`
+export const CommentCount = styled(Count)`
+  ${CommentWrapper}:hover & {
+    cursor: pointer;
+    color: ${theme('thread.articleTitle')};
+  }
+  transition: color 0.2s;
+`

src/containers/content/PostContent/tests/index.test.ts → src/components/ArticleBaseStats/tests/index.test.ts

@@ -1,9 +1,9 @@
 // import React from 'react'
 // import { shallow } from 'enzyme'
 
-// import PostContent from '../index'
+// import ArticleBaseStats from '../index'
 
-describe('TODO <PostContent />', () => {
+describe('TODO <ArticleBaseStats />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(true)
   })

src/components/AvatarsRow/RealAvatar.tsx

@@ -24,7 +24,7 @@ const RealAvatar: FC<TProps> = ({ user, size, onUserSelect }) => {
   return (
     <Tooltip
       content={<UserPopContent>{user.nickname}</UserPopContent>}
-      delay={200}
+      delay={0}
       contentHeight={getAvatarSize(size, 'number') as string}
       showArrow={false}
       noPadding

src/components/AvatarsRow/styles/real_avatar.ts

@@ -7,8 +7,6 @@ import ImgFallback from '@/components/ImgFallback'
 import { getLiSize, getAvatarSize } from './metric'
 import type { TAvatarSize } from '../spec'
 
-import { AvatarsWrapper } from './index'
-
 // height: 49px;
 type TWrapper = { size: TAvatarSize }
 export const Wrapper = styled.li<TWrapper>`
@@ -19,16 +17,13 @@ export const Wrapper = styled.li<TWrapper>`
   z-index: 2;
   filter: grayscale(0.3);
 
-  ${AvatarsWrapper}:hover & {
-    margin: 0 5px;
-    transition-delay: 0.3s;
-  }
-
   &:hover {
     filter: grayscale(0);
+    z-index: 3;
+    transform: scale(1.2);
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 type TAvatarsImg = { size: string; onClick: () => void; scrollPosition: any }
 export const AvatarsImg = styled(Img)<TAvatarsImg>`

src/components/Buttons/styles/icon_button.ts

@@ -9,7 +9,6 @@ import type { TProps as TIconButtonProps } from '../IconButton'
 
 type TWrapper = Omit<TIconButtonProps, 'path'>
 export const Wrapper = styled.div<TWrapper>`
-  position: relative;
   ${css.flex('align-both')};
   width: ${({ size }) => `${size}px`};
   height: ${({ size }) => `${size}px`};
@@ -19,7 +18,6 @@ export const Wrapper = styled.div<TWrapper>`
   margin-top: ${({ mTop }) => `${mTop}px`};
   margin-bottom: ${({ mBottom }) => `${mBottom}px`};
 `
-
 type TIcon = { size: number; dimWhenIdle: boolean } & TSpace & TActive
 export const Icon = styled(Img)<TIcon>`
   fill: ${({ $active }) =>

src/components/Copyright/styles/readonly_panel.ts

@@ -7,7 +7,8 @@ import { css, theme } from '@/utils'
 export const Wrapper = styled.div`
   ${css.flexColumn()};
   width: 240px;
-  padding-left: 5px;
+  padding: 10px;
+  padding-left: 15px;
 `
 export const Header = styled.div`
   ${css.flex('align-center')};

src/components/ErrorPage/index.tsx

@@ -8,6 +8,7 @@ import { FC, memo } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 
+import type { TMetric } from '@/spec'
 import { METRIC } from '@/constant'
 import { ICON_BASE } from '@/config'
 import { buildLog } from '@/utils'
@@ -37,7 +38,7 @@ export type TProps = {
   errorCode?: number // 400 | 500 | 404
   target?: string
   testid?: string
-  metric?: string
+  metric?: TMetric
 }
 
 const ErrorPage: FC<TProps> = ({

src/components/Maybe/index.js → src/components/Maybe/index.tsx

@@ -1,11 +1,8 @@
 /*
- *
  * Maybe
- *
  */
 
-import React from 'react'
-import T from 'prop-types'
+import { FC, memo, ReactNode } from 'react'
 import { isEmpty } from 'ramda'
 
 import { buildLog } from '@/utils'
@@ -18,7 +15,13 @@ const MaybeLoading = ({ loading }) => {
   return <div>{loading}</div>
 }
 
-const Maybe = ({ children, test, loading }) => {
+type TProps = {
+  children: ReactNode
+  test: boolean
+  loading?: boolean
+}
+
+const Maybe: FC<TProps> = ({ children, test, loading = false }) => {
   if (Array.isArray(test) && isEmpty(test)) {
     return <MaybeLoading loading={loading} />
   }
@@ -29,16 +32,4 @@ const Maybe = ({ children, test, loading }) => {
   return <>{children}</>
 }
 
-Maybe.propTypes = {
-  // https://www.npmjs.com/package/prop-types
-  children: T.node.isRequired,
-  test: T.any,
-  loading: T.node,
-}
-
-Maybe.defaultProps = {
-  test: '',
-  loading: null,
-}
-
-export default Maybe
+export default memo(Maybe)

src/components/Navigator/DigestView.tsx

@@ -1,7 +1,7 @@
 import { FC, memo } from 'react'
 
+import type { TMetric } from '@/spec'
 import { METRIC } from '@/constant'
-
 import BlinkCursor from '@/components/BlinkCursor'
 
 import {
@@ -30,7 +30,7 @@ const renderMainEntries = (metric) => {
 }
 
 type TProps = {
-  metric: string
+  metric: TMetric
   layout: TC11NLayout
   showLogoText: boolean
   isOnline: boolean
@@ -44,11 +44,7 @@ const DigestView: FC<TProps> = ({ metric, showLogoText, isOnline, layout }) => {
         {showLogoText && <LogoText>oderPlanets</LogoText>}
       </LogoLink>
 
-      {showLogoText ? (
-        <LogoMargin layout={layout} />
-      ) : (
-        <BlinkCursor duration={1.2} height={14} left={5} right={2} />
-      )}
+      <BlinkCursor duration={1.6} height={14} left={5} right={2} />
 
       {isOnline ? (
         renderMainEntries(metric)

src/components/Navigator/index.tsx

@@ -2,10 +2,10 @@
  * Navigator
  */
 
-import { FC, memo, Fragment } from 'react'
-import { contains, values } from 'ramda'
+import { FC, memo } from 'react'
+import { contains } from 'ramda'
 
-import type { TCommunity, TC11NLayout } from '@/spec'
+import type { TCommunity, TC11NLayout, TMetric } from '@/spec'
 import { C11N, METRIC, HCN } from '@/constant'
 import { buildLog } from '@/utils'
 
@@ -17,7 +17,7 @@ const log = buildLog('c:Navigator:index')
 
 const shouldShowLogoText = (
   communityRaw: string,
-  metric: string,
+  metric: TMetric,
   layout: TC11NLayout,
 ): boolean => {
   if (contains(metric, [METRIC.ARTICLE, METRIC.ARTICLE_EDITOR])) return false
@@ -30,7 +30,7 @@ type TProps = {
   community: TCommunity
   isOnline?: boolean
   layout: TC11NLayout
-  metric?: string
+  metric?: TMetric
 }
 
 const Navigator: FC<TProps> = ({

src/components/Tooltip/index.tsx

@@ -58,7 +58,7 @@ const Tooltip: FC<TProps> = ({
   duration = 0,
   content,
   hideOnClick = true,
-  showArrow = true,
+  showArrow = false,
   footerBehavior = 'default',
   trigger = 'mouseenter focus',
   onConfirm,

src/components/Tooltip/styles/index.ts

@@ -29,7 +29,7 @@ export const NoPaddingStyledTippy = styled(StyledTippy)`
 export const ContentWrapper = styled.div<{ contentHeight: string }>`
   position: relative;
   height: ${({ contentHeight }) => contentHeight};
-  z-index: 1;
+  /* z-index: 1; */
 `
 const Arrow = styled.div`
   position: absolute;

src/components/Upvote/ArticleLayout.tsx

@@ -0,0 +1,48 @@
+/*
+ *
+ * Upvote
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import { buildLog } from '@/utils'
+import { UPVOTE_LAYOUT } from '@/constant'
+
+import TotalCount from './TotalCount'
+import UpvoteBtn from './UpvoteBtn'
+
+import { Wrapper, UpWrapper, CountWrapper } from './styles/article_layout'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Upvote:index')
+
+type TProps = {
+  testid?: string
+  count?: number
+  viewerHasUpvoted?: boolean
+  alias?: string // 觉得很赞(default), 觉得很酷(works), 学到了(blog), 感兴趣(meetup), 有意思(Radar)
+}
+
+const Upvote: FC<TProps> = ({
+  testid = 'upvote',
+  count = 0,
+  viewerHasUpvoted = false,
+  alias = '觉得很赞',
+}) => {
+  return (
+    <Wrapper testid={testid}>
+      <UpWrapper>
+        <UpvoteBtn
+          viewerHasUpvoted={viewerHasUpvoted}
+          type={UPVOTE_LAYOUT.ARTICLE}
+        />
+      </UpWrapper>
+      <CountWrapper>
+        <TotalCount count={count} />
+      </CountWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(Upvote)

src/components/Upvote/CommentView.tsx → src/components/Upvote/CommentLayout.tsx

@@ -11,7 +11,7 @@ import { buildLog } from '@/utils'
 import TotalCount from './TotalCount'
 import UpvoteBtn from './UpvoteBtn'
 
-import { Wrapper, UpWrapper, CountWrapper } from './styles/comment_view'
+import { Wrapper, UpWrapper, CountWrapper } from './styles/comment_layout'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:Upvote:index')

src/components/Upvote/DefaultView.tsx → src/components/Upvote/DefaultLayout.tsx

@@ -14,7 +14,7 @@ import AvatarsRow from '@/components/AvatarsRow'
 import UpvoteBtn from './UpvoteBtn'
 import Desc from './Desc'
 
-import { Wrapper } from './styles/default_view'
+import { Wrapper } from './styles/default_layout'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:Upvote:index')