-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.js
57 lines (50 loc) · 1.75 KB
/
index.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
import React from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import useMouse from 'react-use/lib/useMouse';
import {
App, Button, Title, Image
} from '../../style/home';
import useClientRect from '../../hooks/useClientRect';
import { incrementCounter, decrementCounter, resetCounterLaunched } from './actions';
import Counter from '../../components/Counter';
import logo from '../../assets/images/logo.png';
const HomePage = () => {
const appRef = React.useRef(null);
const { docX, docY } = useMouse(appRef);
const dispatch = useDispatch();
const { counter, resetLoading } = useSelector(state => ({
counter: state.get('Home').get('counter'),
resetLoading: state.get('Home').get('resetLoading')
}), shallowEqual);
const [rect, ref] = useClientRect();
const center = getCoordinates(rect !== null ? rect : {});
const increment = () => {
dispatch(incrementCounter(counter));
};
const decrement = () => {
dispatch(decrementCounter(counter));
};
const calculateAngle = () => {
const opp = docY - center.y;
const adj = docX - center.x;
return (Math.atan(opp / adj) * 180) / Math.PI;
};
console.log(resetLoading);
return (
<App ref={appRef}>
<Image src={logo} ref={ref} angle={calculateAngle()} />
<Title>React Redux Starter</Title>
<Button type="button" onClick={increment}>+</Button>
<Button type="button" onClick={decrement}>-</Button>
<Counter counter={counter} />
<Button loading={resetLoading} type="button" onClick={() => { dispatch(resetCounterLaunched()); }}>Reset</Button>
</App>
);
};
const getCoordinates = (rect) => {
const {
x, y, width, height
} = rect;
return { x: x + width / 2, y: y + height / 2 };
};
export default HomePage;