Home.tsx

// src/pages/Home.tsx

import React, { useState } from 'react';
import axios from 'axios';
import Auth from './Auth';

function useInput(type: string) {
  const [value, setValue] = useState('');
  const input = (
    <input
      className="input"
      value={value}
      onChange={e => setValue(e.target.value)}
      type={type}
    />
  );
  return [value, input];
}

function App() {
  const [auth, setAuth] = useState('login');
  const [firstName, firstNameInput] = useInput('text');
  const [lastName, lastNameInput] = useInput('text');
  const [email, emailInput] = useInput('text');
  const [password, passwordInput] = useInput('password');

  async function login() {
    const payload = {
      name: {
        first: firstName,
        last: lastName,
      },
      email: email,
      password: password,
    };

    try {
      const response = await axios.post(
        'http://localhost:8080/v1/auth/init',
        payload
      );

      console.log(response.data)
    } catch (err) {
      console.log(err);
    }
  }
 
  return (
    <Auth
      auth={auth}
      setAuth={setAuth}
      firstNameInput={firstNameInput}
      lastNameInput={lastNameInput}
      emailInput={emailInput}
      passwordInput={passwordInput}
      login={login}
    />
  );
}

export default App;