import * as React from "react" ; import { validateNicknameFormat } from "@creature-chess/models" ; import { NicknameSelection } from "./input/NicknameSelection" ; import { PictureSelection } from "./input/PictureSelection" ; import { useStyles } from "./RegistrationPage.styles" ; type RegistrationPageProps = { updateUser : ( nickname : string , image : number ) => Promise < { error ? : string ; } > ; } ; const RegistrationPage = ( { updateUser } ) => { const styles = useStyles ( ) ; const [ nickname , setNickname ] = React . useState < string > ( "" ) ; const [ currentImage , setCurrentImage ] = React . useState ( 1 ) ; const [ loading , setLoading ] = React . useState < boolean > ( false ) ; const [ error , setError ] = React . useState < string | null > ( null ) ; const handleNameChange = ( event ) => { if ( loading ) { return ; } setNickname ( event . target . value ) ; } ; const handleImageChange = ( picture ) : void => { if ( loading ) { return ; } setCurrentImage ( picture ) ; } ; const onRegisterClick = async ( ) => { const nicknameError = validateNicknameFormat ( nickname ) ; if ( nicknameError ) { setError ( nicknameError ) ; return ; } setLoading ( true ) ; const { error : responseError } = await updateUser ( nickname , currentImage ) ; if ( ! responseError ) { return ; } setLoading ( false ) ; setError ( responseError ) ; } ; return ( < div className = { styles . register } > < h1 > Registration < /h1> { error && < p className = { styles . error } > { error } < /p>} < NicknameSelection nickname = { nickname || "" } onChange = { handleNameChange } loading = { loading } / > < PictureSelection currentImage = { currentImage } onChange = { handleImageChange } / > < button className = { styles . registerButton } onClick = { onRegisterClick } disabled = { loading } > { ! loading && "Register" } { loading && "Loading..." } < /button> < /div>); } ; export { RegistrationPage } ;