add map toggles to localStorage

webpack/devices/reducer.ts

@@ -69,13 +69,13 @@ export let initialState: BotState = {
   currentOSVersion: undefined,
   currentFWVersion: undefined,
   axis_inversion: {
-    x: Session.getBool(BooleanSetting.X_AXIS_INVERTED),
-    y: Session.getBool(BooleanSetting.Y_AXIS_INVERTED),
-    z: Session.getBool(BooleanSetting.Z_AXIS_INVERTED),
+    x: Session.getBool(BooleanSetting.X_AXIS_INVERTED) || false,
+    y: Session.getBool(BooleanSetting.Y_AXIS_INVERTED) || false,
+    z: Session.getBool(BooleanSetting.Z_AXIS_INVERTED) || false,
   },
   encoder_visibility: {
-    raw_encoders: Session.getBool(BooleanSetting.RAW_ENCODERS),
-    scaled_encoders: Session.getBool(BooleanSetting.SCALED_ENCODERS),
+    raw_encoders: Session.getBool(BooleanSetting.RAW_ENCODERS) || false,
+    scaled_encoders: Session.getBool(BooleanSetting.SCALED_ENCODERS) || false,
   }
 };
 

webpack/farm_designer/index.tsx

@@ -9,16 +9,29 @@ import { history } from "../history";
 import { Plants } from "./plants/plant_inventory";
 import { GardenMapLegend } from "./map/garden_map_legend";
 import { isMobile } from "../util";
+import { Session, safeBooleanSettting } from "../session";
+import { NumericSetting, BooleanSetting } from "../session_keys";
+import { isUndefined } from "lodash";
 
 @connect(mapStateToProps)
 export class FarmDesigner extends React.Component<Props, Partial<State>> {
 
+  initializeSetting = (name: keyof State, defaultValue: boolean): boolean => {
+    const currentValue = Session.getBool(safeBooleanSettting(name));
+    if (isUndefined(currentValue)) {
+      Session.setBool(safeBooleanSettting(name), defaultValue);
+      return defaultValue;
+    } else {
+      return currentValue;
+    }
+  }
+
   state: State = {
-    legendMenuOpen: false,
-    showPlants: true,
-    showPoints: true,
-    showSpread: false,
-    showFarmbot: true
+    legendMenuOpen: this.initializeSetting(BooleanSetting.legendMenuOpen, false),
+    showPlants: this.initializeSetting(BooleanSetting.showPlants, true),
+    showPoints: this.initializeSetting(BooleanSetting.showPoints, true),
+    showSpread: this.initializeSetting(BooleanSetting.showSpread, false),
+    showFarmbot: this.initializeSetting(BooleanSetting.showFarmbot, true),
   };
 
   componentDidMount() {
@@ -26,14 +39,22 @@ export class FarmDesigner extends React.Component<Props, Partial<State>> {
     this.updateZoomLevel(0)();
   }
 
-  toggle = (name: keyof State) => () =>
+  toggle = (name: keyof State) => () => {
     this.setState({ [name]: !this.state[name] });
+    Session.invertBool(safeBooleanSettting(name));
+  }
 
-  updateBotOriginQuadrant = (payload: BotOriginQuadrant) => () =>
+  updateBotOriginQuadrant = (payload: BotOriginQuadrant) => () => {
+    Session.setNum(NumericSetting.BOT_ORIGIN_QUADRANT, payload);
     this.props.dispatch({ type: "UPDATE_BOT_ORIGIN_QUADRANT", payload });
+  }
 
-  updateZoomLevel = (payload: number) => () =>
+  updateZoomLevel = (zoomIncrement: number) => () => {
+    const payload =
+      (Session.getNum(NumericSetting.ZOOM_LEVEL) || 1) + zoomIncrement;
+    Session.setNum(NumericSetting.ZOOM_LEVEL, payload);
     this.props.dispatch({ type: "UPDATE_MAP_ZOOM_LEVEL", payload });
+  }
 
   childComponent(props: Props) {
     const fallback = isMobile() ? undefined : React.createElement(Plants, props);

webpack/farm_designer/reducer.ts

@@ -45,14 +45,11 @@ export let designer = generateReducer<DesignerState>(initialState)
     return s;
   })
   .add<BotOriginQuadrant>(Actions.UPDATE_BOT_ORIGIN_QUADRANT, (s, a) => {
-    Session.setNum(NumericSetting.BOT_ORIGIN_QUADRANT, a.payload);
     s.botOriginQuadrant = a.payload;
     return s;
   })
-  .add<ZoomLevelPayl>(Actions.UPDATE_MAP_ZOOM_LEVEL, (s, { payload }) => {
-    const value = s.zoomLevel + payload;
-    s.zoomLevel = value;
-    Session.setNum(NumericSetting.ZOOM_LEVEL, value);
+  .add<ZoomLevelPayl>(Actions.UPDATE_MAP_ZOOM_LEVEL, (s, a) => {
+    s.zoomLevel = a.payload;
     return s;
   })
   .add<CropLiveSearchResult[]>(Actions.OF_SEARCH_RESULTS_OK, (s, a) => {

webpack/session.ts

@@ -1,6 +1,6 @@
 import { AuthState } from "./auth/interfaces";
 import { box } from "boxed_value";
-import { get, isNumber } from "lodash";
+import { get, isNumber, isBoolean } from "lodash";
 import { BooleanSetting, NumericSetting } from "./session_keys";
 
 /** The `Session` namespace is a wrapper for `localStorage`.
@@ -42,9 +42,11 @@ export namespace Session {
     window.location.href = window.location.origin;
   }
 
-  /** Fetch a *boolean* value from localstorage. */
-  export function getBool(key: BooleanSetting): boolean {
-    return JSON.parse(localStorage.getItem(key) || "false");
+  /** Fetch a *boolean* value from localstorage. Returns `undefined` when
+   * none are found.*/
+  export function getBool(key: BooleanSetting): boolean | undefined {
+    const output = JSON.parse(localStorage.getItem(key) || "null");
+    return (isBoolean(output)) ? output : undefined;
   }
 
   /** Store a boolean value in `localStorage` */
@@ -68,3 +70,17 @@ export namespace Session {
     localStorage.setItem(key, JSON.stringify(val));
   }
 }
+
+const isBooleanSetting =
+  // tslint:disable-next-line:no-any
+  (x: any): x is BooleanSetting => {
+    return !!BooleanSetting[x];
+  };
+
+export function safeBooleanSettting(name: string): BooleanSetting {
+  if (isBooleanSetting(name)) {
+    return name;
+  } else {
+    throw new Error(`Expected BooleanSetting but got '${name}'`);
+  }
+}

webpack/session_keys.ts

@@ -4,7 +4,12 @@ export enum BooleanSetting {
   Z_AXIS_INVERTED = "z_axis_inverted",
   RAW_ENCODERS = "raw_encoders",
   SCALED_ENCODERS = "scaled_encoders",
-  DISABLE_I18N = "disable_i18n"
+  DISABLE_I18N = "disable_i18n",
+  legendMenuOpen = "legendMenuOpen",
+  showPlants = "showPlants",
+  showPoints = "showPoints",
+  showSpread = "showSpread",
+  showFarmbot = "showFarmbot"
 }
 
 export enum NumericSetting {