minor plant panel list refactor

webpack/farm_designer/plants/__tests__/plant_panel_test.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import {
   PlantPanel, PlantPanelProps, EditPlantStatus, EditPlantStatusProps
 } from "../plant_panel";
-import { shallow } from "enzyme";
+import { shallow, mount } from "enzyme";
 import { FormattedPlantInfo } from "../map_state_to_props";
 import { Actions } from "../../../constants";
 import { clickButton } from "../../../__test_support__/helpers";
@@ -34,7 +34,7 @@ describe("<PlantPanel/>", () => {
 
   it("renders: editing", () => {
     const p = fakeProps();
-    const wrapper = shallow(<PlantPanel {...p} />);
+    const wrapper = mount(<PlantPanel {...p} />);
     const txt = wrapper.text().toLowerCase();
     expect(txt).toContain("1 days old");
     expect(txt).toContain("(10, 30)");
@@ -48,7 +48,7 @@ describe("<PlantPanel/>", () => {
   });
 
   it("renders", () => {
-    const wrapper = shallow(<PlantPanel info={info} dispatch={jest.fn()} />);
+    const wrapper = mount(<PlantPanel info={info} dispatch={jest.fn()} />);
     const txt = wrapper.text().toLowerCase();
     expect(txt).toContain("1 days old");
     expect(txt).toContain("(12, 34)");

webpack/farm_designer/plants/plant_panel.tsx

@@ -64,6 +64,16 @@ export function EditPlantStatus(props: EditPlantStatusProps) {
     }} />;
 }
 
+const ListItem = (props: { name: string, children: React.ReactChild }) =>
+  <li>
+    <b>
+      {props.name}:&nbsp;
+    </b>
+    <span>
+      {props.children}
+    </span>
+  </li>;
+
 export function PlantPanel(props: PlantPanelProps) {
   const { info, onDestroy, updatePlant, dispatch } = props;
   const { name, slug, plantedAt, daysOld, uuid, plantStatus } = info;
@@ -75,62 +85,32 @@ export function PlantPanel(props: PlantPanelProps) {
       {t("Plant Info")}
     </label>
     <ul>
-      <li>
-        <b>
-          {t("Full Name")}:&nbsp;
-        </b>
-        <span>
-          {_.startCase(name)}
-        </span>
-      </li>
-      <li>
-        <b>
-          {t("Plant Type")}:&nbsp;
-        </b>
-        <span>
-          <Link
-            to={`/app/designer/plants/crop_search/` + slug}>
-            {_.startCase(slug)}
-          </Link>
-        </span>
-      </li>
-      <li>
-        <b>
-          {t("Started")}:&nbsp;
-        </b>
-        <span>
-          {plantedAt}
-        </span>
-      </li>
-      <li>
-        <b>
-          {t("Age")}:&nbsp;
-        </b>
-        <span>
-          {daysOld} {t("days old")}
-        </span>
-      </li>
-      <li>
-        <b>
-          {t("Location")}:&nbsp;
-        </b>
-        <span>
-          ({x}, {y})
-        </span>
-      </li>
-      <li>
-        <b>
-          {t("Status")}:&nbsp;
-        </b>
-        <span>
-          {updatePlant
-            ? <EditPlantStatus
-              uuid={uuid}
-              plantStatus={plantStatus}
-              updatePlant={updatePlant} />
-            : plantStatus}
-        </span>
-      </li>
+      <ListItem name={t("Full Name")}>
+        {_.startCase(name)}
+      </ListItem>
+      <ListItem name={t("Plant Type")}>
+        <Link
+          to={`/app/designer/plants/crop_search/` + slug}>
+          {_.startCase(slug)}
+        </Link>
+      </ListItem>
+      <ListItem name={t("Started")}>
+        {plantedAt}
+      </ListItem>
+      <ListItem name={t("Age")}>
+        {`${daysOld} ${t("days old")}`}
+      </ListItem>
+      <ListItem name={t("Location")}>
+        {`(${x}, ${y})`}
+      </ListItem>
+      <ListItem name={t("Status")}>
+        {updatePlant
+          ? <EditPlantStatus
+            uuid={uuid}
+            plantStatus={plantStatus}
+            updatePlant={updatePlant} />
+          : plantStatus}
+      </ListItem>
     </ul>
     <button className="fb-button gray"
       hidden={true}