import { useCurrentUser } from 'next-on-rails/current-user' import { useLogout } from 'next-on-rails/devise' import { getDetailFromResponseError, useFlash } from 'next-on-rails/utils'
import Flash from '../components/flash' import LoginForm from '../components/login-form' import RegistrationForm from '../components/registration-form'
const Home = props => {
const { setFlash } = useFlash() const logout = useLogout() const { currentUser } = useCurrentUser() const loginSuccessCallback = response => { setFlash({ notice: `Welcome ${response.data.email}!` }) } const loginErrorCallback = error => { setFlash({ alert: getDetailFromResponseError(error) }) } const registrationSuccessCallback = response => { setFlash({ notice: `Welcome ${response.data.email}! An email to confirm your account has been sent to this email address.` }) } return ( <div className="container pt-4"> <Flash /> <h1>Welcome to Next On Rails!</h1> <img src="https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif" alt="Magic" /> <p>{currentUser ? `Hi, ${currentUser.email}` : 'You are not logged'}</p> {currentUser ? ( <button className="btn btn-primary" onClick={logout}> Logout </button> ) : ( <div className="row"> <div className="col"> <h6>Login</h6> <LoginForm successCallback={loginSuccessCallback} errorCallback={loginErrorCallback} /> </div> <div className="col"> <h6>Register</h6> <RegistrationForm successCallback={registrationSuccessCallback} /> </div> </div> )} </div> )
}
export default Home