fix: auto switch legacy comment if no providers

Signed-off-by: Innei <i@innei.in>
Innei · Sep 18, 2024 · 3fcad20 · 3fcad20
1 parent 1ce56fe
commit 3fcad20
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/components/modules/comment/CommentBox/SignedOutContent.tsx b/src/components/modules/comment/CommentBox/SignedOutContent.tsx
@@ -1,13 +1,26 @@
 'use client'
 
+import clsx from 'clsx'
+import { useEffect } from 'react'
+
 import { useSessionReader } from '~/atoms/hooks/reader'
 import { StyledButton } from '~/components/ui/button'
-import { AuthProvidersRender } from '~/queries/hooks/authjs'
+import { AuthProvidersRender, useAuthProviders } from '~/queries/hooks/authjs'
 
 import { CommentBoxMode, setCommentMode } from './hooks'
 
 export function CommentBoxSignedOutContent() {
   const isReaderLogin = !!useSessionReader()
+  const providers = useAuthProviders()
+  const hasProviders = providers && Object.keys(providers).length > 0
+
+  useEffect(() => {
+    if (!providers) return
+    if (Object.keys(providers).length === 0) {
+      setCommentMode(CommentBoxMode.legacy)
+    }
+  }, [providers])
+
   if (isReaderLogin) return null
 
   return (
@@ -16,7 +29,7 @@ export function CommentBoxSignedOutContent() {
       <AuthProvidersRender />
 
       <StyledButton
-        className="mt-6"
+        className={clsx(hasProviders ? 'mt-6' : '')}
         variant="secondary"
         type="button"
         onClick={() => {

diff --git a/src/queries/hooks/authjs.tsx b/src/queries/hooks/authjs.tsx
@@ -61,7 +61,7 @@ export const AuthProvidersRender: FC = () => {
                   })
                 }}
               >
-                <div className="flex size-10 items-center justify-center rounded-full border dark:border-neutral-700">
+                <div className="flex size-10 items-center justify-center rounded-full border bg-base-100 dark:border-neutral-700">
                   {!authProcessingLockSet.has(provider) ? (
                     <Fragment>
                       {provider === 'github' ? (