import classNames from 'classnames/bind' ; import React , { useContext , useEffect } from 'react' ; import { FormattedMessage } from 'react-intl' ; import { useHistory } from 'react-router-dom' ; import localStorageKeys from '../constants/localStorageKeys.json' ; import routes from '../constants/routes.json' ; import getUIStateContext from '../context/getUIStateContext' ; import ClassMode from '../enums/ClassMode' ; import styles from './Login.css' ; const cx = classNames . bind ( styles ) ; export default function Login ( ) { const [ , dispatch ] = useContext ( getUIStateContext ( ) ) ; const history = useHistory ( ) ; useEffect ( ( ) => { localStorage . clear ( ) ; dispatch ( { type : 'SET_CLASS_MODE' , payload : { classMode : null } } ) ; } , [ ] ) ; return ( < div className = { cx ( 'login' ) } > < div className = { cx ( 'content' ) } > < h1 className = { cx ( 'title' ) } > < FormattedMessage id = "Login.title" / > < /h1> < div className = { cx ( 'selection' ) } > < div className = { cx ( 'teacher' ) } > < h2 > < FormattedMessage id = "Login.teacherTitle" / > < /h2> < ul > < li > < FormattedMessage id = "Login.teacherDescription1" / > < /li> < li > < FormattedMessage id = "Login.teacherDescription2" / > < /li> < li > < FormattedMessage id = "Login.teacherDescription3" / > < /li> < li > < FormattedMessage id = "Login.teacherDescription4" / > < /li> < ul > < li > < FormattedMessage id = "Login.teacherToggleDescription1" / > < /li> < li > < FormattedMessage id = "Login.teacherToggleDescription2" / > < /li> < /ul> < /ul> < button type = "button" onClick = { ( ) => { localStorage . setItem ( localStorageKeys . CLASS_MODE , ClassMode . Teacher ) ; dispatch ( { type : 'SET_CLASS_MODE' , payload : { classMode : ClassMode . Teacher } } ) ; history . push ( routes . CREATE_OR_JOIN ) ; } } > < FormattedMessage id = "Login.teacherButton" / > < /button> < /div> < div className = { cx ( 'student' ) } > < h2 > < FormattedMessage id = "Login.studentTitle" / > < /h2> < ul > < li > < FormattedMessage id = "Login.studentDescription1" / > < /li> < li > < FormattedMessage id = "Login.studentDescription2" / > < /li> < li > < FormattedMessage id = "Login.studentDescription3" / > < /li> < li > < FormattedMessage id = "Login.studentDescription4" / > < /li> < ul > < li > < FormattedMessage id = "Login.studentToggleDescription1" / > < /li> < li > < FormattedMessage id = "Login.studentToggleDescription2" / > < /li> < /ul> < /ul> < button type = "button" onClick = { ( ) => { localStorage . setItem ( localStorageKeys . CLASS_MODE , ClassMode . Student ) ; dispatch ( { type : 'SET_CLASS_MODE' , payload : { classMode : ClassMode . Student } } ) ; history . push ( routes . CREATE_OR_JOIN ) ; } } > < FormattedMessage id = "Login.studentButton" / > < /button> < /div> < /div> < /div> < /div>); }