From 1c74c89142d92c68e6bee491f2c3ebed7ff8a872 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Wed, 28 Jun 2023 23:58:58 +0800
Subject: [PATCH] feat: @fz6m teaching and review suggestions

---
 .../header/internal/HeaderDrawerButton.tsx    |   5 +-
 src/components/widgets/comment/Comment.tsx    |   2 +-
 ...{CommentBoxActionBar.tsx => ActionBar.tsx} |   4 +-
 ...CommentAuthedInput.tsx => AuthedInput.tsx} |  52 ++++-----
 ...utSkeleton.tsx => AuthedInputSkeleton.tsx} |   2 +-
 .../comment/CommentBox/CommentBoxProvider.tsx | 110 ------------------
 .../{CommentBoxRoot.tsx => Root.tsx}          |   8 +-
 ...nedOutContent.tsx => SignedOutContent.tsx} |  11 +-
 .../widgets/comment/CommentBox/hooks.tsx      |  61 ++++++++++
 .../widgets/comment/CommentBox/index.ts       |   2 +-
 .../widgets/comment/CommentBox/inputStyles.ts |  13 ---
 .../widgets/comment/CommentBox/providers.tsx  |  61 ++++++++++
 .../widgets/comment/CommentPinButton.tsx      |   2 +-
 .../widgets/comment/CommentReplyButton.tsx    |   8 +-
 .../widgets/comment/CommentRoot.tsx           |   2 +-
 src/components/widgets/comment/Comments.tsx   |   2 +-
 16 files changed, 175 insertions(+), 170 deletions(-)
 rename src/components/widgets/comment/CommentBox/{CommentBoxActionBar.tsx => ActionBar.tsx} (99%)
 rename src/components/widgets/comment/CommentBox/{CommentAuthedInput.tsx => AuthedInput.tsx} (59%)
 rename src/components/widgets/comment/CommentBox/{CommentAuthedInputSkeleton.tsx => AuthedInputSkeleton.tsx} (87%)
 delete mode 100644 src/components/widgets/comment/CommentBox/CommentBoxProvider.tsx
 rename src/components/widgets/comment/CommentBox/{CommentBoxRoot.tsx => Root.tsx} (82%)
 rename src/components/widgets/comment/CommentBox/{CommentBoxSignedOutContent.tsx => SignedOutContent.tsx} (77%)
 create mode 100644 src/components/widgets/comment/CommentBox/hooks.tsx
 delete mode 100644 src/components/widgets/comment/CommentBox/inputStyles.ts
 create mode 100644 src/components/widgets/comment/CommentBox/providers.tsx

diff --git a/src/components/layout/header/internal/HeaderDrawerButton.tsx b/src/components/layout/header/internal/HeaderDrawerButton.tsx
index 2b24d2bb44..456e8fa63a 100644
--- a/src/components/layout/header/internal/HeaderDrawerButton.tsx
+++ b/src/components/layout/header/internal/HeaderDrawerButton.tsx
@@ -82,7 +82,10 @@ export const HeaderDrawerButton = () => {
 }
 
 // @ts-ignore
-const LinkInternal: typeof Link = memo(({ children, ...rest }) => {
+const LinkInternal: typeof Link = memo(function LinkInternal({
+  children,
+  ...rest
+}) {
   return (
     <Link
       {...rest}
diff --git a/src/components/widgets/comment/Comment.tsx b/src/components/widgets/comment/Comment.tsx
index 2c0128f601..e9ee35edb4 100644
--- a/src/components/widgets/comment/Comment.tsx
+++ b/src/components/widgets/comment/Comment.tsx
@@ -25,7 +25,7 @@ import { CommentReplyButton } from './CommentReplyButton'
 export const Comment: Component<{
   comment: CommentModel
   showLine?: boolean
-}> = memo((props) => {
+}> = memo(function Comment(props) {
   const { comment, className, showLine } = props
   const elAtom = useMemo(() => atom<HTMLDivElement | null>(null), [])
   // FIXME 兜一下后端给的脏数据
diff --git a/src/components/widgets/comment/CommentBox/CommentBoxActionBar.tsx b/src/components/widgets/comment/CommentBox/ActionBar.tsx
similarity index 99%
rename from src/components/widgets/comment/CommentBox/CommentBoxActionBar.tsx
rename to src/components/widgets/comment/CommentBox/ActionBar.tsx
index 6280c86a10..a7bb4d98e6 100644
--- a/src/components/widgets/comment/CommentBox/CommentBoxActionBar.tsx
+++ b/src/components/widgets/comment/CommentBox/ActionBar.tsx
@@ -21,6 +21,7 @@ import { clsxm } from '~/utils/helper'
 import { apiClient, getErrorMessageFromRequestError } from '~/utils/request'
 
 import { buildQueryKey } from '../Comments'
+import { MAX_COMMENT_TEXT_LENGTH } from './constants'
 import {
   useCommentBoxHasText,
   useCommentBoxRefIdValue,
@@ -30,8 +31,7 @@ import {
   useCommentOriginalRefId,
   useGetCommentBoxAtomValues,
   useUseCommentReply,
-} from './CommentBoxProvider'
-import { MAX_COMMENT_TEXT_LENGTH } from './constants'
+} from './hooks'
 
 const TextLengthIndicator = () => {
   const isTextOversize = useCommentBoxTextIsOversize()
diff --git a/src/components/widgets/comment/CommentBox/CommentAuthedInput.tsx b/src/components/widgets/comment/CommentBox/AuthedInput.tsx
similarity index 59%
rename from src/components/widgets/comment/CommentBox/CommentAuthedInput.tsx
rename to src/components/widgets/comment/CommentBox/AuthedInput.tsx
index 107f7a3de8..f9cbe39d41 100644
--- a/src/components/widgets/comment/CommentBox/CommentAuthedInput.tsx
+++ b/src/components/widgets/comment/CommentBox/AuthedInput.tsx
@@ -6,15 +6,31 @@ import Image from 'next/image'
 
 import { useUser } from '@clerk/nextjs'
 
-import { CommentAuthedInputSkeleton } from './CommentAuthedInputSkeleton'
-import { CommentBoxActionBar } from './CommentBoxActionBar'
-import {
-  useCommentBoxTextValue,
-  useSetCommentBoxValues,
-} from './CommentBoxProvider'
+import { CommentBoxActionBar } from './ActionBar'
+import { CommentBoxAuthedInputSkeleton } from './AuthedInputSkeleton'
 import { getRandomPlaceholder } from './constants'
+import { useCommentBoxTextValue, useSetCommentBoxValues } from './hooks'
 
-export const CommentAuthedInput = () => {
+const TextArea = () => {
+  const placeholder = useRef(getRandomPlaceholder()).current
+  const setter = useSetCommentBoxValues()
+  const value = useCommentBoxTextValue()
+  return (
+    <textarea
+      value={value}
+      onChange={(e) => {
+        setter('text', e.target.value)
+      }}
+      placeholder={placeholder}
+      className={clsx(
+        'h-full w-full resize-none bg-transparent',
+        'overflow-auto px-3 py-4',
+        'text-neutral-900/80 dark:text-slate-100/80',
+      )}
+    />
+  )
+}
+export const CommentBoxAuthedInput = () => {
   const { user } = useUser()
   const setter = useSetCommentBoxValues()
 
@@ -28,27 +44,7 @@ export const CommentAuthedInput = () => {
     setter('mail', user.primaryEmailAddress?.emailAddress || '')
   }, [user])
 
-  const TextArea = useRef(function Textarea() {
-    const placeholder = useRef(getRandomPlaceholder()).current
-    const setter = useSetCommentBoxValues()
-    const value = useCommentBoxTextValue()
-    return (
-      <textarea
-        value={value}
-        onChange={(e) => {
-          setter('text', e.target.value)
-        }}
-        placeholder={placeholder}
-        className={clsx(
-          'h-full w-full resize-none bg-transparent',
-          'overflow-auto px-3 py-4',
-          'text-neutral-900/80 dark:text-slate-100/80',
-        )}
-      />
-    )
-  }).current
-
-  if (!user) return <CommentAuthedInputSkeleton />
+  if (!user) return <CommentBoxAuthedInputSkeleton />
   return (
     <div className="flex space-x-4">
       <div
diff --git a/src/components/widgets/comment/CommentBox/CommentAuthedInputSkeleton.tsx b/src/components/widgets/comment/CommentBox/AuthedInputSkeleton.tsx
similarity index 87%
rename from src/components/widgets/comment/CommentBox/CommentAuthedInputSkeleton.tsx
rename to src/components/widgets/comment/CommentBox/AuthedInputSkeleton.tsx
index e7cb503708..7cb77b3198 100644
--- a/src/components/widgets/comment/CommentBox/CommentAuthedInputSkeleton.tsx
+++ b/src/components/widgets/comment/CommentBox/AuthedInputSkeleton.tsx
@@ -2,7 +2,7 @@
 
 import clsx from 'clsx'
 
-export const CommentAuthedInputSkeleton = () => {
+export const CommentBoxAuthedInputSkeleton = () => {
   const color = 'bg-gray-200/50 dark:bg-zinc-800/50'
   return (
     <div className="flex animate-pulse gap-4">
diff --git a/src/components/widgets/comment/CommentBox/CommentBoxProvider.tsx b/src/components/widgets/comment/CommentBox/CommentBoxProvider.tsx
deleted file mode 100644
index e4734cc5e3..0000000000
--- a/src/components/widgets/comment/CommentBox/CommentBoxProvider.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-'use client'
-
-import { createContext, useCallback, useContext, useRef } from 'react'
-import { atom, useAtomValue } from 'jotai'
-import { selectAtom } from 'jotai/utils'
-import type { CommentModel } from '@mx-space/api-client'
-import type { ExtractAtomValue } from 'jotai'
-import type { PropsWithChildren } from 'react'
-
-import { jotaiStore } from '~/lib/store'
-
-import { MAX_COMMENT_TEXT_LENGTH } from './constants'
-
-const createInitialValue = () => ({
-  refId: atom(''),
-
-  text: atom(''),
-  author: atom(''),
-  mail: atom(''),
-  url: atom(''),
-
-  avatar: atom(''),
-  source: atom(''),
-})
-const CommentBoxContext = createContext(createInitialValue())
-export const CommentBoxProvider = (
-  props: PropsWithChildren & { refId: string },
-) => {
-  return (
-    <CommentBoxContext.Provider
-      key={props.refId}
-      value={
-        useRef({
-          ...createInitialValue(),
-          refId: atom(props.refId),
-        }).current
-      }
-    >
-      {props.children}
-    </CommentBoxContext.Provider>
-  )
-}
-
-const CommentIsReplyContext = createContext(false)
-const CommentOriginalRefIdContext = createContext('')
-const CommentCompletedCallbackContext = createContext(
-  null as null | ((comment: CommentModel) => void),
-)
-export const CommentIsReplyProvider = (
-  props: PropsWithChildren<{
-    isReply: boolean
-    originalRefId: string
-    onCompleted?: (comment: CommentModel) => void
-  }>,
-) => {
-  return (
-    <CommentOriginalRefIdContext.Provider value={props.originalRefId}>
-      <CommentIsReplyContext.Provider value={props.isReply}>
-        <CommentCompletedCallbackContext.Provider
-          value={props.onCompleted || null}
-        >
-          {props.children}
-        </CommentCompletedCallbackContext.Provider>
-      </CommentIsReplyContext.Provider>
-    </CommentOriginalRefIdContext.Provider>
-  )
-}
-export const useUseCommentReply = () => useContext(CommentIsReplyContext)
-export const useCommentOriginalRefId = () =>
-  useContext(CommentOriginalRefIdContext)
-export const useCommentCompletedCallback = () =>
-  useContext(CommentCompletedCallbackContext)
-
-export const useCommentBoxTextValue = () =>
-  useAtomValue(useContext(CommentBoxContext).text)
-
-export const useCommentBoxRefIdValue = () =>
-  useAtomValue(useContext(CommentBoxContext).refId)
-
-export const useGetCommentBoxAtomValues = () => {
-  return useContext(CommentBoxContext)
-}
-
-export const useCommentBoxHasText = () =>
-  useAtomValue(
-    selectAtom(
-      useContext(CommentBoxContext).text,
-      useCallback((v) => v.length > 0, []),
-    ),
-  )
-
-export const useCommentBoxTextIsOversize = () =>
-  useAtomValue(
-    selectAtom(
-      useContext(CommentBoxContext).text,
-      useCallback((v) => v.length > MAX_COMMENT_TEXT_LENGTH, []),
-    ),
-  )
-type CommentContextValue = ReturnType<typeof createInitialValue>
-
-export const useSetCommentBoxValues = <
-  T extends keyof CommentContextValue,
->() => {
-  const ctx = useContext(CommentBoxContext)
-  return (key: T, value: ExtractAtomValue<CommentContextValue[T]>) => {
-    const atom = ctx[key]
-    if (!atom) throw new Error(`atom ${key} not found`)
-    jotaiStore.set(atom, value)
-  }
-}
diff --git a/src/components/widgets/comment/CommentBox/CommentBoxRoot.tsx b/src/components/widgets/comment/CommentBox/Root.tsx
similarity index 82%
rename from src/components/widgets/comment/CommentBox/CommentBoxRoot.tsx
rename to src/components/widgets/comment/CommentBox/Root.tsx
index d9f87760fa..e8b4307b9f 100644
--- a/src/components/widgets/comment/CommentBox/CommentBoxRoot.tsx
+++ b/src/components/widgets/comment/CommentBox/Root.tsx
@@ -8,9 +8,9 @@ import { SignedIn, SignedOut } from '@clerk/nextjs'
 
 import { AutoResizeHeight } from '~/components/common/AutoResizeHeight'
 
-import { CommentAuthedInput } from './CommentAuthedInput'
-import { CommentBoxProvider } from './CommentBoxProvider'
-import { CommentBoxSignedOutContent } from './CommentBoxSignedOutContent'
+import { CommentBoxAuthedInput } from './AuthedInput'
+import { CommentBoxProvider } from './providers'
+import { CommentBoxSignedOutContent } from './SignedOutContent'
 
 const enum CommentBoxMode {
   'legacy',
@@ -45,7 +45,7 @@ const CommentBoxWithAuth = () => {
       </SignedOut>
 
       <SignedIn>
-        <CommentAuthedInput />
+        <CommentBoxAuthedInput />
       </SignedIn>
     </AutoResizeHeight>
   )
diff --git a/src/components/widgets/comment/CommentBox/CommentBoxSignedOutContent.tsx b/src/components/widgets/comment/CommentBox/SignedOutContent.tsx
similarity index 77%
rename from src/components/widgets/comment/CommentBox/CommentBoxSignedOutContent.tsx
rename to src/components/widgets/comment/CommentBox/SignedOutContent.tsx
index efa6269c8b..83059cdc71 100644
--- a/src/components/widgets/comment/CommentBox/CommentBoxSignedOutContent.tsx
+++ b/src/components/widgets/comment/CommentBox/SignedOutContent.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { usePathname } from 'next/navigation'
+import { tv } from 'tailwind-variants'
 
 import { SignInButton } from '@clerk/nextjs'
 
@@ -8,7 +9,15 @@ import { UserArrowLeftIcon } from '~/components/icons/user-arrow-left'
 import { StyledButton } from '~/components/ui/button'
 import { urlBuilder } from '~/lib/url-builder'
 
-import { inputStyles } from './inputStyles'
+const inputStyles = tv({
+  base: 'h-[150px] w-full rounded-lg bg-gray-100/80 dark:bg-zinc-900/80',
+  variants: {
+    type: {
+      auth: 'flex center',
+      input: '',
+    },
+  },
+})
 
 export function CommentBoxSignedOutContent() {
   const pathname = usePathname()
diff --git a/src/components/widgets/comment/CommentBox/hooks.tsx b/src/components/widgets/comment/CommentBox/hooks.tsx
new file mode 100644
index 0000000000..688a6365b0
--- /dev/null
+++ b/src/components/widgets/comment/CommentBox/hooks.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { useCallback, useContext } from 'react'
+import { useAtomValue } from 'jotai'
+import { selectAtom } from 'jotai/utils'
+import type { ExtractAtomValue } from 'jotai'
+import type { createInitialValue } from './providers'
+
+import { jotaiStore } from '~/lib/store'
+
+import { MAX_COMMENT_TEXT_LENGTH } from './constants'
+import {
+  CommentBoxContext,
+  CommentCompletedCallbackContext,
+  CommentIsReplyContext,
+  CommentOriginalRefIdContext,
+} from './providers'
+
+export const useUseCommentReply = () => useContext(CommentIsReplyContext)
+export const useCommentOriginalRefId = () =>
+  useContext(CommentOriginalRefIdContext)
+export const useCommentCompletedCallback = () =>
+  useContext(CommentCompletedCallbackContext)
+
+export const useCommentBoxTextValue = () =>
+  useAtomValue(useContext(CommentBoxContext).text)
+
+export const useCommentBoxRefIdValue = () =>
+  useAtomValue(useContext(CommentBoxContext).refId)
+
+export const useGetCommentBoxAtomValues = () => {
+  return useContext(CommentBoxContext)
+}
+
+export const useCommentBoxHasText = () =>
+  useAtomValue(
+    selectAtom(
+      useContext(CommentBoxContext).text,
+      useCallback((v) => v.length > 0, []),
+    ),
+  )
+
+export const useCommentBoxTextIsOversize = () =>
+  useAtomValue(
+    selectAtom(
+      useContext(CommentBoxContext).text,
+      useCallback((v) => v.length > MAX_COMMENT_TEXT_LENGTH, []),
+    ),
+  )
+type CommentContextValue = ReturnType<typeof createInitialValue>
+
+export const useSetCommentBoxValues = <
+  T extends keyof CommentContextValue,
+>() => {
+  const ctx = useContext(CommentBoxContext)
+  return (key: T, value: ExtractAtomValue<CommentContextValue[T]>) => {
+    const atom = ctx[key]
+    if (!atom) throw new Error(`atom ${key} not found`)
+    jotaiStore.set(atom, value)
+  }
+}
diff --git a/src/components/widgets/comment/CommentBox/index.ts b/src/components/widgets/comment/CommentBox/index.ts
index 2d974ed7ec..57b0aa0754 100644
--- a/src/components/widgets/comment/CommentBox/index.ts
+++ b/src/components/widgets/comment/CommentBox/index.ts
@@ -1 +1 @@
-export { CommentBoxRoot } from './CommentBoxRoot'
+export { CommentBoxRoot } from './Root'
diff --git a/src/components/widgets/comment/CommentBox/inputStyles.ts b/src/components/widgets/comment/CommentBox/inputStyles.ts
deleted file mode 100644
index 2042f912dc..0000000000
--- a/src/components/widgets/comment/CommentBox/inputStyles.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client'
-
-import { tv } from 'tailwind-variants'
-
-export const inputStyles = tv({
-  base: 'h-[150px] w-full rounded-lg bg-gray-100/80 dark:bg-zinc-900/80',
-  variants: {
-    type: {
-      auth: 'flex center',
-      input: '',
-    },
-  },
-})
diff --git a/src/components/widgets/comment/CommentBox/providers.tsx b/src/components/widgets/comment/CommentBox/providers.tsx
new file mode 100644
index 0000000000..ebc6c57799
--- /dev/null
+++ b/src/components/widgets/comment/CommentBox/providers.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { createContext, useRef } from 'react'
+import { atom } from 'jotai'
+import type { CommentModel } from '@mx-space/api-client'
+import type { PropsWithChildren } from 'react'
+
+export const createInitialValue = () => ({
+  refId: atom(''),
+
+  text: atom(''),
+  author: atom(''),
+  mail: atom(''),
+  url: atom(''),
+
+  avatar: atom(''),
+  source: atom(''),
+})
+export const CommentBoxContext = createContext(createInitialValue())
+export const CommentBoxProvider = (
+  props: PropsWithChildren & { refId: string },
+) => {
+  const { refId, children } = props
+  return (
+    <CommentBoxContext.Provider
+      key={refId}
+      value={
+        useRef({
+          ...createInitialValue(),
+          refId: atom(refId),
+        }).current
+      }
+    >
+      {children}
+    </CommentBoxContext.Provider>
+  )
+}
+
+export const CommentIsReplyContext = createContext(false)
+export const CommentOriginalRefIdContext = createContext('')
+export const CommentCompletedCallbackContext = createContext<
+  null | ((comment: CommentModel) => void)
+>(null)
+export const CommentIsReplyProvider = (
+  props: PropsWithChildren<{
+    isReply: boolean
+    originalRefId: string
+    onCompleted?: (comment: CommentModel) => void
+  }>,
+) => {
+  const { isReply, originalRefId, onCompleted, children } = props
+  return (
+    <CommentOriginalRefIdContext.Provider value={originalRefId}>
+      <CommentIsReplyContext.Provider value={isReply}>
+        <CommentCompletedCallbackContext.Provider value={onCompleted || null}>
+          {children}
+        </CommentCompletedCallbackContext.Provider>
+      </CommentIsReplyContext.Provider>
+    </CommentOriginalRefIdContext.Provider>
+  )
+}
diff --git a/src/components/widgets/comment/CommentPinButton.tsx b/src/components/widgets/comment/CommentPinButton.tsx
index c2aa38c0f8..1f0c6c2e4c 100644
--- a/src/components/widgets/comment/CommentPinButton.tsx
+++ b/src/components/widgets/comment/CommentPinButton.tsx
@@ -8,7 +8,7 @@ import type { SVGProps } from 'react'
 import { apiClient } from '~/utils/request'
 
 import { PinIconToggle } from '../shared/PinIconToggle'
-import { useCommentBoxRefIdValue } from './CommentBox/CommentBoxProvider'
+import { useCommentBoxRefIdValue } from './CommentBox/hooks'
 import { buildQueryKey } from './Comments'
 
 export const CommentPinButton = ({ comment }: { comment: CommentModel }) => {
diff --git a/src/components/widgets/comment/CommentReplyButton.tsx b/src/components/widgets/comment/CommentReplyButton.tsx
index 68dc161b61..42f78cbb6e 100644
--- a/src/components/widgets/comment/CommentReplyButton.tsx
+++ b/src/components/widgets/comment/CommentReplyButton.tsx
@@ -5,11 +5,9 @@ import type { FC } from 'react'
 import { AutoResizeHeight } from '~/components/common/AutoResizeHeight'
 
 import { CommentBoxHolderPortal } from './Comment'
-import {
-  CommentIsReplyProvider,
-  useCommentBoxRefIdValue,
-} from './CommentBox/CommentBoxProvider'
-import { CommentBoxRoot } from './CommentBox/CommentBoxRoot'
+import { useCommentBoxRefIdValue } from './CommentBox/hooks'
+import { CommentIsReplyProvider } from './CommentBox/providers'
+import { CommentBoxRoot } from './CommentBox/Root'
 
 export const CommentReplyButton: FC<{
   commentId: string
diff --git a/src/components/widgets/comment/CommentRoot.tsx b/src/components/widgets/comment/CommentRoot.tsx
index 3e9202257a..7c203ad54b 100644
--- a/src/components/widgets/comment/CommentRoot.tsx
+++ b/src/components/widgets/comment/CommentRoot.tsx
@@ -4,7 +4,7 @@ import type { CommentBaseProps } from './types'
 import { LazyLoad } from '~/components/common/Lazyload'
 import { Loading } from '~/components/ui/loading'
 
-import { CommentBoxRoot } from './CommentBox/CommentBoxRoot'
+import { CommentBoxRoot } from './CommentBox/Root'
 import { Comments } from './Comments'
 
 const LoadingElement = <Loading loadingText="评论区加载中..." />
diff --git a/src/components/widgets/comment/Comments.tsx b/src/components/widgets/comment/Comments.tsx
index e009465c64..284009e6f8 100644
--- a/src/components/widgets/comment/Comments.tsx
+++ b/src/components/widgets/comment/Comments.tsx
@@ -11,7 +11,7 @@ import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/Bo
 import { apiClient } from '~/utils/request'
 
 import { Comment } from './Comment'
-import { CommentBoxProvider } from './CommentBox/CommentBoxProvider'
+import { CommentBoxProvider } from './CommentBox/providers'
 import { CommentSkeleton } from './CommentSkeleton'
 
 export const buildQueryKey = (refId: string) => ['comments', refId]