👏 Remove old react-redux hacks

frontend/__tests__/app_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 let mockPath = "";
 jest.mock("../history", () => ({

frontend/account/__tests__/index_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 jest.mock("../labs/labs_features", () => ({ LabsFeatures: () => <div /> }));
 
 import * as React from "react";

frontend/account/index.tsx

@@ -27,8 +27,7 @@ interface State {
   warnThem: boolean;
 }
 
-@connect(mapStateToProps)
-export class Account extends React.Component<Props, State> {
+export class RawAccount extends React.Component<Props, State> {
   state: State = { warnThem: false };
 
   /** WHAT WE NEED: The ability to tell users to check their email if they try
@@ -113,3 +112,5 @@ export class Account extends React.Component<Props, State> {
     </Page>;
   }
 }
+
+export const Account = connect(mapStateToProps)(RawAccount);

frontend/app.tsx

@@ -97,8 +97,7 @@ const MUST_LOAD: ResourceName[] = [
   "Tool" // Sequence editor needs this for rendering.
 ];
 
-@connect(mapStateToProps)
-export class App extends React.Component<AppProps, {}> {
+export class RawApp extends React.Component<AppProps, {}> {
   private get isLoaded() {
     return (MUST_LOAD.length ===
       intersection(this.props.loaded, MUST_LOAD).length);
@@ -152,3 +151,5 @@ export class App extends React.Component<AppProps, {}> {
     </div>;
   }
 }
+
+export const App = connect(mapStateToProps)(RawApp);

frontend/connectivity/__tests__/connect_device/connect_device_test.ts

@@ -10,7 +10,7 @@ import { DeepPartial } from "redux";
 import { AuthState } from "../../../auth/interfaces";
 import { fakeState } from "../../../__test_support__/fake_state";
 
-describe("connectDevice()", async () => {
+describe("connectDevice()", () => {
   it("connects a FarmBot to the network", async () => {
     const auth: DeepPartial<AuthState> = { token: {} };
     const dispatch = jest.fn();

frontend/connectivity/ping_mqtt.tsx

@@ -41,7 +41,7 @@ export function sendOutboundPing(bot: Farmbot) {
       if (!x.done) {
         x.done = true;
         pingNO(id, now());
-        reject();
+        reject(new Error("sendOutboundPing failed: " + id));
       }
     };
 
@@ -51,9 +51,12 @@ export function sendOutboundPing(bot: Farmbot) {
   });
 }
 
+const beep = (bot: Farmbot) => sendOutboundPing(bot)
+  .then(() => { }, () => { }); // Silence errors;
+
 export function startPinging(bot: Farmbot) {
-  sendOutboundPing(bot);
-  setInterval(() => sendOutboundPing(bot), PING_INTERVAL);
+  beep(bot);
+  setInterval(() => beep(bot), PING_INTERVAL);
 }
 
 export function pingAPI() {

frontend/controls/__tests__/controls_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 import * as React from "react";
 import { mount } from "enzyme";

frontend/controls/controls.tsx

@@ -12,8 +12,7 @@ import { SensorReadings } from "./sensor_readings/sensor_readings";
 import { isBotOnline } from "../devices/must_be_online";
 
 /** Controls page. */
-@connect(mapStateToProps)
-export class Controls extends React.Component<Props, {}> {
+export class RawControls extends React.Component<Props, {}> {
   get arduinoBusy() {
     return !!this.props.bot.hardware.informational_settings.busy;
   }
@@ -92,3 +91,5 @@ export class Controls extends React.Component<Props, {}> {
     </Page>;
   }
 }
+
+export const Controls = connect(mapStateToProps)(RawControls);

frontend/devices/__tests__/devices_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 import * as React from "react";
 import { shallow, render } from "enzyme";

frontend/devices/components/__tests__/farmbot_os_settings_test.tsx

@@ -1,3 +1,5 @@
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
+
 let mockReleaseNoteData = {};
 jest.mock("axios", () => ({
   get: jest.fn(() => Promise.resolve(mockReleaseNoteData))

frontend/devices/components/farmbot_os_settings.tsx

@@ -106,7 +106,7 @@ export class FarmbotOsSettings
               </label>
             </Col>
             <Col xs={9}>
-              <BootSequenceSelector {...({} as BootSequenceSelector["props"])} />
+              <BootSequenceSelector />
             </Col>
           </Row>
           <Row>

frontend/devices/components/fbos_settings/boot_sequence_selector.tsx

@@ -11,7 +11,7 @@ interface Props {
   dispatch: Function;
 }
 
-function mapStateToProps(p: Everything) {
+function mapStateToProps(p: Everything): Props {
   const { index } = p.resources;
   const fbosConfig = getFbosConfig(index);
   if (fbosConfig) {
@@ -25,10 +25,11 @@ function mapStateToProps(p: Everything) {
   }
 }
 
-@connect(mapStateToProps)
-export class BootSequenceSelector extends React.Component<Props, {}> {
-
+export class DisconnectedBootSequenceSelector extends React.Component<Props, {}> {
   render() {
     return <div> Ey... </div>;
   }
 }
+
+export const BootSequenceSelector =
+  connect(mapStateToProps)(DisconnectedBootSequenceSelector);

frontend/devices/devices.tsx

@@ -10,8 +10,7 @@ import { selectAllDiagnosticDumps } from "../resources/selectors";
 import { getStatus } from "../connectivity/reducer_support";
 import { isFwHardwareValue } from "./components/firmware_hardware_support";
 
-@connect(mapStateToProps)
-export class Devices extends React.Component<Props, {}> {
+export class RawDevices extends React.Component<Props, {}> {
   render() {
     if (this.props.auth) {
       const { botToMqtt } = this.props;
@@ -61,3 +60,5 @@ export class Devices extends React.Component<Props, {}> {
     }
   }
 }
+
+export const Devices = connect(mapStateToProps)(RawDevices);

frontend/farm_designer/__tests__/farm_designer_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 let mockPath = "/app/designer/plants";
 jest.mock("../../history", () => ({
@@ -12,7 +12,7 @@ jest.mock("../../api/crud", () => ({
 }));
 
 import * as React from "react";
-import { FarmDesigner } from "../index";
+import { RawFarmDesigner } from "../index";
 import { mount } from "enzyme";
 import { Props } from "../interfaces";
 import { GardenMapLegendProps } from "../map/interfaces";
@@ -27,7 +27,7 @@ import { fakeState } from "../../__test_support__/fake_state";
 import { edit } from "../../api/crud";
 import { BooleanSetting } from "../../session_keys";
 
-describe("<FarmDesigner/>", () => {
+describe("<RawFarmDesigner/>", () => {
   function fakeProps(): Props {
 
     return {
@@ -63,7 +63,7 @@ describe("<FarmDesigner/>", () => {
   }
 
   it("loads default map settings", () => {
-    const wrapper = mount(<FarmDesigner {...fakeProps()} />);
+    const wrapper = mount(<RawFarmDesigner {...fakeProps()} />);
     const legendProps =
       wrapper.find("GardenMapLegend").props() as GardenMapLegendProps;
     expect(legendProps.legendMenuOpen).toBeFalsy();
@@ -86,7 +86,7 @@ describe("<FarmDesigner/>", () => {
     image1.body.created_at = "2001-01-03T00:00:00.000Z";
     image2.body.created_at = "2001-01-01T00:00:00.000Z";
     p.latestImages = [image1, image2];
-    const wrapper = mount(<FarmDesigner {...p} />);
+    const wrapper = mount(<RawFarmDesigner {...p} />);
     const legendProps =
       wrapper.find("GardenMapLegend").props() as GardenMapLegendProps;
     expect(legendProps.imageAgeInfo)
@@ -95,7 +95,7 @@ describe("<FarmDesigner/>", () => {
 
   it("renders nav titles", () => {
     mockPath = "/app/designer/plants";
-    const wrapper = mount(<FarmDesigner {...fakeProps()} />);
+    const wrapper = mount(<RawFarmDesigner {...fakeProps()} />);
     ["Map", "Plants", "Events"].map(string =>
       expect(wrapper.text()).toContain(string));
     expect(wrapper.find(".panel-nav").first().hasClass("hidden")).toBeTruthy();
@@ -105,7 +105,7 @@ describe("<FarmDesigner/>", () => {
 
   it("hides panel", () => {
     mockPath = "/app/designer";
-    const wrapper = mount(<FarmDesigner {...fakeProps()} />);
+    const wrapper = mount(<RawFarmDesigner {...fakeProps()} />);
     ["Map", "Plants", "Events"].map(string =>
       expect(wrapper.text()).toContain(string));
     expect(wrapper.find(".panel-nav").first().hasClass("hidden")).toBeFalsy();
@@ -116,7 +116,7 @@ describe("<FarmDesigner/>", () => {
   it("renders saved garden indicator", () => {
     const p = fakeProps();
     p.designer.openedSavedGarden = "SavedGardenUuid";
-    const wrapper = mount(<FarmDesigner {...p} />);
+    const wrapper = mount(<RawFarmDesigner {...p} />);
     expect(wrapper.text().toLowerCase()).toContain("viewing saved garden");
   });
 
@@ -126,7 +126,7 @@ describe("<FarmDesigner/>", () => {
     const dispatch = jest.fn();
     state.resources = buildResourceIndex([fakeWebAppConfig()]);
     p.dispatch = jest.fn(x => x(dispatch, () => state));
-    const wrapper = mount<FarmDesigner>(<FarmDesigner {...p} />);
+    const wrapper = mount<RawFarmDesigner>(<RawFarmDesigner {...p} />);
     wrapper.instance().toggle(BooleanSetting.show_plants)();
     expect(edit).toHaveBeenCalledWith(expect.any(Object), { bot_origin_quadrant: 2 });
   });

frontend/farm_designer/__tests__/move_to_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 const mockDevice = { moveAbsolute: jest.fn(() => Promise.resolve()) };
 jest.mock("../../device", () => ({ getDevice: () => mockDevice }));

frontend/farm_designer/__tests__/settings_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 jest.mock("../../config_storage/actions", () => ({
   getWebAppConfigValue: jest.fn(x => { x(); return jest.fn(() => true); }),
@@ -8,7 +8,7 @@ jest.mock("../../config_storage/actions", () => ({
 import * as React from "react";
 import { mount, ReactWrapper } from "enzyme";
 import {
-  DesignerSettings, DesignerSettingsProps, mapStateToProps
+  RawDesignerSettings, DesignerSettingsProps, mapStateToProps
 } from "../settings";
 import { fakeState } from "../../__test_support__/fake_state";
 import { BooleanSetting, NumericSetting } from "../../session_keys";
@@ -22,14 +22,14 @@ const getSetting =
     return setting;
   };
 
-describe("<DesignerSettings />", () => {
+describe("<RawDesignerSettings />", () => {
   const fakeProps = (): DesignerSettingsProps => ({
     dispatch: jest.fn(),
     getConfigValue: jest.fn(),
   });
 
   it("renders settings", () => {
-    const wrapper = mount(<DesignerSettings {...fakeProps()} />);
+    const wrapper = mount(<RawDesignerSettings {...fakeProps()} />);
     expect(wrapper.text()).toContain("size");
     const settings = wrapper.find(".designer-setting");
     expect(settings.length).toEqual(7);
@@ -38,13 +38,13 @@ describe("<DesignerSettings />", () => {
   it("renders defaultOn setting", () => {
     const p = fakeProps();
     p.getConfigValue = () => undefined;
-    const wrapper = mount(<DesignerSettings {...p} />);
+    const wrapper = mount(<RawDesignerSettings {...p} />);
     const confirmDeletion = getSetting(wrapper, 6, "confirm plant");
     expect(confirmDeletion.find("button").text()).toEqual("on");
   });
 
   it("toggles setting", () => {
-    const wrapper = mount(<DesignerSettings {...fakeProps()} />);
+    const wrapper = mount(<RawDesignerSettings {...fakeProps()} />);
     const trailSetting = getSetting(wrapper, 1, "trail");
     trailSetting.find("button").simulate("click");
     expect(setWebAppConfigValue)
@@ -54,7 +54,7 @@ describe("<DesignerSettings />", () => {
   it("changes origin", () => {
     const p = fakeProps();
     p.getConfigValue = () => 2;
-    const wrapper = mount(<DesignerSettings {...p} />);
+    const wrapper = mount(<RawDesignerSettings {...p} />);
     const originSetting = getSetting(wrapper, 5, "origin");
     originSetting.find("div").last().simulate("click");
     expect(setWebAppConfigValue).toHaveBeenCalledWith(

frontend/farm_designer/farm_events/__tests__/add_farm_event_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 jest.mock("../../../history", () => ({ history: { push: jest.fn() } }));
 

frontend/farm_designer/farm_events/__tests__/edit_farm_event_test.tsx

@@ -1,5 +1,5 @@
 jest.mock("react-redux", () => ({
-  connect: jest.fn()
+  connect: jest.fn(() => (x: {}) => x)
 }));
 
 jest.mock("../../../history", () => ({

frontend/farm_designer/farm_events/add_farm_event.tsx

@@ -22,8 +22,7 @@ interface State {
   uuid: string;
 }
 
-@connect(mapStateToPropsAddEdit)
-export class AddFarmEvent
+export class RawAddFarmEvent
   extends React.Component<AddEditFarmEventProps, Partial<State>> {
 
   constructor(props: AddEditFarmEventProps) {
@@ -122,3 +121,5 @@ export class AddFarmEvent
     }
   }
 }
+
+export const AddFarmEvent = connect(mapStateToPropsAddEdit)(RawAddFarmEvent);

frontend/farm_designer/farm_events/edit_farm_event.tsx

@@ -7,8 +7,7 @@ import { TaggedFarmEvent } from "farmbot";
 import { EditFEForm } from "./edit_fe_form";
 import { t } from "../../i18next_wrapper";
 
-@connect(mapStateToPropsAddEdit)
-export class EditFarmEvent extends React.Component<AddEditFarmEventProps, {}> {
+export class RawEditFarmEvent extends React.Component<AddEditFarmEventProps, {}> {
   redirect() {
     history.push("/app/designer/events");
     return <div>{t("Loading")}...</div>;
@@ -34,3 +33,5 @@ export class EditFarmEvent extends React.Component<AddEditFarmEventProps, {}> {
     return fe ? this.renderForm(fe) : this.redirect();
   }
 }
+
+export const EditFarmEvent = connect(mapStateToPropsAddEdit)(RawEditFarmEvent);

frontend/farm_designer/index.tsx

@@ -45,8 +45,7 @@ export const getGridSize =
 
 export const gridOffset: AxisNumberProperty = { x: 50, y: 50 };
 
-@connect(mapStateToProps)
-export class FarmDesigner extends React.Component<Props, Partial<State>> {
+export class RawFarmDesigner extends React.Component<Props, Partial<State>> {
 
   initializeSetting =
     (name: keyof State, defaultValue: boolean): boolean => {
@@ -201,3 +200,5 @@ export class FarmDesigner extends React.Component<Props, Partial<State>> {
     </div>;
   }
 }
+
+export const FarmDesigner = connect(mapStateToProps)(RawFarmDesigner);

frontend/farm_designer/move_to.tsx

@@ -99,8 +99,7 @@ export class MoveToForm extends React.Component<MoveToFormProps, MoveToFormState
   }
 }
 
-@connect(mapStateToProps)
-export class MoveTo extends React.Component<MoveToProps, {}> {
+export class RawMoveTo extends React.Component<MoveToProps, {}> {
 
   componentDidMount() {
     unselectPlant(this.props.dispatch)();
@@ -153,3 +152,5 @@ export const chooseLocation = (props: {
     });
   }
 };
+
+export const MoveTo = connect(mapStateToProps)(RawMoveTo);

frontend/farm_designer/plants/__tests__/add_plant_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 let mockPath = "";
 jest.mock("../../../history", () => ({

frontend/farm_designer/plants/__tests__/create_points_test.tsx

@@ -1,5 +1,5 @@
 jest.mock("react-redux", () => ({
-  connect: jest.fn()
+  connect: jest.fn(() => (x: {}) => x)
 }));
 
 jest.mock("../../../api/crud", () => ({
@@ -13,7 +13,7 @@ jest.mock("../../../farmware/weed_detector/actions", () => ({
 import * as React from "react";
 import { mount, shallow } from "enzyme";
 import {
-  CreatePoints,
+  RawCreatePoints as CreatePoints,
   CreatePointsProps,
   mapStateToProps
 } from "../create_points";

frontend/farm_designer/plants/__tests__/crop_catalog_test.tsx

@@ -1,5 +1,5 @@
 jest.mock("react-redux", () => ({
-  connect: jest.fn()
+  connect: jest.fn(() => (x: {}) => x)
 }));
 
 jest.mock("lodash", () => ({

frontend/farm_designer/plants/__tests__/crop_info_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 let mockPath = "";
 jest.mock("../../../history", () => ({

frontend/farm_designer/plants/__tests__/plant_info_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 let mockPath = "/app/designer/plants/1";
 jest.mock("../../../history", () => ({
@@ -13,7 +13,7 @@ jest.mock("../../../api/crud", () => ({
 }));
 
 import * as React from "react";
-import { PlantInfo } from "../plant_info";
+import { RawPlantInfo as PlantInfo } from "../plant_info";
 import { mount } from "enzyme";
 import { fakePlant } from "../../../__test_support__/fake_state/resources";
 import { EditPlantInfoProps } from "../../interfaces";

frontend/farm_designer/plants/__tests__/plant_inventory_test.tsx

@@ -1,7 +1,7 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 import * as React from "react";
-import { Plants, PlantInventoryProps } from "../plant_inventory";
+import { RawPlants, PlantInventoryProps } from "../plant_inventory";
 import { mount, shallow } from "enzyme";
 import { fakePlant } from "../../../__test_support__/fake_state/resources";
 
@@ -13,7 +13,7 @@ describe("<PlantInventory />", () => {
   });
 
   it("renders", () => {
-    const wrapper = mount(<Plants {...fakeProps()} />);
+    const wrapper = mount(<RawPlants {...fakeProps()} />);
     ["Map",
       "Plants",
       "Events",
@@ -25,13 +25,13 @@ describe("<PlantInventory />", () => {
   });
 
   it("has link to crops", () => {
-    const wrapper = mount(<Plants {...fakeProps()} />);
+    const wrapper = mount(<RawPlants {...fakeProps()} />);
     expect(wrapper.html()).toContain("fa-plus");
     expect(wrapper.html()).toContain("/app/designer/plants/crop_search");
   });
 
   it("updates search term", () => {
-    const wrapper = shallow<Plants>(<Plants {...fakeProps()} />);
+    const wrapper = shallow<RawPlants>(<RawPlants {...fakeProps()} />);
     expect(wrapper.state().searchTerm).toEqual("");
     wrapper.find("input").first().simulate("change",
       { currentTarget: { value: "mint" } });

frontend/farm_designer/plants/__tests__/point_info_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 let mockPath = "/app/designer/points/1";
 jest.mock("../../../history", () => ({

frontend/farm_designer/plants/__tests__/point_inventory_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 jest.mock("../../../history", () => ({
   push: jest.fn(),
@@ -7,7 +7,7 @@ jest.mock("../../../history", () => ({
 
 import * as React from "react";
 import { mount, shallow } from "enzyme";
-import { Points, PointsProps } from "../point_inventory";
+import { RawPoints, PointsProps } from "../point_inventory";
 import { fakePoint } from "../../../__test_support__/fake_state/resources";
 import { push } from "../../../history";
 import { fakeState } from "../../../__test_support__/fake_state";
@@ -16,21 +16,21 @@ import {
 } from "../../../__test_support__/resource_index_builder";
 import { mapStateToProps } from "../point_inventory";
 
-describe("<Points />", () => {
+describe("<RawPoints> />", () => {
   const fakeProps = (): PointsProps => ({
     points: [],
     dispatch: jest.fn(),
   });
 
   it("renders no points", () => {
-    const wrapper = mount(<Points {...fakeProps()} />);
+    const wrapper = mount(<RawPoints {...fakeProps()} />);
     expect(wrapper.text()).toContain("No points yet.");
   });
 
   it("renders points", () => {
     const p = fakeProps();
     p.points = [fakePoint()];
-    const wrapper = mount(<Points {...p} />);
+    const wrapper = mount(<RawPoints {...p} />);
     expect(wrapper.text()).toContain("Point 1");
   });
 
@@ -38,7 +38,7 @@ describe("<Points />", () => {
     const p = fakeProps();
     p.points = [fakePoint()];
     p.points[0].body.id = 1;
-    const wrapper = mount(<Points {...p} />);
+    const wrapper = mount(<RawPoints {...p} />);
     wrapper.find(".point-search-item").first().simulate("click");
     expect(push).toHaveBeenCalledWith("/app/designer/points/1");
   });
@@ -48,7 +48,7 @@ describe("<Points />", () => {
     p.points = [fakePoint(), fakePoint()];
     p.points[0].body.name = "point 0";
     p.points[1].body.name = "point 1";
-    const wrapper = shallow<Points>(<Points {...p} />);
+    const wrapper = shallow<RawPoints>(<RawPoints {...p} />);
     wrapper.find("input").first().simulate("change",
       { currentTarget: { value: "0" } });
     expect(wrapper.state().searchTerm).toEqual("0");
@@ -59,7 +59,7 @@ describe("<Points />", () => {
     p.points = [fakePoint(), fakePoint()];
     p.points[0].body.name = "point 0";
     p.points[1].body.name = "point 1";
-    const wrapper = mount(<Points {...p} />);
+    const wrapper = mount(<RawPoints {...p} />);
     wrapper.setState({ searchTerm: "0" });
     expect(wrapper.text()).not.toContain("point 1");
   });

frontend/farm_designer/plants/__tests__/select_plants_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 let mockPath = "";
 jest.mock("../../../history", () => ({

frontend/farm_designer/plants/add_plant.tsx

@@ -42,8 +42,7 @@ export interface AddPlantProps {
   openfarmSearch: OpenfarmSearch;
 }
 
-@connect(mapStateToProps)
-export class AddPlant extends React.Component<AddPlantProps, {}> {
+export class RawAddPlant extends React.Component<AddPlantProps, {}> {
 
   componentDidMount() {
     this.props.dispatch(searchForCurrentCrop(this.props.openfarmSearch));
@@ -72,3 +71,5 @@ export class AddPlant extends React.Component<AddPlantProps, {}> {
     </DesignerPanel>;
   }
 }
+
+export const AddPlant = connect(mapStateToProps)(RawAddPlant);

frontend/farm_designer/plants/create_points.tsx

@@ -50,8 +50,7 @@ const DEFAULTS: CurrentPointPayl = {
   color: "red"
 };
 
-@connect(mapStateToProps)
-export class CreatePoints
+export class RawCreatePoints
   extends React.Component<CreatePointsProps, Partial<CreatePointsState>> {
   constructor(props: CreatePointsProps) {
     super(props);
@@ -250,3 +249,5 @@ export class CreatePoints
     </DesignerPanel>;
   }
 }
+
+export const CreatePoints = connect(mapStateToProps)(RawCreatePoints);

frontend/farm_designer/plants/crop_catalog.tsx

@@ -28,8 +28,7 @@ export function mapStateToProps(props: Everything): CropCatalogProps {
   };
 }
 
-@connect(mapStateToProps)
-export class CropCatalog extends React.Component<CropCatalogProps, {}> {
+export class RawCropCatalog extends React.Component<CropCatalogProps, {}> {
 
   debouncedOFSearch = debounce((searchTerm: string) => {
     this.props.openfarmSearch(searchTerm)(this.props.dispatch);
@@ -99,3 +98,5 @@ export class CropCatalog extends React.Component<CropCatalogProps, {}> {
     </DesignerPanel>;
   }
 }
+
+export const CropCatalog = connect(mapStateToProps)(RawCropCatalog);

frontend/farm_designer/plants/crop_info.tsx

@@ -219,8 +219,7 @@ export const searchForCurrentCrop = (openfarmSearch: OpenfarmSearch) =>
     unselectPlant(dispatch)();
   };
 
-@connect(mapStateToProps)
-export class CropInfo extends React.Component<CropInfoProps, {}> {
+export class RawCropInfo extends React.Component<CropInfoProps, {}> {
 
   componentDidMount() {
     this.props.dispatch(searchForCurrentCrop(this.props.openfarmSearch));
@@ -270,3 +269,5 @@ export class CropInfo extends React.Component<CropInfoProps, {}> {
     </DesignerPanel>;
   }
 }
+
+export const CropInfo = connect(mapStateToProps)(RawCropInfo);

frontend/farm_designer/plants/plant_info.tsx

@@ -12,8 +12,7 @@ import { history, getPathArray } from "../../history";
 import { destroy, edit, save } from "../../api/crud";
 import { BooleanSetting } from "../../session_keys";
 
-@connect(mapStateToProps)
-export class PlantInfo extends React.Component<EditPlantInfoProps, {}> {
+export class RawPlantInfo extends React.Component<EditPlantInfoProps, {}> {
   get templates() { return isString(this.props.openedSavedGarden); }
   get stringyID() { return getPathArray()[this.templates ? 5 : 4] || ""; }
   get plant() { return this.props.findPlant(this.stringyID); }
@@ -64,3 +63,5 @@ export class PlantInfo extends React.Component<EditPlantInfoProps, {}> {
     return plant_info ? this.default(plant_info) : this.fallback();
   }
 }
+
+export const PlantInfo = connect(mapStateToProps)(RawPlantInfo);

frontend/farm_designer/plants/plant_inventory.tsx

@@ -34,8 +34,7 @@ function mapStateToProps(props: Everything): PlantInventoryProps {
   };
 }
 
-@connect(mapStateToProps)
-export class Plants extends React.Component<PlantInventoryProps, State> {
+export class RawPlants extends React.Component<PlantInventoryProps, State> {
 
   state: State = { searchTerm: "" };
 
@@ -72,3 +71,5 @@ export class Plants extends React.Component<PlantInventoryProps, State> {
     </DesignerPanel>;
   }
 }
+
+export const Plants = connect(mapStateToProps)(RawPlants);

frontend/farm_designer/plants/point_info.tsx

@@ -24,8 +24,7 @@ export const mapStateToProps = (props: Everything): EditPointProps => ({
   findPoint: id => maybeFindPointById(props.resources.index, id),
 });
 
-@connect(mapStateToProps)
-export class EditPoint extends React.Component<EditPointProps, {}> {
+export class RawEditPoint extends React.Component<EditPointProps, {}> {
   get stringyID() { return getPathArray()[4] || ""; }
   get point() {
     if (this.stringyID) {
@@ -84,3 +83,5 @@ export class EditPoint extends React.Component<EditPointProps, {}> {
     return this.point ? this.default(this.point) : this.fallback();
   }
 }
+
+export const EditPoint = connect(mapStateToProps)(RawEditPoint);

frontend/farm_designer/plants/point_inventory.tsx

@@ -31,9 +31,7 @@ export function mapStateToProps(props: Everything): PointsProps {
   };
 }
 
-@connect(mapStateToProps)
-export class Points extends React.Component<PointsProps, PointsState> {
-
+export class RawPoints extends React.Component<PointsProps, PointsState> {
   state: PointsState = { searchTerm: "" };
 
   update = ({ currentTarget }: React.SyntheticEvent<HTMLInputElement>) => {
@@ -71,3 +69,5 @@ export class Points extends React.Component<PointsProps, PointsState> {
     </DesignerPanel>;
   }
 }
+
+export const Points = connect(mapStateToProps)(RawPoints);

frontend/farm_designer/plants/select_plants.tsx

@@ -29,10 +29,7 @@ export interface SelectPlantsProps {
   selected: string[];
 }
 
-@connect(mapStateToProps)
-export class SelectPlants
-  extends React.Component<SelectPlantsProps, {}> {
-
+export class RawSelectPlants extends React.Component<SelectPlantsProps, {}> {
   componentDidMount() {
     const { dispatch, selected } = this.props;
     if (selected && selected.length == 1) {
@@ -116,3 +113,5 @@ export class SelectPlants
     </DesignerPanel>;
   }
 }
+
+export const SelectPlants = connect(mapStateToProps)(RawSelectPlants);

frontend/farm_designer/point_groups/__tests__/group_detail_test.tsx

@@ -45,7 +45,7 @@ describe("<GroupDetail />", () => {
     mockId = -23;
     const store = fakeStore();
     const el = mount(<Provider store={store}>
-      <GroupDetail {...({} as GroupDetail["props"])} />
+      <GroupDetail />
     </Provider>);
     const result = el.find(GroupDetailActive);
     expect(result.length).toEqual(0);
@@ -56,7 +56,7 @@ describe("<GroupDetail />", () => {
     mockId = GOOD_ID;
     const store = fakeStore();
     const el = mount(<Provider store={store}>
-      <GroupDetail {...({} as GroupDetail["props"])} />
+      <GroupDetail />
     </Provider>);
     const result = el.find(GroupDetailActive);
     expect(result.length).toEqual(1);

frontend/farm_designer/point_groups/__tests__/group_list_panel_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 jest.mock("../../../history", () => ({
   getPathArray: jest.fn(() => ["L", "O", "L"]),
@@ -7,7 +7,7 @@ jest.mock("../../../history", () => ({
 
 import React from "react";
 import { mount, shallow } from "enzyme";
-import { GroupListPanel, GroupListPanelProps, mapStateToProps } from "../group_list_panel";
+import { RawGroupListPanel as GroupListPanel, GroupListPanelProps, mapStateToProps } from "../group_list_panel";
 import { fakePointGroup } from "../../../__test_support__/fake_state/resources";
 import { history } from "../../../history";
 import { fakeState } from "../../../__test_support__/fake_state";

frontend/farm_designer/point_groups/group_detail.tsx

@@ -53,8 +53,7 @@ function mapStateToProps(props: Everything): GroupDetailProps {
   return { plants, group, dispatch: props.dispatch };
 }
 
-@connect(mapStateToProps)
-export class GroupDetail extends React.Component<GroupDetailProps, {}> {
+export class RawGroupDetail extends React.Component<GroupDetailProps, {}> {
 
   render() {
     const { group } = this.props;
@@ -66,3 +65,4 @@ export class GroupDetail extends React.Component<GroupDetailProps, {}> {
     }
   }
 }
+export const GroupDetail = connect(mapStateToProps)(RawGroupDetail);

frontend/farm_designer/point_groups/group_list_panel.tsx

@@ -28,8 +28,7 @@ export function mapStateToProps(props: Everything): GroupListPanelProps {
   return { groups, dispatch: props.dispatch };
 }
 
-@connect(mapStateToProps)
-export class GroupListPanel extends React.Component<GroupListPanelProps, State> {
+export class RawGroupListPanel extends React.Component<GroupListPanelProps, State> {
 
   state: State = { searchTerm: "" };
 
@@ -72,3 +71,5 @@ export class GroupListPanel extends React.Component<GroupListPanelProps, State>
     </DesignerPanel>;
   }
 }
+
+export const GroupListPanel = connect(mapStateToProps)(RawGroupListPanel);

frontend/farm_designer/saved_gardens/__tests__/saved_gardens_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 jest.mock("../actions", () => ({
   snapshotGarden: jest.fn(),

frontend/farm_designer/saved_gardens/saved_gardens.tsx

@@ -28,8 +28,7 @@ export const mapStateToProps = (props: Everything): SavedGardensProps => ({
   openedSavedGarden: props.resources.consumers.farm_designer.openedSavedGarden,
 });
 
-@connect(mapStateToProps)
-export class SavedGardens extends React.Component<SavedGardensProps, {}> {
+export class RawSavedGardens extends React.Component<SavedGardensProps, {}> {
 
   componentDidMount() {
     unselectPlant(this.props.dispatch)();
@@ -104,3 +103,5 @@ export const SavedGardenHUD = (props: { dispatch: Function }) =>
       {t("Exit")}
     </button>
   </div>;
+
+export const SavedGardens = connect(mapStateToProps)(RawSavedGardens);

frontend/farm_designer/settings.tsx

@@ -26,8 +26,7 @@ export interface DesignerSettingsProps {
   getConfigValue: GetWebAppConfigValue;
 }
 
-@connect(mapStateToProps)
-export class DesignerSettings
+export class RawDesignerSettings
   extends React.Component<DesignerSettingsProps, {}> {
 
   render() {
@@ -142,3 +141,5 @@ const OriginSelector = (props: DesignerSettingsProps) => {
     </div>
   </div>;
 };
+
+export const DesignerSettings = connect(mapStateToProps)(RawDesignerSettings);

frontend/farm_designer/tools/__tests__/add_tool_test.tsx

@@ -1,10 +1,10 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 jest.mock("../../../api/crud", () => ({ initSave: jest.fn() }));
 
 import * as React from "react";
 import { mount, shallow } from "enzyme";
-import { AddTool, AddToolProps, mapStateToProps } from "../add_tool";
+import { RawAddTool as AddTool, AddToolProps, mapStateToProps } from "../add_tool";
 import { fakeState } from "../../../__test_support__/fake_state";
 import { SaveBtn } from "../../../ui";
 import { initSave } from "../../../api/crud";

frontend/farm_designer/tools/__tests__/edit_tool_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 jest.mock("../../../api/crud", () => ({ edit: jest.fn() }));
 
@@ -9,7 +9,7 @@ jest.mock("../../../history", () => ({
 
 import * as React from "react";
 import { mount, shallow } from "enzyme";
-import { EditTool, EditToolProps, mapStateToProps } from "../edit_tool";
+import { RawEditTool as EditTool, EditToolProps, mapStateToProps } from "../edit_tool";
 import { fakeTool } from "../../../__test_support__/fake_state/resources";
 import { fakeState } from "../../../__test_support__/fake_state";
 import {

frontend/farm_designer/tools/__tests__/index_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 jest.mock("../../../history", () => ({
   history: { push: jest.fn() },
@@ -7,7 +7,7 @@ jest.mock("../../../history", () => ({
 
 import * as React from "react";
 import { mount, shallow } from "enzyme";
-import { Tools, ToolsProps, mapStateToProps } from "../index";
+import { RawTools as Tools, ToolsProps, mapStateToProps } from "../index";
 import {
   fakeTool, fakeToolSlot
 } from "../../../__test_support__/fake_state/resources";

frontend/farm_designer/tools/add_tool.tsx

@@ -21,8 +21,7 @@ export const mapStateToProps = (props: Everything): AddToolProps => ({
   dispatch: props.dispatch,
 });
 
-@connect(mapStateToProps)
-export class AddTool extends React.Component<AddToolProps, AddToolState> {
+export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
   state: AddToolState = { toolName: "" };
   render() {
     return <DesignerPanel panelName={"tool"} panelColor={"gray"}>
@@ -43,3 +42,5 @@ export class AddTool extends React.Component<AddToolProps, AddToolState> {
     </DesignerPanel>;
   }
 }
+
+export const AddTool = connect(mapStateToProps)(RawAddTool);

frontend/farm_designer/tools/edit_tool.tsx

@@ -27,8 +27,7 @@ export const mapStateToProps = (props: Everything): EditToolProps => ({
   dispatch: props.dispatch,
 });
 
-@connect(mapStateToProps)
-export class EditTool extends React.Component<EditToolProps, EditToolState> {
+export class RawEditTool extends React.Component<EditToolProps, EditToolState> {
   state: EditToolState = { toolName: this.tool ? this.tool.body.name || "" : "" };
 
   get stringyID() { return getPathArray()[4] || ""; }
@@ -65,3 +64,5 @@ export class EditTool extends React.Component<EditToolProps, EditToolState> {
     return this.tool ? this.default(this.tool) : this.fallback();
   }
 }
+
+export const EditTool = connect(mapStateToProps)(RawEditTool);

frontend/farm_designer/tools/index.tsx

@@ -34,8 +34,7 @@ export const mapStateToProps = (props: Everything): ToolsProps => ({
   dispatch: props.dispatch,
 });
 
-@connect(mapStateToProps)
-export class Tools extends React.Component<ToolsProps, ToolsState> {
+export class RawTools extends React.Component<ToolsProps, ToolsState> {
   state: ToolsState = { searchTerm: "" };
 
   update = ({ currentTarget }: React.SyntheticEvent<HTMLInputElement>) => {
@@ -125,3 +124,5 @@ const ToolInventoryItem = (props: ToolInventoryItemProps) =>
       </p>
     </Col>
   </Row>;
+
+export const Tools = connect(mapStateToProps)(RawTools);

frontend/farmware/__tests__/farmware_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 const mockDevice = { execScript: jest.fn(() => Promise.resolve({})) };
 jest.mock("../../device", () => ({ getDevice: () => mockDevice }));

frontend/farmware/index.tsx

@@ -115,8 +115,7 @@ export const BasicFarmwarePage = ({ farmwareName, farmware, botOnline }:
     </p>
   </div>;
 
-@connect(mapStateToProps)
-export class FarmwarePage extends React.Component<FarmwareProps, {}> {
+export class RawFarmwarePage extends React.Component<FarmwareProps, {}> {
   get current() { return this.props.currentFarmware; }
 
   get botOnline() {
@@ -264,3 +263,5 @@ export class FarmwarePage extends React.Component<FarmwareProps, {}> {
     </Page>;
   }
 }
+
+export const FarmwarePage = connect(mapStateToProps)(RawFarmwarePage);

frontend/farmware/weed_detector/__tests__/weed_detector_test.tsx

@@ -8,16 +8,13 @@ jest.mock("../../../device", () => ({
     return mockDevice;
   }
 }));
-
-jest.mock("react-redux", () => ({
-  connect: jest.fn()
-}));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 jest.mock("../../images/actions", () => ({ selectImage: jest.fn() }));
 
 import * as React from "react";
 import { mount, shallow } from "enzyme";
-import { WeedDetector, namespace } from "../index";
+import { RawWeedDetector as WeedDetector, namespace } from "../index";
 import { FarmwareProps } from "../../../devices/interfaces";
 import { API } from "../../../api";
 import { selectImage } from "../../images/actions";

frontend/farmware/weed_detector/index.tsx

@@ -23,8 +23,7 @@ export const namespace = (prefix: string) => (key: string): WDENVKey => {
   }
 };
 
-@connect(mapStateToProps)
-export class WeedDetector
+export class RawWeedDetector
   extends React.Component<FarmwareProps, Partial<DetectorState>> {
 
   constructor(props: FarmwareProps) {
@@ -103,3 +102,5 @@ export class WeedDetector
     </div>;
   }
 }
+
+export const WeedDetector = connect(mapStateToProps)(RawWeedDetector);

frontend/help/__tests__/help_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 import * as React from "react";
 import { mount } from "enzyme";

frontend/help/help.tsx

@@ -11,8 +11,7 @@ export function mapStateToProps(props: Everything): { dispatch: Function } {
   return { dispatch };
 }
 
-@connect(mapStateToProps)
-export class Help extends React.Component<{ dispatch: Function }, {}> {
+export class RawHelp extends React.Component<{ dispatch: Function }, {}> {
 
   componentDidMount() {
     this.props.dispatch({ type: Actions.START_TOUR, payload: undefined });
@@ -27,3 +26,5 @@ export class Help extends React.Component<{ dispatch: Function }, {}> {
     </Page>;
   }
 }
+
+export const Help = connect(mapStateToProps)(RawHelp);

frontend/logs/__tests__/index_test.tsx

@@ -1,10 +1,10 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 const mockStorj: Dictionary<number | boolean> = {};
 
 import * as React from "react";
 import { mount } from "enzyme";
-import { Logs } from "../index";
+import { RawLogs as Logs } from "../index";
 import { ToolTips } from "../../constants";
 import { TaggedLog, Dictionary } from "farmbot";
 import { NumericSetting } from "../../session_keys";

frontend/logs/index.tsx

@@ -25,8 +25,7 @@ export const formatLogTime =
       .utcOffset(timeSettings.utcOffset)
       .format(`MMM D, ${timeFormatString(timeSettings)}`);
 
-@connect(mapStateToProps)
-export class Logs extends React.Component<LogsProps, Partial<LogsState>> {
+export class RawLogs extends React.Component<LogsProps, Partial<LogsState>> {
 
   /** Initialize log type verbosity level to the configured or default value. */
   initialize = (name: NumberConfigKey, defaultValue: number): number => {
@@ -131,3 +130,5 @@ export class Logs extends React.Component<LogsProps, Partial<LogsState>> {
     </Page>;
   }
 }
+
+export const Logs = connect(mapStateToProps)(RawLogs);

frontend/messages/__tests__/index_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 import * as React from "react";
 import { mount } from "enzyme";

frontend/messages/index.tsx

@@ -7,8 +7,7 @@ import { mapStateToProps } from "./state_to_props";
 import { MessagesProps } from "./interfaces";
 import { Link } from "../link";
 
-@connect(mapStateToProps)
-export class Messages extends React.Component<MessagesProps, {}> {
+export class RawMessages extends React.Component<MessagesProps, {}> {
   render() {
     return <Page className="messages-page">
       <Row>
@@ -35,3 +34,5 @@ export class Messages extends React.Component<MessagesProps, {}> {
     </Page>;
   }
 }
+
+export const Messages = connect(mapStateToProps)(RawMessages);

frontend/regimens/__tests__/index_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 jest.mock("../../history", () => ({
   push: () => jest.fn(),

frontend/regimens/index.tsx

@@ -27,8 +27,7 @@ export const RegimenBackButton = (props: RegimenBackButtonProps) => {
     title={schedulerOpen ? t("back to regimen") : t("back to regimens")} />;
 };
 
-@connect(mapStateToProps)
-export class Regimens extends React.Component<Props, {}> {
+export class RawRegimens extends React.Component<Props, {}> {
   UNSAFE_componentWillMount() {
     if (!this.props.current) { setActiveRegimenByName(); }
   }
@@ -87,3 +86,4 @@ export class Regimens extends React.Component<Props, {}> {
     </Page>;
   }
 }
+export const Regimens = connect(mapStateToProps)(RawRegimens);

frontend/resources/reducer_support.ts

@@ -28,7 +28,6 @@ import { ReduxAction } from "../redux/interfaces";
 import { ActionHandler } from "../redux/generate_reducer";
 import { get } from "lodash";
 import { Actions } from "../constants";
-import { getFbosConfig } from "./getters";
 
 export function findByUuid(index: ResourceIndex, uuid: string): TaggedResource {
   const x = index.references[uuid];

frontend/routes.tsx

@@ -51,7 +51,7 @@ export class RootComponent extends React.Component<RootComponentProps, RootCompo
     try {
       return <ErrorBoundary>
         <Provider store={_store}>
-          <App {...{} as App["props"]}>
+          <App>
             <Route {...props} />
           </App>
         </Provider>

frontend/sequences/__tests__/sequences_test.tsx

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 jest.mock("../../history", () => ({
   push: jest.fn(),

frontend/sequences/__tests__/state_to_props_test.ts

@@ -1,4 +1,4 @@
-jest.mock("react-redux", () => ({ connect: jest.fn() }));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 import { mapStateToProps } from "../state_to_props";
 import { fakeState } from "../../__test_support__/fake_state";

frontend/sequences/sequences.tsx

@@ -29,8 +29,7 @@ export const SequenceBackButton = (props: SequenceBackButtonProps) => {
     title={insertingStep ? t("back to sequence") : t("back to sequences")} />;
 };
 
-@connect(mapStateToProps)
-export class Sequences extends React.Component<Props, {}> {
+export class RawSequences extends React.Component<Props, {}> {
   UNSAFE_componentWillMount() {
     if (!this.props.sequence) { setActiveSequenceByName(); }
   }
@@ -90,3 +89,5 @@ export class Sequences extends React.Component<Props, {}> {
     </Page>;
   }
 }
+
+export const Sequences = connect(mapStateToProps)(RawSequences);

frontend/tools/__tests__/index_test.tsx

@@ -1,6 +1,4 @@
-jest.mock("react-redux", () => ({
-  connect: jest.fn()
-}));
+jest.mock("react-redux", () => ({ connect: jest.fn(() => (x: {}) => x) }));
 
 import * as React from "react";
 import { mount, shallow } from "enzyme";

frontend/tools/index.tsx

@@ -5,8 +5,7 @@ import { Col, Row, Page } from "../ui";
 import { ToolBayList, ToolBayForm, ToolList, ToolForm } from "./components";
 import { mapStateToProps } from "./state_to_props";
 
-@connect(mapStateToProps)
-export class Tools extends React.Component<Props, Partial<ToolsState>> {
+export class RawTools extends React.Component<Props, Partial<ToolsState>> {
   state: ToolsState = { editingBays: false, editingTools: false };
 
   toggle = (name: keyof ToolsState) =>
@@ -48,3 +47,5 @@ export class Tools extends React.Component<Props, Partial<ToolsState>> {
     </Page>;
   }
 }
+
+export const Tools = connect(mapStateToProps)(RawTools);

typings/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference path="react-redux.d.ts" />
-
 /** This contains all of the global ENV vars passed from server => client.
  * Previously was `process.env.XYZ`. */
 declare var globalConfig: { [k: string]: string };

typings/react-redux.d.ts

@@ -1,65 +0,0 @@
-// Type definitions for react-redux 2.1.2
-// Project: https://github.com/rackt/react-redux
-// Definitions by: Qubo <https://github.com/tkqubo>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-
-declare module "react-redux" {
-  import { Component } from 'react';
-  import { Store, Dispatch, Action, AnyAction, ActionCreator } from 'redux';
-
-  export class ElementClass extends Component<any, any> { }
-  export interface ClassDecorator {
-    <T extends (typeof ElementClass)>(component: T): T
-  }
-
-  /**
-   * Connects a React component to a Redux store.
-   * @param mapStateToProps
-   * @param mapDispatchToProps
-   * @param mergeProps
-   * @param options
-     */
-  export function connect(mapStateToProps?: MapStateToProps,
-    mapDispatchToProps?: MapDispatchToPropsFunction | MapDispatchToPropsObject,
-    mergeProps?: MergeProps,
-    options?: Options): ClassDecorator;
-
-  interface MapStateToProps {
-    (state: any, ownProps?: any): any;
-  }
-
-  interface MapDispatchToPropsFunction {
-    (dispatch: Dispatch<any>, ownProps?: any): any;
-  }
-
-  interface MapDispatchToPropsObject {
-    [name: string]: ActionCreator<any>;
-  }
-
-  interface MergeProps {
-    (stateProps: any, dispatchProps: any, ownProps: any): any;
-  }
-
-  interface Options {
-    /**
-     * If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps,
-     * preventing unnecessary updates, assuming that the component is a “pure” component
-     * and does not rely on any input or state other than its props and the selected Redux store’s state.
-     * Defaults to true.
-     * @default true
-     */
-    pure: boolean;
-  }
-
-  export interface ProviderProps<A extends Action = AnyAction> {
-    /**
-     * The single Redux store in your application.
-     */
-    store: Store<any, A>;
-  }
-
-  /**
-   * Makes the Redux store available to the connect() calls in the component hierarchy below.
-   */
-  export class Provider<A extends Action = AnyAction> extends Component<ProviderProps<A>> { }
-}