Connected signing up and signing in to back

front/src/components/AuthForm.tsx

@@ -1,38 +1,59 @@
-import { FormEventHandler } from 'react'
+import { FormEventHandler, useCallback } from 'react'
 import { Button, Form } from 'react-bootstrap'
+import { useSignIn, useSignUp } from '../hooks/api'
+import { composeSignUpBody } from '../api/signup'
+import { composeSignInBody } from '../api/token'
 
 type AuthFormProps = {
     register: boolean
-    handleAuth: FormEventHandler<HTMLFormElement>,
-    loading: boolean,
-    error: string
+    goBack: () => void,
 }
 
-function AuthForm ({ handleAuth, register, loading, error }: AuthFormProps) {
-    const buttonText = loading ? 'Загрузка...' : (error || (register ? 'Зарегистрироваться' : 'Войти'))
+function AuthForm({ goBack, register }: AuthFormProps) {
+    const { handleSignUp, signUpButton } = useSignUp()
+
+    const { handleSignIn, signInButton } = useSignIn()
+
+    const handleAuth: FormEventHandler<HTMLFormElement> = useCallback((e) => {
+        e.preventDefault()
+        e.stopPropagation()
+
+        const formData = new FormData(e.currentTarget)
+
+        void (async () => {
+            const accountCreated = register ? (
+                await handleSignUp(composeSignUpBody(formData))
+            ) : true
+
+            if (accountCreated) {
+                await handleSignIn(composeSignInBody(formData))
+                goBack()
+            }
+        })()
+    }, [register, goBack, handleSignUp, handleSignIn])
 
     return (
         <Form onSubmit={handleAuth}>
             <Form.Group className='mb-3' controlId='email'>
                 <Form.Label>Почта</Form.Label>
-                <Form.Control type='email' required />
+                <Form.Control name='email' type='email' required />
             </Form.Group>
 
             {register && <>
                 <Form.Group className='mb-3' controlId='name'>
                     <Form.Label>Имя</Form.Label>
-                    <Form.Control type='text' required />
+                    <Form.Control name='name' type='text' required />
                 </Form.Group>
 
                 <Form.Group className='mb-3' controlId='surname'>
                     <Form.Label>Фамилия</Form.Label>
-                    <Form.Control type='text' required />
+                    <Form.Control name='surname' type='text' required />
                 </Form.Group>
             </>}
 
             <Form.Group className='mb-3' controlId='password'>
                 <Form.Label>Пароль</Form.Label>
-                <Form.Control type='password' required />
+                <Form.Control name='password' type='password' required />
             </Form.Group>
 
             {register &&
@@ -46,9 +67,9 @@ function AuthForm ({ handleAuth, register, loading, error }: AuthFormProps) {
                 </Form.Group>
             }
 
-            <Button variant='success' type='submit'>
-                {buttonText}
-            </Button>
+            <Button variant='success' type='submit' {
+                ...(register ? signUpButton : signInButton)
+            } />
         </Form>
     )
 }