smarti/src/components/Tutorial/HintTutorialExists.js

98 lines
2.5 KiB
JavaScript

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import Dialog from '../Dialog';
import { withStyles } from '@material-ui/core/styles';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import * as Blockly from 'blockly'
const styles = (theme) => ({
link: {
color: theme.palette.primary.main,
textDecoration: 'none',
'&:hover': {
color: theme.palette.primary.main,
textDecoration: `underline`
}
},
label: {
fontSize: '0.9rem',
color: 'grey'
}
});
class HintTutorialExists extends Component {
constructor(props) {
var previousPageWasAnotherDomain = props.pageVisits === 0;
var userDoNotWantToSeeNews = window.localStorage.getItem('news') ? true : false;
super(props);
this.state = {
open: userDoNotWantToSeeNews ? !userDoNotWantToSeeNews : previousPageWasAnotherDomain
};
}
toggleDialog = () => {
this.setState({ open: !this.state });
}
onChange = (e) => {
if (e.target.checked) {
window.localStorage.setItem('news', e.target.checked);
}
else {
window.localStorage.removeItem('news');
}
}
render() {
return (
<Dialog
style={{ zIndex: 9999999 }}
fullWidth
maxWidth={'sm'}
open={this.state.open}
title={Blockly.Msg.messages_newblockly_head}
content={''}
onClose={this.toggleDialog}
onClick={this.toggleDialog}
button={Blockly.Msg.button_close}
>
<div>
{Blockly.Msg.messages_newblockly_text}<Link to="/tutorial" className={this.props.classes.link}>test</Link>
</div>
<FormControlLabel
style={{ marginTop: '20px' }}
classes={{ label: this.props.classes.label }}
control={
<Checkbox
size={'small'}
value={true}
checked={this.state.checked}
onChange={(e) => this.onChange(e)}
name="dialog"
color="primary"
/>
}
label={Blockly.Msg.labels_donotshowagain}
/>
</Dialog>
);
};
}
HintTutorialExists.propTypes = {
pageVisits: PropTypes.number.isRequired
};
const mapStateToProps = state => ({
pageVisits: state.general.pageVisits
});
export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(HintTutorialExists));