feat: @fz6m teaching and review suggestions

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}

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 兜一下后端给的脏数据

src/components/widgets/comment/CommentBox/CommentBoxActionBar.tsx → 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()

src/components/widgets/comment/CommentBox/CommentAuthedInput.tsx → 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

src/components/widgets/comment/CommentBox/CommentAuthedInputSkeleton.tsx → 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">

src/components/widgets/comment/CommentBox/CommentBoxRoot.tsx → 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>
   )

src/components/widgets/comment/CommentBox/CommentBoxSignedOutContent.tsx → src/components/widgets/comment/CommentBox/SignedOutContent.tsx

@@ -1,14 +1,23 @@
 'use client'
 
 import { usePathname } from 'next/navigation'
+import { tv } from 'tailwind-variants'
 
 import { SignInButton } from '@clerk/nextjs'
 
 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()

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)
+  }
+}

src/components/widgets/comment/CommentBox/index.ts

@@ -1 +1 @@
-export { CommentBoxRoot } from './CommentBoxRoot'
+export { CommentBoxRoot } from './Root'