refactor: upvotes (#227)

groupher · Aug 13, 2024 · 299d145 · 299d145
1 parent 185436c
commit 299d145
Show file tree

Hide file tree

Showing 41 changed files with 392 additions and 816 deletions.
diff --git a/src/hooks/useTwBelt.ts b/src/hooks/useTwBelt.ts
@@ -33,6 +33,7 @@ type TRet = {
   avatar: (level?: 'md' | 'sm' | '') => string
   gradiientBar: (color: TColorName) => string
   breakOut: (type?: TBreakOut) => string
+  enhanceDark: () => string
 }
 
 /**
@@ -137,6 +138,12 @@ export default (): TRet => {
     return 'w-full'
   }
 
+  const enhanceDark = (): string => {
+    if (!isLightTheme) return 'saturate-150 brightness-125'
+
+    return ''
+  }
+
   return {
     cn,
     global,
@@ -154,5 +161,6 @@ export default (): TRet => {
     avatar,
     gradiientBar,
     breakOut,
+    enhanceDark,
   }
 }
diff --git a/src/widgets/AnimatedCount/AnimatedCount.tsx b/src/widgets/AnimatedCount/AnimatedCount.tsx
@@ -1,41 +1,32 @@
 import { type FC, memo } from 'react'
 
 import SIZE from '~/const/size'
-import usePrimaryColor from '~/hooks/usePrimaryColor'
-import useTheme from '~/hooks/useTheme'
 
 import FlipNumbers from 'react-flip-numbers'
 
 import type { TProps } from '.'
-import { Wrapper } from './styles'
-import { getFontSize, getFlipNumOffset, getCountColor } from './styles/metric'
-
-const AnimatedCount: FC<TProps> = ({
-  count = 0,
-  size = SIZE.SMALL,
-  $active = false,
-  forceColor,
-}) => {
-  const primaryColor = usePrimaryColor()
-  const { themeMap } = useTheme()
+import { getFontSize, getFlipNumOffset } from './styles/metric'
+
+import useSalon from './styles'
+
+const AnimatedCount: FC<TProps> = ({ count = 0, size = SIZE.SMALL, active = false }) => {
+  const s = useSalon({ count, active })
 
   const numSize = getFontSize(size)
   const offset = getFlipNumOffset(size)
 
-  const countColor = forceColor || getCountColor($active, themeMap, primaryColor, count)
-
   return (
-    <Wrapper key={countColor} $active={$active} $count={count}>
+    <div key={count} className={s.wrapper}>
       <FlipNumbers
         height={numSize}
         width={numSize - offset}
-        color={countColor}
+        color="inherit"
         perspective={400}
         duration={0.8}
         numbers={String(count)}
         play
       />
-    </Wrapper>
+    </div>
   )
 }
 

diff --git a/src/widgets/AnimatedCount/index.tsx b/src/widgets/AnimatedCount/index.tsx
@@ -6,30 +6,7 @@ import SIZE from '~/const/size'
 
 import AnimatedCount from './AnimatedCount'
 
-import { Wrapper } from './styles'
-
-// @ts-ignore
-// const LoadingValueContext = createContext()
-
-// props is not accessable in loading
-// see https://github.com/vercel/next.js/issues/7906#issuecomment-787686440
-// const AnimatedCount = dynamic(() => import('./AnimatedCount'), {
-//   /* eslint-disable react/display-name */
-//   loading: () => {
-//     // eslint-disable-next-line react-hooks/rules-of-hooks
-//     const { count, active } = useContext(LoadingValueContext) as {
-//       count: number
-//       size: TSize
-//       active: boolean
-//     }
-//     return (
-//       <Wrapper $active={active} count={count}>
-//         {count}
-//       </Wrapper>
-//     )
-//   },
-//   ssr: false,
-// })
+import useSalon from './styles'
 
 export type TProps = {
   count?: number
@@ -40,18 +17,21 @@ export type TProps = {
 
 const Count: FC<TProps> = ({
   count = 0,
-  size = SIZE.SMALL,
-  $active = false,
   forceColor = '',
-  ...restProps
+  size = SIZE.SMALL,
+  active = false,
+  ...spacing
 }) => {
+  const s = useSalon({ count, active, ...spacing })
+
+  if (forceColor) {
+    console.log('## forceColor: ', forceColor)
+  }
+
   return (
-    <Wrapper $active={$active} $count={count} {...restProps}>
-      <AnimatedCount count={count} size={size} $active={$active} forceColor={forceColor} />
-    </Wrapper>
-    // <LoadingValueContext.Provider value={{ count, size, active }}>
-    //   <AnimatedCount count={count} size={size} active={active} />
-    // </LoadingValueContext.Provider>
+    <div className={s.wrapper}>
+      <AnimatedCount count={count} size={size} active={active} />
+    </div>
   )
 }
 

diff --git a/src/widgets/AnimatedCount/styles/index.ts b/src/widgets/AnimatedCount/styles/index.ts
@@ -1,12 +1,21 @@
-import styled from '~/css'
-import type { TActive } from '~/spec'
+import useTwBelt from '~/hooks/useTwBelt'
+import type { TActive, TSpace } from '~/spec'
 
-import { WithMargin } from '~/widgets/Common'
+type TProps = {
+  count: number
+} & TSpace &
+  TActive
 
-type TWrapper = { $count: number } & TActive
+export default ({ count, active, ...spacing }: TProps) => {
+  const { cn, fg, enhanceDark, margin, primary } = useTwBelt()
 
-export const Wrapper = styled(WithMargin)<TWrapper>`
-  font-weight: ${({ $count }) => ($count > 0 ? 500 : 400)};
-  filter: brightness(1.1);
-`
-export const holder = 1
+  return {
+    wrapper: cn(
+      fg('text.digest'),
+      active && primary('fg'),
+      count > 0 && 'bold-sm',
+      enhanceDark(),
+      margin(spacing),
+    ),
+  }
+}
diff --git a/src/widgets/AnimatedCount/styles/metric.ts b/src/widgets/AnimatedCount/styles/metric.ts
@@ -40,11 +40,11 @@ export const getCountColor = (
   primaryColor: TColorName,
   count: number,
 ): string => {
-  if (count === 0) return themeMap.article.digest
+  if (count === 0) return themeMap.text.digest
 
   if (primaryColor === COLOR_NAME.BLACK) {
-    return themeMap.article.digest
+    return themeMap.text.digest
   }
 
-  return active ? themeMap.rainbow[primaryColor.toLowerCase()] : themeMap.article.title
+  return active ? themeMap.rainbow[primaryColor.toLowerCase()] : themeMap.text.digest
 }
diff --git a/src/widgets/Upvote/ArticleLayout.tsx b/src/widgets/Upvote/ArticleLayout.tsx
@@ -6,12 +6,11 @@
 
 import { type FC, memo } from 'react'
 
-import usePrimaryColor from '~/hooks/usePrimaryColor'
 import AnimatedCount from '~/widgets/AnimatedCount'
 
 import useUpvote from './useUpvote'
 import UpvoteBtn from './UpvoteBtn'
-import { Wrapper, Button, CountWrapper, Alias } from './styles/article_layout'
+import useSalon from './salon/article_layout'
 
 type TProps = {
   testid?: string
@@ -26,23 +25,17 @@ const Upvote: FC<TProps> = ({
   viewerHasUpvoted = false,
   onAction = console.log,
 }) => {
-  const primaryColor = usePrimaryColor()
-  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
-
-  console.log('## ## viewerHasUpvoted: ', viewerHasUpvoted)
+  const s = useSalon({ viewerHasUpvoted })
+  const { handleClick } = useUpvote({ viewerHasUpvoted, onAction })
 
   return (
-    <Wrapper $testid={testid}>
-      <Button $color={primaryColor} $active={viewerHasUpvoted} onClick={handleClick}>
-        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} count={count} startAnimate={startAnimate} />
-        <CountWrapper>
-          <AnimatedCount count={count} $active={viewerHasUpvoted} size="medium" />
-        </CountWrapper>
-        <Alias $color={primaryColor} $active={viewerHasUpvoted}>
-          票
-        </Alias>
-      </Button>
-    </Wrapper>
+    <div className={s.wrapper} data-testid={testid}>
+      <button className={s.button} onClick={handleClick}>
+        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} count={count} />
+        <AnimatedCount count={count} active={viewerHasUpvoted} size="large" left={2} top={0.5} />
+        <div className={s.alias}>票</div>
+      </button>
+    </div>
   )
 }
 

diff --git a/src/widgets/Upvote/CommentLayout.tsx b/src/widgets/Upvote/CommentLayout.tsx
@@ -6,14 +6,13 @@
 
 import { type FC, memo } from 'react'
 
-import usePrimaryColor from '~/hooks/usePrimaryColor'
 import { UPVOTE_LAYOUT } from '~/const/layout'
 import AnimatedCount from '~/widgets/AnimatedCount'
 
 import useUpvote from './useUpvote'
 import UpvoteBtn from './UpvoteBtn'
 
-import { Wrapper, Button, Alias, UpWrapper, CountWrapper } from './styles/comment_layout'
+import useSalon from './salon/comment_layout'
 
 type TProps = {
   testid?: string
@@ -30,30 +29,17 @@ const Upvote: FC<TProps> = ({
   viewerHasUpvoted = false,
   onAction = console.log,
 }) => {
-  const primaryColor = usePrimaryColor()
-  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
+  const s = useSalon({ viewerHasUpvoted })
+  const { handleClick } = useUpvote({ viewerHasUpvoted, onAction })
 
   return (
-    <Wrapper $testid={testid}>
-      <Button color={primaryColor} $active={viewerHasUpvoted} onClick={handleClick}>
-        <UpWrapper>
-          <UpvoteBtn
-            type={UPVOTE_LAYOUT.COMMENT}
-            viewerHasUpvoted={viewerHasUpvoted}
-            startAnimate={startAnimate}
-            count={count}
-          />
-        </UpWrapper>
-        <Alias color={primaryColor} $active={viewerHasUpvoted}>
-          {alias}
-        </Alias>
-        {count !== 0 && (
-          <CountWrapper>
-            <AnimatedCount count={count} $active={viewerHasUpvoted} size="small" />
-          </CountWrapper>
-        )}
-      </Button>
-    </Wrapper>
+    <div className={s.wrapper} data-testid={testid}>
+      <button className={s.button} onClick={handleClick}>
+        <UpvoteBtn type={UPVOTE_LAYOUT.COMMENT} viewerHasUpvoted={viewerHasUpvoted} count={count} />
+        <div className={s.alias}>{alias}</div>
+        {count !== 0 && <AnimatedCount count={count} active={viewerHasUpvoted} size="medium" />}
+      </button>
+    </div>
   )
 }
 

diff --git a/src/widgets/Upvote/DefaultLayout.tsx b/src/widgets/Upvote/DefaultLayout.tsx
@@ -7,22 +7,13 @@ import { type FC, Fragment } from 'react'
 
 import type { TUser } from '~/spec'
 
-import usePrimaryColor from '~/hooks/usePrimaryColor'
 import Facepile from '~/widgets/Facepile'
 
 import useUpvote from './useUpvote'
 import AnimatedCount from '../AnimatedCount'
 import UpvoteBtn from './UpvoteBtn'
 
-import {
-  Wrapper,
-  Button,
-  UpvoteBtnWrapper,
-  Count,
-  Digest,
-  Note,
-  Name,
-} from './styles/default_layout'
+import useSalon from './salon/default_layout'
 
 type TProps = {
   testid?: string
@@ -41,41 +32,34 @@ const Upvote: FC<TProps> = ({
   onAction = console.log,
   avatarList,
 }) => {
-  const primaryColor = usePrimaryColor()
-  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
+  const s = useSalon({ viewerHasUpvoted })
+
+  const { handleClick } = useUpvote({ viewerHasUpvoted, onAction })
 
   const noOne = count === 0
   const names = !noOne ? avatarList.map((user) => user.nickname).slice(0, 4) : []
 
   return (
-    <Wrapper $testid={testid}>
-      <Button $active={viewerHasUpvoted} color={primaryColor} onClick={handleClick}>
-        <UpvoteBtnWrapper>
-          <UpvoteBtn
-            viewerHasUpvoted={viewerHasUpvoted}
-            count={count}
-            startAnimate={startAnimate}
-          />
-        </UpvoteBtnWrapper>
-        <Count>
-          <AnimatedCount count={count} $active={viewerHasUpvoted} size="large" />
-        </Count>
-      </Button>
+    <div className={s.wrapper} data-testid={testid}>
+      <button className={s.button} onClick={handleClick}>
+        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} count={count} />
+        <AnimatedCount count={count} active={viewerHasUpvoted} size="large" left={2} />
+      </button>
       {!noOne && (
-        <Digest>
+        <div className={s.digest}>
           <Facepile users={avatarList} showMore={false} left={-4} bottom={3} top={3} />
-          <Note>
+          <div className={s.note}>
             {names.map((name, index) => (
               <Fragment key={name}>
-                <Name>{name}</Name>
+                <div className={s.user}>{name}</div>
                 {index !== names.length - 1 ? <>，</> : <>&nbsp;</>}
               </Fragment>
             ))}
             {alias}
-          </Note>
-        </Digest>
+          </div>
+        </div>
       )}
-    </Wrapper>
+    </div>
   )
 }
 

diff --git a/src/widgets/Upvote/Desc.tsx b/src/widgets/Upvote/Desc.tsx