Jul 21, 2021 · Jul 19, 2021 · Jul 19, 2021 · Jul 19, 2021 · Jul 19, 2021 · Jul 19, 2021
diff --git a/src/components/ArticleBaseStats/index.tsx b/src/components/ArticleBaseStats/index.tsx
 /*
 *
 * 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)
diff --git a/src/components/ArticleBaseStats/styles/index.ts b/src/components/ArticleBaseStats/styles/index.ts
 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;
 `
diff --git a/...s/content/PostContent/tests/index.test.ts → ...ents/ArticleBaseStats/tests/index.test.ts b/...s/content/PostContent/tests/index.test.ts → ...ents/ArticleBaseStats/tests/index.test.ts
 // import React from 'react'
 // import { shallow } from 'enzyme'

 // importPostContent from '../index'
 // importArticleBaseStats from '../index'

 describe('TODO <PostContent />', () => {
 describe('TODO <ArticleBaseStats />', () => {
  it('Expect to have unit tests specified', () => {
    expect(true).toEqual(true)
  })
diff --git a/src/components/AvatarsRow/RealAvatar.tsx b/src/components/AvatarsRow/RealAvatar.tsx
  return (
    <Tooltip
      content={<UserPopContent>{user.nickname}</UserPopContent>}
      delay={200}
      delay={0}
      contentHeight={getAvatarSize(size, 'number') as string}
      showArrow={false}
      noPadding
diff --git a/src/components/AvatarsRow/styles/real_avatar.ts b/src/components/AvatarsRow/styles/real_avatar.ts
 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>`
  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>`
diff --git a/src/components/Buttons/styles/icon_button.ts b/src/components/Buttons/styles/icon_button.ts

 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`};
  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 }) =>
diff --git a/src/components/Copyright/styles/readonly_panel.ts b/src/components/Copyright/styles/readonly_panel.ts
 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')};
diff --git a/src/components/ErrorPage/index.tsx b/src/components/ErrorPage/index.tsx
 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'
  errorCode?: number // 400 | 500 | 404
  target?: string
  testid?: string
  metric?:string
  metric?:TMetric
 }

 const ErrorPage: FC<TProps> = ({
diff --git a/src/components/Maybe/index.js → src/components/Maybe/index.tsx b/src/components/Maybe/index.js → src/components/Maybe/index.tsx
 /*
 *
 * Maybe
 *
 */

 import React from 'react'
 import T from 'prop-types'
 import { FC, memo, ReactNode } from 'react'
 import { isEmpty } from 'ramda'

 import { buildLog } from '@/utils'
  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} />
  }
  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)
diff --git a/src/components/Navigator/DigestView.tsx b/src/components/Navigator/DigestView.tsx
 import { FC, memo } from 'react'

 import type { TMetric } from '@/spec'
 import { METRIC } from '@/constant'

 import BlinkCursor from '@/components/BlinkCursor'

 import {
 }

 type TProps = {
  metric:string
  metric:TMetric
  layout: TC11NLayout
  showLogoText: boolean
  isOnline: boolean
        {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)
diff --git a/src/components/Navigator/index.tsx b/src/components/Navigator/index.tsx
 * 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'


 const shouldShowLogoText = (
  communityRaw: string,
  metric:string,
  metric:TMetric,
  layout: TC11NLayout,
 ): boolean => {
  if (contains(metric, [METRIC.ARTICLE, METRIC.ARTICLE_EDITOR])) return false
  community: TCommunity
  isOnline?: boolean
  layout: TC11NLayout
  metric?:string
  metric?:TMetric
 }

 const Navigator: FC<TProps> = ({
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
  duration = 0,
  content,
  hideOnClick = true,
  showArrow =true,
  showArrow =false,
  footerBehavior = 'default',
  trigger = 'mouseenter focus',
  onConfirm,
diff --git a/src/components/Tooltip/styles/index.ts b/src/components/Tooltip/styles/index.ts
 export const ContentWrapper = styled.div<{ contentHeight: string }>`
  position: relative;
  height: ${({ contentHeight }) => contentHeight};
  z-index: 1;
 /*z-index: 1; */
 `
 const Arrow = styled.div`
  position: absolute;
diff --git a/src/components/Upvote/ArticleLayout.tsx b/src/components/Upvote/ArticleLayout.tsx
 /*
 *
 * 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)
diff --git a/src/components/Upvote/CommentView.tsx → src/components/Upvote/CommentLayout.tsx b/src/components/Upvote/CommentView.tsx → src/components/Upvote/CommentLayout.tsx
 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')
diff --git a/src/components/Upvote/DefaultView.tsx → src/components/Upvote/DefaultLayout.tsx b/src/components/Upvote/DefaultView.tsx → src/components/Upvote/DefaultLayout.tsx
 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')
Original file line number	Diff line number	Diff line change
		@@ -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)
Original file line number	Diff line number	Diff line change
		@@ -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;
		`
Original file line number	Diff line number	Diff line change
		@@ -1,9 +1,9 @@
		// import React from 'react'
		// import { shallow } from 'enzyme'

		// importPostContent from '../index'
		// importArticleBaseStats from '../index'

		describe('TODO <PostContent />', () => {
		describe('TODO <ArticleBaseStats />', () => {
		it('Expect to have unit tests specified', () => {
		expect(true).toEqual(true)
		})
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>`
Expand All		@@ -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>`
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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`};
Expand All		@@ -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 }) =>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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')};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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'
Expand DownExpand Up		@@ -37,7 +38,7 @@ export type TProps = {
		errorCode?: number // 400 \| 500 \| 404
		target?: string
		testid?: string
		metric?:string
		metric?:TMetric
		}

		const ErrorPage: FC<TProps> = ({
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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'
Expand All		@@ -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} />
		}
Expand All		@@ -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)
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import { FC, memo } from 'react'

		import type { TMetric } from '@/spec'
		import { METRIC } from '@/constant'

		import BlinkCursor from '@/components/BlinkCursor'

		import {
Expand DownExpand Up		@@ -30,7 +30,7 @@ const renderMainEntries = (metric) => {
		}

		type TProps = {
		metric:string
		metric:TMetric
		layout: TC11NLayout
		showLogoText: boolean
		isOnline: boolean
Expand All		@@ -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)
Expand Down