chore(js-ts): comments & related-comps (#1044)

* chore(js-ts): comments wip

* chore(js-ts): convert to ts && fix warnings

Author: mydearxym

src/components/DotDivider/index.js

@@ -0,0 +1,28 @@
+/*
+ *
+ * DotDivider
+ *
+ */
+
+import React from 'react'
+
+import { buildLog } from '@/utils'
+import { Wrapper } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:DotDivider:index')
+
+export type TProps = {
+  className?: string
+  radius?: number
+  space?: number
+}
+const DotDivider: React.FC<TProps> = ({
+  radius = 3,
+  space = 3,
+  className = 'dot-divider-class',
+}) => {
+  return <Wrapper radius={radius} space={space} className={className} />
+}
+
+export default React.memo(DotDivider)

src/components/DotDivider/index.tsx

@@ -1,8 +1,9 @@
 import styled from 'styled-components'
 import { theme } from '@/utils'
 
-type TDot = { radius: string; space: string }
-export const Wrapper = styled.div<TDot>`
+import type { TProps } from '../index'
+
+export const Wrapper = styled.div<TProps>`
   width: ${({ radius }) => `${radius}px`};
   height: ${({ radius }) => `${radius}px`};
   border-radius: 100%;

src/components/DotDivider/styles/index.ts

@@ -5,25 +5,27 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
 import { buildLog } from '@/utils'
 
+import type { TAvatarProps as TProps } from './index'
 import { Wrapper, Name } from './styles/avatar'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:ImgFallback:Avatar')
 
-const Avatar = ({
-  testid,
-  className,
-  size,
-  user,
-  left,
-  right,
-  top,
-  bottom,
-  quote,
+const Avatar: React.FC<TProps> = ({
+  testid = 'avatar-fallback',
+  className = '',
+  size = 15,
+  user = {
+    nickname: '?',
+  },
+  left = 0,
+  right = 0,
+  top = 0,
+  bottom = 0,
+  quote = false,
 }) => {
   const name = user?.nickname
   const sliceCount = size > 32 ? 2 : 1
@@ -44,32 +46,4 @@ const Avatar = ({
   )
 }
 
-Avatar.propTypes = {
-  testid: T.string,
-  className: T.string,
-  user: T.shape({
-    nickname: T.string,
-  }),
-  size: T.number,
-  left: T.number,
-  right: T.number,
-  top: T.number,
-  bottom: T.number,
-  quote: T.bool,
-}
-
-Avatar.defaultProps = {
-  testid: 'avatar-fallback',
-  className: '',
-  size: 15,
-  user: {
-    nickname: '?',
-  },
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  quote: false,
-}
-
 export default React.memo(Avatar)

src/components/ImgFallback/Avatar.js renamed to src/components/ImgFallback/Avatar.tsx

@@ -127,8 +127,12 @@ const rollTheDice = () => {
   }
 }
 
-const Work = () => {
-  return <Wrapper>{rollTheDice()}</Wrapper>
+type TProps = {
+  testid?: string
+}
+
+const Work: React.FC<TProps> = ({ testid = 'image-fallbak-work' }) => {
+  return <Wrapper testid={testid}>{rollTheDice()}</Wrapper>
 }
 
 export default React.memo(Work)

src/components/ImgFallback/Work.js renamed to src/components/ImgFallback/Work.tsx

@@ -0,0 +1,45 @@
+/*
+ *
+ * ImgFallback
+ *
+ */
+
+import React from 'react'
+
+import type { TUser } from '@/spec'
+import { buildLog } from '@/utils'
+
+import Work from './Work'
+import Avatar from './Avatar'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ImgFallback:index')
+
+export type TAvatarProps = {
+  testid?: string
+  className?: string
+  user?: TUser
+  size?: number
+  left?: number
+  right?: number
+  top?: number
+  bottom?: number
+  quote?: boolean
+}
+
+type TProps = {
+  type?: 'avatar' | 'work'
+} & TAvatarProps
+
+const ImgFallback: React.FC<TProps> = ({ type = 'avatar', ...restProps }) => {
+  switch (type) {
+    case 'work': {
+      return <Work />
+    }
+
+    default:
+      return <Avatar {...restProps} />
+  }
+}
+
+export default React.memo(ImgFallback)

src/components/ImgFallback/index.js

@@ -1,17 +1,16 @@
 import styled from 'styled-components'
 
-import type { TTestable, TSpace } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
+
+import type { TAvatarProps } from '../index'
 import { getFontSize } from './metric/avatar'
 
-type IWrapper = TSpace & {
-  size: string
-  quote: string
-}
+type TWrapper = TTestable & TAvatarProps
 
-export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+export const Wrapper = styled.div.attrs(({ testid }: TWrapper) => ({
   'data-test-id': testid,
-}))<TTestable & IWrapper>`
+}))<TWrapper>`
   ${css.flex('align-both')};
   color: ${theme('thread.articleTitle')};
   width: ${({ size }) => `${size}px`};

src/components/ImgFallback/index.tsx

@@ -1,9 +1,16 @@
 import React from 'react'
 
+import type { TAccount, TComment } from '@/spec'
+
 import { Wrapper, ReplyAction } from '../styles/comment/actions'
 import { openUpdateEditor, openReplyEditor, onDelete } from '../logic'
 
-const Actions = ({ data, accountInfo }) => {
+type TProps = {
+  data: TComment
+  accountInfo: TAccount
+}
+
+const Actions: React.FC<TProps> = ({ data, accountInfo }) => {
   if (String(data.author.id) === accountInfo.id) {
     return (
       <Wrapper>