refactor map zoom

webpack/farm_designer/index.tsx

@@ -63,7 +63,7 @@ export class FarmDesigner extends React.Component<Props, Partial<State>> {
     show_farmbot: this.initializeSetting(BooleanSetting.show_farmbot, true),
     show_images: this.initializeSetting(BooleanSetting.show_images, false),
     bot_origin_quadrant: this.getBotOriginQuadrant(),
-    zoom_level: calcZoomLevel(getZoomLevelIndex())
+    zoom_level: calcZoomLevel(getZoomLevelIndex(this.props.getConfigValue))
   };
 
   componentDidMount() {
@@ -84,9 +84,9 @@ export class FarmDesigner extends React.Component<Props, Partial<State>> {
   }
 
   updateZoomLevel = (zoomIncrement: number) => () => {
-    const newIndex = getZoomLevelIndex() + zoomIncrement;
+    const newIndex = getZoomLevelIndex(this.props.getConfigValue) + zoomIncrement;
     this.setState({ zoom_level: calcZoomLevel(newIndex) });
-    saveZoomLevelIndex(newIndex);
+    saveZoomLevelIndex(this.props.dispatch, newIndex);
   }
 
   childComponent(props: Props) {

webpack/farm_designer/map/__tests__/garden_map_legend_test.tsx

@@ -42,7 +42,8 @@ describe("<GardenMapLegend />", () => {
 describe("<ZoomControls />", () => {
   const expectDisabledBtnCountToEqual = (expected: number) => {
     const wrapper = shallow(<ZoomControls
-      zoom={jest.fn()} />);
+      zoom={jest.fn()}
+      getConfigValue={jest.fn()} />);
     expect(wrapper.find(".disabled").length).toEqual(expected);
   };
 

webpack/farm_designer/map/__tests__/zoom_test.ts

@@ -1,24 +1,18 @@
-let mockZoomValue: number | undefined = 1;
-jest.mock("../../../session", () => {
-  return {
-    Session: {
-      deprecatedGetNum: () => mockZoomValue,
-      deprecatedSetNum: jest.fn()
-    }
-  };
-});
+jest.mock("../../../config_storage/actions", () => ({
+  setWebAppConfigValue: jest.fn()
+}));
 
 import * as ZoomUtils from "../zoom";
-import { Session } from "../../../session";
+import { setWebAppConfigValue } from "../../../config_storage/actions";
 
 describe("zoom utilities", () => {
   it("getZoomLevelIndex()", () => {
-    expect(ZoomUtils.getZoomLevelIndex()).toEqual(9);
+    expect(ZoomUtils.getZoomLevelIndex(() => undefined)).toEqual(9);
   });
 
   it("saveZoomLevelIndex()", () => {
-    ZoomUtils.saveZoomLevelIndex(9);
-    expect(Session.deprecatedSetNum).toHaveBeenCalledWith("zoom_level", 1);
+    ZoomUtils.saveZoomLevelIndex(jest.fn(), 9);
+    expect(setWebAppConfigValue).toHaveBeenCalledWith("zoom_level", 1);
   });
 
   it("calcZoomLevel()", () => {
@@ -26,38 +20,33 @@ describe("zoom utilities", () => {
   });
 
   it("within zoom range", () => {
-    mockZoomValue = 1;
-    expect(ZoomUtils.atMaxZoom()).toBeFalsy();
-    expect(ZoomUtils.atMinZoom()).toBeFalsy();
+    expect(ZoomUtils.atMaxZoom(() => 1)).toBeFalsy();
+    expect(ZoomUtils.atMinZoom(() => 1)).toBeFalsy();
   });
 
   it("at max zoom", () => {
-    mockZoomValue = ZoomUtils.maxZoomLevel;
-    expect(ZoomUtils.atMaxZoom()).toBeTruthy();
-    expect(ZoomUtils.atMinZoom()).toBeFalsy();
+    expect(ZoomUtils.atMaxZoom(() => ZoomUtils.maxZoomLevel)).toBeTruthy();
+    expect(ZoomUtils.atMinZoom(() => ZoomUtils.maxZoomLevel)).toBeFalsy();
   });
 
   it("beyond max zoom", () => {
-    mockZoomValue = 999;
-    const result = ZoomUtils.getZoomLevelIndex();
+    const result = ZoomUtils.getZoomLevelIndex(() => 999);
     expect(result).toEqual(ZoomUtils.maxZoomIndex);
   });
 
   it("at min zoom", () => {
-    mockZoomValue = ZoomUtils.minZoomLevel;
-    expect(ZoomUtils.atMaxZoom()).toBeFalsy();
-    expect(ZoomUtils.atMinZoom()).toBeTruthy();
+    expect(ZoomUtils.atMaxZoom(() => ZoomUtils.minZoomLevel)).toBeFalsy();
+    expect(ZoomUtils.atMinZoom(() => ZoomUtils.minZoomLevel)).toBeTruthy();
   });
 
   it("beyond min zoom", () => {
-    mockZoomValue = -999;
-    const result = ZoomUtils.getZoomLevelIndex();
+    const result = ZoomUtils.getZoomLevelIndex(() => -999);
     expect(result).toEqual(0);
   });
 
   it("at unknown zoom", () => {
-    mockZoomValue = undefined;
-    const defaultZoom = ZoomUtils.calcZoomLevel(ZoomUtils.getZoomLevelIndex());
+    const defaultZoom =
+      ZoomUtils.calcZoomLevel(ZoomUtils.getZoomLevelIndex(() => undefined));
     expect(defaultZoom).toEqual(1);
   });
 });

webpack/farm_designer/map/garden_map_legend.tsx

@@ -9,6 +9,7 @@ import { BugsControls } from "./easter_eggs/bugs";
 import { BotOriginQuadrant } from "../interfaces";
 import { MoveModeLink } from "../plants/move_to";
 import { SavedGardensLink } from "../saved_gardens/saved_gardens";
+import { GetWebAppConfigValue } from "../../config_storage/actions";
 
 const OriginSelector = ({ quadrant, update }: {
   quadrant: BotOriginQuadrant,
@@ -27,9 +28,12 @@ const OriginSelector = ({ quadrant, update }: {
     </div>
   </div>;
 
-export const ZoomControls = ({ zoom }: { zoom: (value: number) => () => void }) => {
-  const plusBtnClass = atMaxZoom() ? "disabled" : "";
-  const minusBtnClass = atMinZoom() ? "disabled" : "";
+export const ZoomControls = ({ zoom, getConfigValue }: {
+  zoom: (value: number) => () => void,
+  getConfigValue: GetWebAppConfigValue
+}) => {
+  const plusBtnClass = atMaxZoom(getConfigValue) ? "disabled" : "";
+  const minusBtnClass = atMinZoom(getConfigValue) ? "disabled" : "";
   return <div className="zoom-buttons">
     <button
       className={"fb-button gray zoom " + plusBtnClass}
@@ -100,7 +104,7 @@ export function GardenMapLegend(props: GardenMapLegendProps) {
       <i className="fa fa-2x fa-arrow-left" />
     </div>
     <div className="content">
-      <ZoomControls zoom={props.zoom} />
+      <ZoomControls zoom={props.zoom} getConfigValue={props.getConfigValue} />
       <LayerToggles {...props} />
       <OriginSelector
         quadrant={props.botOriginQuadrant}

webpack/farm_designer/map/zoom.ts

@@ -1,6 +1,6 @@
-import { Session } from "../../session";
 import { NumericSetting } from "../../session_keys";
 import { findIndex, isNumber, clamp } from "lodash";
+import { setWebAppConfigValue, GetWebAppConfigValue } from "../../config_storage/actions";
 
 /**
  * Map Zoom Level utilities
@@ -21,26 +21,26 @@ const clampZoom = (index: number): number => clamp(index, 0, maxZoomIndex);
 export const maxZoomLevel = zoomLevelsCount - zoomLevel1Index;
 export const minZoomLevel = 1 - zoomLevel1Index;
 
-export function atMaxZoom(): boolean {
-  return getZoomLevelIndex() >= maxZoomIndex;
+export function atMaxZoom(getConfigValue: GetWebAppConfigValue): boolean {
+  return getZoomLevelIndex(getConfigValue) >= maxZoomIndex;
 }
 
-export function atMinZoom(): boolean {
-  return getZoomLevelIndex() <= 0;
+export function atMinZoom(getConfigValue: GetWebAppConfigValue): boolean {
+  return getZoomLevelIndex(getConfigValue) <= 0;
 }
 
 /* Load the index of a saved zoom level. */
-export function getZoomLevelIndex(): number {
-  const savedValue = Session.deprecatedGetNum(NumericSetting.zoom_level);
+export function getZoomLevelIndex(getConfigValue: GetWebAppConfigValue): number {
+  const savedValue = getConfigValue(NumericSetting.zoom_level);
   if (!isNumber(savedValue)) { return zoomLevel1Index; }
   const zoomLevelIndex = savedValue + zoomLevel1Index - 1;
   return clampZoom(zoomLevelIndex);
 }
 
 /* Save a zoom level index. */
-export function saveZoomLevelIndex(index: number) {
+export function saveZoomLevelIndex(dispatch: Function, index: number) {
   const payload = index - zoomLevel1Index + 1;
-  Session.deprecatedSetNum(NumericSetting.zoom_level, payload);
+  dispatch(setWebAppConfigValue(NumericSetting.zoom_level, payload));
 }
 
 /* Calculate map zoom level from a zoom level index. */