Saving state of color picker ok, removed some forgotten logging

frontend/src/actions/action-types.js

@@ -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';

frontend/src/actions/theme.js

 
 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
+    };
 }

frontend/src/components/search/Search.js

@@ -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;

frontend/src/components/search/UnivList.js

@@ -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

frontend/src/components/settings/ColorTools.js

@@ -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));

frontend/src/reducers/index.js

@@ -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({

frontend/src/reducers/theme.js

-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;
+  }
+}