diff --git a/src/App.js b/src/App.js index 50afe39..35f9218 100644 --- a/src/App.js +++ b/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 ( - +
diff --git a/src/actions/generalActions.js b/src/actions/generalActions.js new file mode 100644 index 0000000..6585a9a --- /dev/null +++ b/src/actions/generalActions.js @@ -0,0 +1,8 @@ +import { VISIT } from './types'; + + +export const visitPage = () => (dispatch) => { + dispatch({ + type: VISIT + }); +}; diff --git a/src/actions/types.js b/src/actions/types.js index 0a1dc72..c65c9ec 100644 --- a/src/actions/types.js +++ b/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'; diff --git a/src/components/Home.js b/src/components/Home.js index 86deb9a..cb42f31 100644 --- a/src/components/Home.js +++ b/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 { : null} +
); }; diff --git a/src/components/Routes.js b/src/components/Routes.js index 70153de..4a7666e 100644 --- a/src/components/Routes.js +++ b/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 (
@@ -25,4 +32,8 @@ class Routes extends Component { } } -export default Routes; +Home.propTypes = { + visitPage: PropTypes.func.isRequired +}; + +export default connect(null, { visitPage })(withRouter(Routes)); diff --git a/src/components/Tutorial/HintTutorialExists.js b/src/components/Tutorial/HintTutorialExists.js new file mode 100644 index 0000000..fa9b64f --- /dev/null +++ b/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 ( + +
+ Es gibt ab jetzt Tutorials zu verschiedenen Themen. Schau mal hier vorbei. + this.onChange(e)} + name="dialog" + color="primary" + /> + } + label={'Dialog nicht mehr anzeigen'} + /> +
+
+ ); + }; +} + +HintTutorialExists.propTypes = { + pageVisits: PropTypes.number.isRequired +}; + +const mapStateToProps = state => ({ + pageVisits: state.general.pageVisits +}); + +export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(HintTutorialExists)); diff --git a/src/reducers/generalReducer.js b/src/reducers/generalReducer.js new file mode 100644 index 0000000..2d1c875 --- /dev/null +++ b/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; + } +} diff --git a/src/reducers/index.js b/src/reducers/index.js index 948fd68..077c60c 100644 --- a/src/reducers/index.js +++ b/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 });