WIP, Stable-ish. NEXT: Add delete button, ability to click points of a group

frontend/farm_designer/point_groups/group_detail.tsx

@@ -1,7 +1,106 @@
-import React from "react";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Everything } from "../../interfaces";
+import { Panel } from "../panel_header";
+import { t } from "../../i18next_wrapper";
+import {
+  DesignerPanel,
+  DesignerPanelContent,
+  DesignerPanelHeader
+} from "../plants/designer_panel";
+import { TaggedPointGroup, TaggedPoint } from "farmbot";
+import { findByKindAndId } from "../../resources/selectors";
+import { betterCompact } from "../../util/util";
 
-export class GroupDetail extends React.Component<{}, {}> {
+interface GroupDetailProps {
+  dispatch: Function;
+  group: TaggedPointGroup | undefined;
+  points: TaggedPoint[];
+}
+
+interface State {
+}
+
+function mapStateToProps(props: Everything): GroupDetailProps {
+  const points: TaggedPoint[] = [];
+
+  /** TODO: Write better selectors. */
+  const groupId = parseInt(location.pathname.split("/").pop() || "?", 10);
+  let group: TaggedPointGroup | undefined;
+  try {
+    group = findByKindAndId<TaggedPointGroup>(props.resources.index,
+      "PointGroup",
+      groupId);
+  } catch (error) {
+    group = undefined;
+  }
+
+  if (group) {
+    betterCompact(group
+      .body
+      .point_ids
+      .map((id) => {
+        return props.resources.index.byKindAndId[`Point.${id}`];
+      })).map(uuid => {
+        const p =
+          props.resources.index.references[uuid] as TaggedPoint | undefined;
+        p && points.push(p);
+      });
+  }
+
+  return {
+    points,
+    group,
+    dispatch: props.dispatch
+  };
+}
+
+@connect(mapStateToProps)
+export class GroupDetail extends React.Component<GroupDetailProps, State> {
+
+  state: State = { searchTerm: "" };
+
+  update = ({ currentTarget }: React.SyntheticEvent<HTMLInputElement>) => {
+    console.log(currentTarget.value);
+  };
+
+  get name() {
+    const { group } = this.props;
+    return group ? group.body.name : "Group Not found";
+  }
+
+  get icons() {
+    return this
+      .props
+      .points
+      .map(point => {
+        const { body } = point;
+        switch (body.pointer_type) {
+          case "GenericPointer":
+            return <i className="fa fa-dot-circle-o" />;
+          case "ToolSlot":
+            return <i className="fa fa-wrench" />;
+          case "Plant":
+            return <i className="fa fa-leaf" />;
+        }
+      });
+  }
   render() {
-    return <div> Work in progress. </div>;
+    return <DesignerPanel panelName={"groups"} panelColor={"gray"}>
+      <DesignerPanelHeader
+        panelName={Panel.Groups}
+        panelColor={"green"}
+        title={t("Edit Group")}
+        backTo={"/app/designer/plants"}
+        onBack={() => { throw new Error("TODO: Make back btn"); }}>
+      </DesignerPanelHeader>
+      <DesignerPanelContent
+        panelName={"groups"}>
+        <h1>{this.name}</h1>
+        <p>Items:</p>
+        {this.icons}
+
+      </DesignerPanelContent>
+    </DesignerPanel>;
   }
 }

frontend/farm_designer/point_groups/group_list_panel.tsx

@@ -9,7 +9,7 @@ import { TaggedPointGroup } from "farmbot";
 import { history } from "../../history";
 import { GroupInventoryItem } from "./group_inventory_item";
 
-interface PlantInventoryProps {
+interface GroupListPanelProps {
   dispatch: Function;
   groups: TaggedPointGroup[];
 }
@@ -18,14 +18,14 @@ interface State {
   searchTerm: string;
 }
 
-function mapStateToProps(props: Everything): PlantInventoryProps {
+function mapStateToProps(props: Everything): GroupListPanelProps {
   const groups =
     findAll<TaggedPointGroup>(props.resources.index, "PointGroup");
   return { groups, dispatch: props.dispatch };
 }
 
 @connect(mapStateToProps)
-export class GroupListPanel extends React.Component<PlantInventoryProps, State> {
+export class GroupListPanel extends React.Component<GroupListPanelProps, State> {
 
   state: State = { searchTerm: "" };
 

frontend/route_config.tsx

@@ -56,10 +56,11 @@ function route<T, U>(info: UnboundRouteConfig<T, U>) {
     const { $ } = info;
     return {
       $,
-      enter: async () => {
+      enter: async (x) => {
         try {
           const comp = (await info.getModule())[info.key];
           if (info.children) {
+            console.log(x.params);
             const child = (await info.getChild())[info.childKey];
             callback(comp, child, info);
           } else {