enhancement: improve client-side code (#2568)

web/app/components/base/button/index.tsx

@@ -3,13 +3,16 @@ import React from 'react'
 import Spinner from '../spinner'
 
 export type IButtonProps = {
-  type?: string
+  /**
+   * The style of the button
+   */
+  type?: 'primary' | 'warning' | (string & {})
   className?: string
   disabled?: boolean
   loading?: boolean
   tabIndex?: number
   children: React.ReactNode
-  onClick?: MouseEventHandler<HTMLDivElement>
+  onClick?: MouseEventHandler<HTMLButtonElement>
 }
 
 const Button: FC<IButtonProps> = ({
@@ -35,15 +38,16 @@ const Button: FC<IButtonProps> = ({
   }
 
   return (
-    <div
+    <button
       className={`btn ${style} ${className && className}`}
       tabIndex={tabIndex}
-      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      onClick={onClick}
     >
       {children}
       {/* Spinner is hidden when loading is false */}
       <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />
-    </div>
+    </button>
   )
 }
 

web/app/components/billing/billing-page/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { FC } from 'react'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
 import PlanComp from '../plan'
 import { ReceiptList } from '../../base/icons/src/vender/line/financeAndECommerce'
 import { LinkExternal01 } from '../../base/icons/src/vender/line/general'
@@ -12,17 +13,11 @@ import { useProviderContext } from '@/context/provider-context'
 const Billing: FC = () => {
   const { t } = useTranslation()
   const { isCurrentWorkspaceManager } = useAppContext()
-  const [billingUrl, setBillingUrl] = React.useState('')
   const { enableBilling } = useProviderContext()
-
+  const { data: billingUrl } = useSWR(
-  useEffect(() => {
+    (!enableBilling || !isCurrentWorkspaceManager) ? null : ['/billing/invoices'],
-    if (!enableBilling || !isCurrentWorkspaceManager)
+    () => fetchBillingUrl().then(data => data.url),
-      return
+  )
-    (async () => {
-      const { url } = await fetchBillingUrl()
-      setBillingUrl(url)
-    })()
-  }, [isCurrentWorkspaceManager])
 
   return (
     <div>
@@ -39,4 +34,5 @@ const Billing: FC = () => {
     </div>
   )
 }
+
 export default React.memo(Billing)

web/app/components/header/account-setting/index.tsx

@@ -138,16 +138,12 @@ export default function AccountSetting({
   ]
   const scrollRef = useRef<HTMLDivElement>(null)
   const [scrolled, setScrolled] = useState(false)
-  const scrollHandle = (e: Event) => {
-    if ((e.target as HTMLDivElement).scrollTop > 0)
-      setScrolled(true)
-
-    else
-      setScrolled(false)
-  }
   useEffect(() => {
     const targetElement = scrollRef.current
-
+    const scrollHandle = (e: Event) => {
+      const userScrolled = (e.target as HTMLDivElement).scrollTop > 0
+      setScrolled(userScrolled)
+    }
     targetElement?.addEventListener('scroll', scrollHandle)
     return () => {
       targetElement?.removeEventListener('scroll', scrollHandle)