Add `dispatch` to props. Change "apply" to "preview"

frontend/farm_designer/plants/add_plant.tsx

@@ -23,7 +23,12 @@ export const mapStateToProps = (props: Everything): AddPlantProps =>
     openfarmSearch: OFSearch,
   });
 
-const AddPlantDescription = ({ svgIcon }: { svgIcon: string | undefined }) =>
+interface APDProps {
+  svgIcon: string | undefined;
+  children?: React.ReactChild;
+}
+
+const AddPlantDescription = ({ svgIcon, children }: APDProps) =>
   <div>
     <img className="crop-drag-info-image"
       src={svgToUrl(svgIcon)}
@@ -35,7 +40,7 @@ const AddPlantDescription = ({ svgIcon }: { svgIcon: string | undefined }) =>
     <b>{t("CLICK anywhere within the grid")}</b> {t(`to add the plant
   to the map. You can add the plant as many times as you need to
   before pressing DONE to finish.`)}
-    <PlantGrid />
+    {children}
   </div>;
 
 export interface AddPlantProps {
@@ -55,13 +60,16 @@ export class RawAddPlant extends React.Component<AddPlantProps, {}> {
     const { crop, result, basePath, backgroundURL } =
       getCropHeaderProps({ cropSearchResults });
     const panelName = "add-plant";
+    const descElem = <AddPlantDescription svgIcon={result.crop.svg_icon}>
+      <PlantGrid dispatch={this.props.dispatch} />
+    </AddPlantDescription>;
     return <DesignerPanel panelName={panelName} panel={Panel.Plants}>
       <DesignerPanelHeader
         panelName={panelName}
         panel={Panel.Plants}
         title={result.crop.name}
         style={{ background: backgroundURL }}
-        descriptionElement={<AddPlantDescription svgIcon={result.crop.svg_icon} />}>
+        descriptionElement={descElem}>
         <a className="right-button"
           onClick={() => history.push(basePath + crop)}>
           {t("Done")}

frontend/farm_designer/plants/plant_grid.tsx

@@ -1,21 +1,29 @@
-import React, { useState } from "react";
+import React from "react";
 import { BlurableInput } from "../../ui";
 
-type PlantGridInfoKey =
+type PlantGridKey =
   "startX" | "startY" | "spacingH" | "spacingV" | "numPlantsH" | "numPlantsV";
 
-type PlantGridInfo = Record<PlantGridInfoKey, number>;
+interface PlantGridProps {
+  dispatch: Function;
+}
 
-const DEFAULT_INFO: PlantGridInfo = {
-  startX: 0,
-  startY: 0,
-  spacingH: 0,
-  spacingV: 0,
-  numPlantsH: 0,
-  numPlantsV: 0,
+interface GridState {
+  grid: Record<PlantGridKey, number>;
+}
+
+const DEFAULT_INFO: GridState = {
+  grid: {
+    startX: 0,
+    startY: 0,
+    spacingH: 0,
+    spacingV: 0,
+    numPlantsH: 0,
+    numPlantsV: 0,
+  }
 };
 
-const keys: PlantGridInfoKey[] = [
+const keys: PlantGridKey[] = [
   "numPlantsH",
   "numPlantsV",
   "spacingH",
@@ -24,24 +32,27 @@ const keys: PlantGridInfoKey[] = [
   "startY",
 ];
 
-export function PlantGrid(_: {}) {
-  const [info, setInfo] = useState(DEFAULT_INFO);
-  const onchange = (key: PlantGridInfoKey) =>
-    (x: React.ChangeEvent<HTMLInputElement>) => setInfo({
-      ...info,
+export function PlantGrid(_: PlantGridProps) {
+  const [state, setState] = React.useState(DEFAULT_INFO);
+
+  const onchange = (key: PlantGridKey) =>
+    (x: React.ChangeEvent<HTMLInputElement>) => setState({
+      ...state,
       [key]: parseInt(x.currentTarget.value, 10)
     });
+
   const inputs = keys.map(key => {
     return <div>
       {key}
-      <BlurableInput value={info[key]} onCommit={onchange(key)} />
+      <BlurableInput value={state.grid[key]} onCommit={onchange(key)} />
     </div>;
   });
+
   return <div>
     <hr />
     {inputs}
     <button>
-      Apply
+      Preview
     </button>
   </div>;
 }