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

* refactor(post-content): extract common comp wip

* refactor(article-digest): re-org layout

* refactor(article-digest): wip

* refactor(avatars-row): new hover effect, awesome

* refactor(upvote): enhance TS support

* refactor(article-digest): redesign works digest

* refactor(article): adjust metric system on works

* refactor(spec): add TMetrice

* refactor(article): use common article content

* refactor(article): basic fixed header UI/UX

* refactor(article): wip

* refactor(article): header style adjust

* chore: clean up

Author: mydearxym

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 renamed to 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 renamed to 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)