Commit 909be99e authored by Florent Chehab's avatar Florent Chehab
Browse files

Saving state of color picker ok, removed some forgotten logging

parent 7b63733c
Pipeline #26943 passed with stages
in 2 minutes and 23 seconds
...@@ -2,3 +2,4 @@ export const SAVE_MAIN_MAP_POSITION = 'SAVE_MAIN_MAP_POSITION'; ...@@ -2,3 +2,4 @@ export const SAVE_MAIN_MAP_POSITION = 'SAVE_MAIN_MAP_POSITION';
export const SAVE_SELECTED_UNIVERSITIES = 'SAVE_SELECTED_UNIVERSITIES'; export const SAVE_SELECTED_UNIVERSITIES = 'SAVE_SELECTED_UNIVERSITIES';
export const SAVE_FILTER_CONFIG = 'SAVE_FILTER_CONFIG'; export const SAVE_FILTER_CONFIG = 'SAVE_FILTER_CONFIG';
export const SAVE_APP_THEME = 'SAVE_APP_THEME'; export const SAVE_APP_THEME = 'SAVE_APP_THEME';
export const SAVE_APP_COLOR_PICKER = 'SAVE_APP_COLOR_PICKER';
import { import {
SAVE_APP_THEME SAVE_APP_THEME,
SAVE_APP_COLOR_PICKER
} from "./action-types"; } from "./action-types";
...@@ -9,5 +10,11 @@ export function saveAppTheme(theme) { ...@@ -9,5 +10,11 @@ export function saveAppTheme(theme) {
type: SAVE_APP_THEME, type: SAVE_APP_THEME,
theme theme
}; };
}
export function saveAppColorPicker(s) {
return {
type: SAVE_APP_COLOR_PICKER,
state: s
};
} }
...@@ -31,7 +31,6 @@ class Search extends MyComponent { ...@@ -31,7 +31,6 @@ class Search extends MyComponent {
} }
getSuggestions(value) { getSuggestions(value) {
console.log(value)
const { universities } = this.getAllFetchedData(); const { universities } = this.getAllFetchedData();
const filter = fuzzysort.go(value, _.map(universities, (univ) => univ), { keys: ['name', 'acronym'] }); const filter = fuzzysort.go(value, _.map(universities, (univ) => univ), { keys: ['name', 'acronym'] });
let out; let out;
......
...@@ -46,21 +46,18 @@ class UnivList extends React.Component { ...@@ -46,21 +46,18 @@ class UnivList extends React.Component {
handleNext = () => { handleNext = () => {
console.log("next")
this.setState(prevState => ({ this.setState(prevState => ({
activeStep: prevState.activeStep + 1, activeStep: prevState.activeStep + 1,
})); }));
}; };
handleBack = () => { handleBack = () => {
console.log("back")
this.setState(prevState => ({ this.setState(prevState => ({
activeStep: prevState.activeStep - 1, activeStep: prevState.activeStep - 1,
})); }));
}; };
handleStepChange = activeStep => { handleStepChange = activeStep => {
console.log("step change")
this.setState({ activeStep }); this.setState({ activeStep });
}; };
...@@ -75,7 +72,6 @@ class UnivList extends React.Component { ...@@ -75,7 +72,6 @@ class UnivList extends React.Component {
} }
const maxSteps = Math.ceil(numberOfItems / itemsPerPage); const maxSteps = Math.ceil(numberOfItems / itemsPerPage);
console.log("maxSteps", maxSteps, "numberOfItems", numberOfItems, "itemsPerPage");
return ( return (
<div className={classes.root}> <div className={classes.root}>
<SwipeableViews <SwipeableViews
......
...@@ -19,7 +19,7 @@ import { rgbToHex } from '@material-ui/core/styles/colorManipulator'; ...@@ -19,7 +19,7 @@ import { rgbToHex } from '@material-ui/core/styles/colorManipulator';
import { capitalize } from '@material-ui/core/utils/helpers'; import { capitalize } from '@material-ui/core/utils/helpers';
// import actionTypes from 'docs/src/modules/redux/actionTypes'; // import actionTypes from 'docs/src/modules/redux/actionTypes';
import ColorDemo from './ColorDemo'; import ColorDemo from './ColorDemo';
import { saveAppTheme } from '../../actions/theme'; import { saveAppTheme, saveAppColorPicker } from '../../actions/theme';
const hues = Object.keys(colors).slice(1, 17); const hues = Object.keys(colors).slice(1, 17);
const shades = [900, 800, 700, 600, 500, 400, 300, 200, 100, 50, 'A700', 'A400', 'A200', 'A100']; const shades = [900, 800, 700, 600, 500, 400, 300, 200, 100, 50, 'A700', 'A400', 'A200', 'A100'];
...@@ -63,16 +63,15 @@ const styles = theme => ({ ...@@ -63,16 +63,15 @@ const styles = theme => ({
}); });
class ColorTool extends React.Component { class ColorTool extends React.Component {
state = { state = this.props.state
primary: '#2196f3', componentWillUnmount() {
secondary: '#f50057', this.props.saveColorPicker(this.state);
primaryInput: '#2196f3', }
secondaryInput: '#f50057', componentDidMount(){
primaryHue: 'blue', if (JSON.stringify(this.props.state) != JSON.stringify(this.state)){
secondaryHue: 'pink', this.setState(this.props.state);
primaryShade: 4, }
secondaryShade: 11, }
};
handleChangeColor = name => event => { handleChangeColor = name => event => {
const isRgb = string => /#?([0-9a-f]{6})/i.test(string); const isRgb = string => /#?([0-9a-f]{6})/i.test(string);
...@@ -119,17 +118,20 @@ class ColorTool extends React.Component { ...@@ -119,17 +118,20 @@ class ColorTool extends React.Component {
}; };
handleChangeDocsColors = () => { handleChangeDocsColors = () => {
this.props.saveTheme({ this.props.saveTheme(this.getThemeFromState());
};
getThemeFromState() {
return {
palette: { palette: {
primary: { main: this.state.primary }, primary: { main: this.state.primary },
secondary: { main: this.state.secondary }, secondary: { main: this.state.secondary },
}, },
}) }
}; }
render() { render() {
const { classes, theme } = this.props; const { classes, theme } = this.props;
console.log(theme)
const { primaryShade, secondaryShade } = this.state; const { primaryShade, secondaryShade } = this.state;
const colorBar = color => { const colorBar = color => {
...@@ -218,6 +220,14 @@ class ColorTool extends React.Component { ...@@ -218,6 +220,14 @@ class ColorTool extends React.Component {
); );
}; };
const { currentUiTheme } = this.props;
const tmp = {
palette: {
primary: { main: currentUiTheme.palette.primary.main },
secondary: { main: currentUiTheme.palette.secondary.main }
}
}
const hasChanges = JSON.stringify(tmp) != JSON.stringify(this.getThemeFromState());
return ( return (
<Grid container spacing={40} className={classes.root}> <Grid container spacing={40} className={classes.root}>
{colorPicker('primary')} {colorPicker('primary')}
...@@ -225,11 +235,17 @@ class ColorTool extends React.Component { ...@@ -225,11 +235,17 @@ class ColorTool extends React.Component {
<Grid item xs={12} sm={6} md={4}> <Grid item xs={12} sm={6} md={4}>
<ColorDemo data={this.state} /> <ColorDemo data={this.state} />
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={3}>
<Button variant="contained" color="primary" onClick={this.handleChangeDocsColors}> <Button variant="contained" color="secondary" disabled={!hasChanges} onClick={this.handleChangeDocsColors}>
Appliquer à tout le site Appliquer à tout le site
</Button> </Button>
</Grid> </Grid>
<Grid item xs={3}>
<Button variant="contained" color="primary" disabled={true} onClick={console.log("click")}>
Sauvegarder
</Button>
</Grid>
</Grid> </Grid>
); );
} }
...@@ -241,11 +257,17 @@ ColorTool.propTypes = { ...@@ -241,11 +257,17 @@ ColorTool.propTypes = {
}; };
const mapStateToProps = (state) => Object(); const mapStateToProps = (state) => {
return {
currentUiTheme: state.app.appTheme,
state: state.app.colorPickerState
}
};
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {
saveTheme: (theme) => dispatch(saveAppTheme(theme)) saveTheme: (theme) => dispatch(saveAppTheme(theme)),
saveColorPicker: (partialState) => dispatch(saveAppColorPicker(partialState))
}; };
}; };
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(ColorTool)); export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(ColorTool));
...@@ -13,13 +13,14 @@ import { ...@@ -13,13 +13,14 @@ import {
import { saveMainMapPosition } from './map'; import { saveMainMapPosition } from './map';
import { saveSelectedUniversities } from './filter'; import { saveSelectedUniversities } from './filter';
import { saveFilterConfig } from './filter'; import { saveFilterConfig } from './filter';
import { saveAppTheme } from './theme'; import { saveAppTheme, saveAppColorPicker } from './theme';
const appReducers = combineReducers({ const appReducers = combineReducers({
mainMap: saveMainMapPosition, mainMap: saveMainMapPosition,
selectedUniversities: saveSelectedUniversities, selectedUniversities: saveSelectedUniversities,
filter: saveFilterConfig, filter: saveFilterConfig,
appTheme: saveAppTheme appTheme: saveAppTheme,
colorPickerState: saveAppColorPicker
}) })
const rootReducer = combineReducers({ const rootReducer = combineReducers({
......
import { SAVE_APP_THEME } from '../actions/action-types' import { SAVE_APP_THEME, SAVE_APP_COLOR_PICKER } from '../actions/action-types'
import indigo from '@material-ui/core/colors/indigo'; import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink'; import pink from '@material-ui/core/colors/pink';
...@@ -18,3 +18,26 @@ export function saveAppTheme(state = defaultTheme, action) { ...@@ -18,3 +18,26 @@ export function saveAppTheme(state = defaultTheme, action) {
return state; return state;
} }
} }
const defaultColorPicker = {
primary: defaultTheme.palette.primary[500],
secondary: defaultTheme.palette.secondary['A400'],
primaryInput: '#2196f3',
secondaryInput: '#f50057',
primaryHue: 'blue',
secondaryHue: 'pink',
primaryShade: 4,
secondaryShade: 11,
applied: false,
};
export function saveAppColorPicker(state = defaultColorPicker, action) {
switch (action.type) {
case SAVE_APP_COLOR_PICKER:
console.log("je passe ici !")
return Object.assign({}, state, action.state)
default:
return state;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment