/
LogIn.js
63 lines (46 loc) · 2.04 KB
/
LogIn.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import * as React from 'react';
import cn from 'classnames';
import EventManager from '../../utils/EventManger'
import Authorization from './pages/Authorization';
import Registration from './pages/Registration';
import Recovery from './pages/Recovery';
import './LogIn.scss'
const LogIn = () => {
const [page, setPage] = React.useState('authorization'),
[notify, setNotify] = React.useState({type: '', text: ''}),
[rememberAccount, setRememberAccount] = React.useState({login: '', password: ''});
const isInitialMount = React.useRef(true);
const notifyRef = React.useRef(null);
const screen = React.useRef(null);
React.useEffect(() => {
const timeout = setTimeout(() => screen.current.classList.add('logIn_active'), 200);
return () => clearTimeout(timeout);
},[]);
const addNotify = React.useCallback((type,text) => {
setNotify({type: type, text: text});
},[notify]);
React.useEffect(() => {
EventManager.addHandler('logIn', 'setNotify', obj => addNotify(obj));
EventManager.addHandler('logIn', 'setRememberAccount', obj => setRememberAccount(obj));
return () => EventManager.removeHandler('logIn');
},[]);
React.useEffect(() => {
if (isInitialMount.current) return;
notifyRef.current.classList.add('logIn-notify_active');
const timeout = setTimeout(() => {
notifyRef.current.classList.remove('logIn-notify_active');
}, 3000);
return () => clearTimeout(timeout);
},[notify]);
React.useEffect(() => {
if (isInitialMount.current) isInitialMount.current = false;
},[]);
return <div ref={screen} className='logIn'>
<div className='logIn__logo'></div>
{page === 'authorization' && <Authorization addNotify={addNotify} setPageGlobal={setPage} rememberAccount={rememberAccount}/>}
{page === 'registration' && <Registration addNotify={addNotify} setPageGlobal={setPage}/>}
{page === 'recovery' && <Recovery addNotify={addNotify} setPageGlobal={setPage}/>}
<div ref={notifyRef} className={cn('logIn-notify', `logIn-notify_${notify.type}`)}>{notify.text}</div>
</div>
};
export default React.memo(LogIn);