It initializes a grid. NEXT: Save the plant to API

frontend/farm_designer/plants/add_plant.tsx

@@ -61,7 +61,9 @@ export class RawAddPlant extends React.Component<AddPlantProps, {}> {
       getCropHeaderProps({ cropSearchResults });
     const panelName = "add-plant";
     const descElem = <AddPlantDescription svgIcon={result.crop.svg_icon}>
-      <PlantGrid dispatch={this.props.dispatch} />
+      <PlantGrid
+        dispatch={this.props.dispatch}
+        openfarm_slug={result.crop.slug} />
     </AddPlantDescription>;
     return <DesignerPanel panelName={panelName} panel={Panel.Plants}>
       <DesignerPanelHeader

frontend/farm_designer/plants/grid/constants.ts

@@ -9,6 +9,7 @@ export interface PlantGridState {
 }
 
 export interface PlantGridProps {
+  openfarm_slug: string;
   dispatch: Function;
 }
 

frontend/farm_designer/plants/grid/generate_grid.ts

@@ -23,8 +23,8 @@ const createPlant = (p: PlantGridData, openfarm_slug: string, gridId: string) =>
   (vec: [number, number]): PlantPointer => {
     const [x, y] = vec;
     return {
-      name: `${openfarm_slug} ${p.numPlantsH}x${p.numPlantsV}`,
-      radius: 0,
+      name: `openfarm_slug`,
+      radius: 25,
       z: 0,
       x,
       y,

frontend/farm_designer/plants/grid/plant_grid.tsx

@@ -7,6 +7,8 @@ import {
   PlantGridProps,
   PlantGridState
 } from "./constants";
+import { initPlantGrid } from "./generate_grid";
+import { init } from "../../../api/crud";
 
 export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
   state: PlantGridState = EMPTY_PLANT_GRID;
@@ -21,6 +23,8 @@ export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
     });
 
   performPreview = () => {
+    const plants = initPlantGrid(this.state.grid, this.props.openfarm_slug);
+    plants.map(p => this.props.dispatch(init("Point", p)));
     this.setState({ status: "dirty" });
   }
 
@@ -38,6 +42,7 @@ export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
       return <div key={key}>
         {key}
         <BlurableInput
+          disabled={this.state.status === "dirty"}
           value={this.state.grid[key]}
           onCommit={this.onchange(key)} />
       </div>;

frontend/farm_designer/state_to_props.ts

@@ -48,9 +48,7 @@ export function mapStateToProps(props: Everything): Props {
   const findPlant = plantFinder(plants);
 
   const { selectedPlants } = props.resources.consumers.farm_designer;
-  const selectedPlant = selectedPlants
-    ? findPlant(selectedPlants[0])
-    : undefined;
+  const selectedPlant = selectedPlants ? findPlant(selectedPlants[0]) : undefined;
   const { plantUUID } = props.resources.consumers.farm_designer.hoveredPlant;
 
   const hoveredPlant = findPlant(plantUUID);