-
Notifications
You must be signed in to change notification settings - Fork 0
/
Counter.tsx
41 lines (33 loc) · 1.23 KB
/
Counter.tsx
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
import React from 'react';
import {Button, Grid, Theme, Typography} from "@material-ui/core";
import {useActions, useAppState} from '../Overmind/OvermindHelper'
import {makeStyles} from '@material-ui/core/styles';
import {Foo} from "../Others/Foo";
interface Props {
name?: String
}
const getThemeObj = (theme: Theme) => {
return {
button: {marginTop: 8},
}
}
const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme)))
const Counter: React.FC<Props> = (props) => {
const {increaseCounter} = useActions()
const classes = useStyles();
const {counter} = useAppState()
return <Grid style={{height: 200}} container direction='column' justify='center' alignContent='center'
alignItems='center'>
<Typography>{props.name}</Typography>
<Typography>Counter: {counter}</Typography>
<Button className={classes.button} variant='contained' color='primary' onClick={() => {
// increaseCounter(1)
Foo.increase(1)
}}>+</Button>
<Button className={classes.button} variant='contained' color='primary' onClick={() => {
// increaseCounter(-1)
Foo.increase(-1)
}}>-</Button>
</Grid>
}
export default Counter;