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

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';
export const SAVE_SELECTED_UNIVERSITIES = 'SAVE_SELECTED_UNIVERSITIES';
export const SAVE_FILTER_CONFIG = 'SAVE_FILTER_CONFIG';
export const SAVE_APP_THEME = 'SAVE_APP_THEME';
export const SAVE_APP_COLOR_PICKER = 'SAVE_APP_COLOR_PICKER';
import {
SAVE_APP_THEME
SAVE_APP_THEME,
SAVE_APP_COLOR_PICKER
} from "./action-types";
......@@ -9,5 +10,11 @@ export function saveAppTheme(theme) {
type: SAVE_APP_THEME,
theme
};
}
export function saveAppColorPicker(s) {
return {
type: SAVE_APP_COLOR_PICKER,
state: s
};
}
......@@ -31,7 +31,6 @@ class Search extends MyComponent {
}
getSuggestions(value) {
console.log(value)
const { universities } = this.getAllFetchedData();
const filter = fuzzysort.go(value, _.map(universities, (univ) => univ), { keys: ['name', 'acronym'] });
let out;
......
......@@ -46,21 +46,18 @@ class UnivList extends React.Component {
handleNext = () => {
console.log("next")
this.setState(prevState => ({
activeStep: prevState.activeStep + 1,
}));
};
handleBack = () => {
console.log("back")
this.setState(prevState => ({
activeStep: prevState.activeStep - 1,
}));
};
handleStepChange = activeStep => {
console.log("step change")
this.setState({ activeStep });
};
......@@ -75,7 +72,6 @@ class UnivList extends React.Component {
}
const maxSteps = Math.ceil(numberOfItems / itemsPerPage);
console.log("maxSteps", maxSteps, "numberOfItems", numberOfItems, "itemsPerPage");
return (
<div className={classes.root}>
<SwipeableViews
......
......@@ -19,7 +19,7 @@ import { rgbToHex } from '@material-ui/core/styles/colorManipulator';
import { capitalize } from '@material-ui/core/utils/helpers';
// import actionTypes from 'docs/src/modules/redux/actionTypes';
import ColorDemo from './ColorDemo';
import { saveAppTheme } from '../../actions/theme';
import { saveAppTheme, saveAppColorPicker } from '../../actions/theme';
const hues = Object.keys(colors).slice(1, 17);
const shades = [900, 800, 700, 600, 500, 400, 300, 200, 100, 50, 'A700', 'A400', 'A200', 'A100'];
......@@ -63,16 +63,15 @@ const styles = theme => ({
});
class ColorTool extends React.Component {
state = {
primary: '#2196f3',
secondary: '#f50057',
primaryInput: '#2196f3',
secondaryInput: '#f50057',
primaryHue: 'blue',
secondaryHue: 'pink',
primaryShade: 4,
secondaryShade: 11,
};
state = this.props.state
componentWillUnmount() {
this.props.saveColorPicker(this.state);
}
componentDidMount(){
if (JSON.stringify(this.props.state) != JSON.stringify(this.state)){
this.setState(this.props.state);
}
}
handleChangeColor = name => event => {
const isRgb = string => /#?([0-9a-f]{6})/i.test(string);
......@@ -119,17 +118,20 @@ class ColorTool extends React.Component {
};
handleChangeDocsColors = () => {
this.props.saveTheme({
this.props.saveTheme(this.getThemeFromState());
};
getThemeFromState() {
return {
palette: {
primary: { main: this.state.primary },
secondary: { main: this.state.secondary },
},
})
};
}
}
render() {
const { classes, theme } = this.props;
console.log(theme)
const { primaryShade, secondaryShade } = this.state;
const colorBar = color => {
......@@ -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 (
<Grid container spacing={40} className={classes.root}>
{colorPicker('primary')}
......@@ -225,11 +235,17 @@ class ColorTool extends React.Component {
<Grid item xs={12} sm={6} md={4}>
<ColorDemo data={this.state} />
</Grid>
<Grid item xs={12}>
<Button variant="contained" color="primary" onClick={this.handleChangeDocsColors}>
<Grid item xs={3}>
<Button variant="contained" color="secondary" disabled={!hasChanges} onClick={this.handleChangeDocsColors}>
Appliquer à tout le site
</Button>
</Grid>
<Grid item xs={3}>
<Button variant="contained" color="primary" disabled={true} onClick={console.log("click")}>
Sauvegarder
</Button>
</Grid>
</Grid>
);
}
......@@ -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) => {
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));
......@@ -13,13 +13,14 @@ import {
import { saveMainMapPosition } from './map';
import { saveSelectedUniversities } from './filter';
import { saveFilterConfig } from './filter';
import { saveAppTheme } from './theme';
import { saveAppTheme, saveAppColorPicker } from './theme';
const appReducers = combineReducers({
mainMap: saveMainMapPosition,
selectedUniversities: saveSelectedUniversities,
filter: saveFilterConfig,
appTheme: saveAppTheme
appTheme: saveAppTheme,
colorPickerState: saveAppColorPicker
})
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 pink from '@material-ui/core/colors/pink';
......@@ -18,3 +18,26 @@ export function saveAppTheme(state = defaultTheme, action) {
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