feat: handled many issues about implementing hotsurf

packages/billets-admin-client/app/auth/signin/page.tsx

@@ -1,7 +1,80 @@
 'use client'
 
-import LoginForm from '../../../ui/LoginForm'
+import {
+  LoginForm as LoginFormUI,
+  type LoginFormRefHandle,
+} from '@coldsurfers/hotsurf'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useState, useRef } from 'react'
+import useLoginMutation from '@hooks/useLoginMutation'
+import { ME_QUERY } from '@hooks/useMeQuery'
+import storage from '@utils/storage/storage'
+import Loader from '@ui/Loader'
 
-const SignInPage = () => <LoginForm />
+const SigninPage = () => {
+  const router = useRouter()
+  const formRef = useRef<LoginFormRefHandle>(null)
+  const [mutate, { data, loading, client }] = useLoginMutation()
+  const [errorMessage, setErrorMessage] = useState<string>('')
 
-export default SignInPage
+  const login = useCallback(
+    (params: { email: string; password: string }) =>
+      mutate({
+        variables: {
+          input: params,
+        },
+      }),
+    [mutate]
+  )
+
+  useEffect(() => {
+    if (!data?.login) return
+    // eslint-disable-next-line no-shadow
+    const { login } = data
+    switch (login.__typename) {
+      case 'HttpError':
+        setErrorMessage(login.message)
+        break
+      case 'UserWithToken':
+        storage.set('@billets/token', login.token)
+        client.refetchQueries({
+          include: [ME_QUERY],
+        })
+        break
+      default:
+        break
+    }
+  }, [client, data, router])
+
+  useEffect(() => {
+    const onKeypress = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        const currentInputValue = formRef.current?.currentInputValue()
+        if (currentInputValue) {
+          login(currentInputValue)
+        }
+      }
+    }
+    document.addEventListener('keypress', onKeypress)
+
+    return () => {
+      document.removeEventListener('keypress', onKeypress)
+    }
+  }, [login])
+
+  return (
+    <LoginFormUI
+      ref={formRef}
+      onPressLoginButton={login}
+      withRequestButtonUI
+      onPressRequestButtonUI={useCallback(() => {
+        router.push('/auth/request')
+      }, [router])}
+      isLoading={loading}
+      LoadingUI={<Loader />}
+      errorMessage={errorMessage}
+    />
+  )
+}
+
+export default SigninPage

packages/billets-admin-client/app/concert/[id]/page.tsx

@@ -308,7 +308,9 @@ const Thumbnail = styled.img`
   border-radius: 8px;
   margin-top: 12px;
   object-fit: contain;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 `
 
@@ -341,7 +343,9 @@ const SectionList = styled.div`
 const SectionCard = styled.div`
   margin-top: 6px;
   margin-bottom: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   background-color: ${palette.white};
   padding: 16px;

packages/billets-admin-client/app/page.tsx

@@ -258,7 +258,7 @@ export default function Page() {
           }}
         />
       </TableBottom>
-      {loading && <Loader />}
+      {/* {loading && <Loader />} */}
     </Wrapper>
   )
 }
@@ -301,7 +301,6 @@ const Td = styled.td`
   padding-right: 8px;
   background-color: ${palette.white};
   &:hover {
-    /* background-color: ${palette.pink}; */
   }
   & + & {
     border-left: 1px solid ${palette.yellow};