dialog - hint tutorials exists

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { BrowserRouter as Router } from 'react-router-dom';
+import { createBrowserHistory } from "history";
 
 import { Provider } from 'react-redux';
 import store from './store';
@@ -25,12 +26,14 @@ const theme = createMuiTheme({
   }
 });
 
+const customHistory = createBrowserHistory();
+
 
 function App() {
   return (
     <ThemeProvider theme={theme}>
       <Provider store={store}>
-        <Router>
+        <Router history={customHistory}>
           <div className="wrapper">
             <Navbar />
             <Routes />

src/actions/generalActions.js

@@ -0,0 +1,8 @@
+import { VISIT } from './types';
+
+
+export const visitPage = () => (dispatch) => {
+  dispatch({
+    type: VISIT
+  });
+};

src/actions/types.js

@@ -27,3 +27,6 @@ export const BUILDER_CHANGE_ORDER = 'BUILDER_CHANGE_ORDER';
 export const BUILDER_DELETE_PROPERTY = 'BUILDER_DELETE_PROPERTY';
 export const BUILDER_ERROR = 'BUILDER_ERROR';
 export const PROGRESS = 'PROGRESS';
+
+
+export const VISIT = 'VISIT';

src/components/Home.js

@@ -10,6 +10,7 @@ import WorkspaceFunc from './WorkspaceFunc';
 import BlocklyWindow from './Blockly/BlocklyWindow';
 import CodeViewer from './CodeViewer';
 import TrashcanButtons from './TrashcanButtons';
+import HintTutorialExists from './Tutorial/HintTutorialExists';
 
 import Grid from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
@@ -95,6 +96,7 @@ class Home extends Component {
             </Grid>
             : null}
         </Grid>
+        <HintTutorialExists />
       </div>
     );
   };

src/components/Routes.js

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { visitPage } from '../actions/generalActions';
 
-import { Route, Switch } from 'react-router-dom';
+import { Route, Switch, withRouter } from 'react-router-dom';
 
 import Home from './Home';
 import Tutorial from './Tutorial/Tutorial';
@@ -10,6 +13,10 @@ import NotFound from './NotFound';
 
 class Routes extends Component {
 
+  componentDidUpdate(){
+    this.props.visitPage();
+  }
+
   render() {
     return (
       <div style={{ margin: '0 22px' }}>
@@ -25,4 +32,8 @@ class Routes extends Component {
   }
 }
 
-export default Routes;
+Home.propTypes = {
+  visitPage: PropTypes.func.isRequired
+};
+
+export default connect(null, { visitPage })(withRouter(Routes));

src/components/Tutorial/HintTutorialExists.js

@@ -0,0 +1,97 @@
+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';
+
+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;
+    console.log(userDoNotWantToSeeNews);
+    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.deleteItem('news');
+    }
+  }
+
+  render() {
+    return (
+      <Dialog
+        style={{ zIndex: 9999999 }}
+        fullWidth
+        maxWidth={'sm'}
+        open={this.state.open}
+        title={'Neuigkeiten'}
+        content={''}
+        onClose={this.toggleDialog}
+        onClick={this.toggleDialog}
+        button={'Schließen'}
+      >
+        <div>
+          Es gibt ab jetzt Tutorials zu verschiedenen Themen. Schau mal <Link to="/tutorial" className={this.props.classes.link}>hier</Link> vorbei.
+          <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={'Dialog nicht mehr anzeigen'}
+          />
+        </div>
+      </Dialog>
+    );
+  };
+}
+
+HintTutorialExists.propTypes = {
+  pageVisits: PropTypes.number.isRequired
+};
+
+const mapStateToProps = state => ({
+  pageVisits: state.general.pageVisits
+});
+
+export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(HintTutorialExists));

src/reducers/generalReducer.js

@@ -0,0 +1,18 @@
+import { VISIT } from '../actions/types';
+
+
+const initialState = {
+  pageVisits: 0 // detect if previous URL was
+};
+
+export default function(state = initialState, action){
+  switch(action.type){
+    case VISIT:
+      return {
+        ...state,
+        pageVisits: state.pageVisits += 1
+      };
+    default:
+      return state;
+  }
+}

src/reducers/index.js

@@ -2,9 +2,11 @@ import { combineReducers } from 'redux';
 import workspaceReducer from './workspaceReducer';
 import tutorialReducer from './tutorialReducer';
 import tutorialBuilderReducer from './tutorialBuilderReducer';
+import generalReducer from './generalReducer';
 
 export default combineReducers({
   workspace: workspaceReducer,
   tutorial: tutorialReducer,
-  builder: tutorialBuilderReducer
+  builder: tutorialBuilderReducer,
+  general: generalReducer
 });