deleteFolder() fixes. TODO: Why is UI stale?

frontend/folders/actions.ts

@@ -6,9 +6,10 @@ import {
 import { cloneAndClimb } from "./climb";
 import { Color } from "farmbot";
 import { store } from "../redux/store";
-import { initSave } from "../api/crud";
+import { initSave, destroy } from "../api/crud";
 import { Folder } from "farmbot/dist/resources/api_resources";
 import { DeepPartial } from "redux";
+import { findFolderById } from "../resources/selectors_by_id";
 
 type TreePromise = Promise<Tree>;
 
@@ -84,22 +85,12 @@ export const createFolder = (config: DeepPartial<Folder> = {}) => {
   return p;
 };
 
-export const deleteFolder = (tree: Tree, _id: number): TreePromise => {
-  return Promise.resolve(cloneAndClimb(tree, (parent) => {
-    switch (parent.kind) {
-      case "initial":
-        const index: Record<number, FolderNodeMedial> = {};
-        parent.children.map(x => {
-          index[x.id] = x;
-        });
-        return;
-      case "medial":
-        // parent.children.map(x => { });
-        throw new Error("WIP");
-      case "terminal":
-        return;
-    }
-  }));
+export const deleteFolder = (id: number) => {
+  const { index } = store.getState().resources;
+  const folder = findFolderById(index, id)
+  const action = destroy(folder.uuid);
+  // tslint:disable-next-line:no-any
+  return store.dispatch(action as any) as ReturnType<typeof action>;
 };
 
 export const moveFolderItem = (_: Tree) => Promise.reject("WIP");

frontend/folders/index.tsx

@@ -3,36 +3,47 @@ import { Page, Col, Row } from "../ui";
 import { FolderUnion, RootFolderNode } from "./constants";
 import { Everything } from "../interfaces";
 import { connect } from "react-redux";
-import { createFolder } from "./actions";
+import { createFolder, deleteFolder } from "./actions";
 
 type Props = RootFolderNode;
 type State = {};
 
 export class RawFolders extends React.Component<Props, State> {
   Node = ({ node }: { node: FolderUnion }) => {
-    const style: React.CSSProperties = {
-      color: node.color,
-      background: "black"
-    };
+    const style: React.CSSProperties =
+      { color: node.color, background: "black" };
+    const creator = () => createFolder({ parent_id: node.id });
+    const subfolderBtn = <span>
+      <button onClick={creator}>
+        Subfolder
+      </button>
+    </span>;
+    const deleteBtn = <span>
+      <button onClick={() => deleteFolder(node.id)}>
+        Delete
+      </button>
+    </span>;
     switch (node.kind) {
       case "initial":
         return <div style={style} >
+          {subfolderBtn}
           <span><button>Edit</button></span>
-          <span><button>Delete</button></span>
+          {deleteBtn}
           <span><input style={style} value={"folder " + node.name} onChange={() => { }} /></span>
           {node.children.map((n2: FolderUnion) => <this.Node node={n2} key={n2.id} />)}
         </div>;
       case "medial":
         return <div style={{ ...style, marginLeft: "30px" }} >
+          {subfolderBtn}
           <span><button>Edit</button></span>
-          <span><button>Delete</button></span>
+          {deleteBtn}
           <span><input style={style} value={"folder " + node.name} onChange={() => { }} /></span>
           {node.children.map((n2: FolderUnion) => <this.Node node={n2} key={n2.id} />)}
         </ div>;
       case "terminal":
         return <div style={{ ...style, marginLeft: "40px" }} >
           <span><button>Edit</button></span>
-          <span><button>Delete</button></span>
+          {deleteBtn}
           <span><input style={style} value={"folder " + node.name} onChange={() => { }} /></span>
         </div>;
     }
@@ -49,14 +60,9 @@ export class RawFolders extends React.Component<Props, State> {
   render() {
     return <Page>
       <Col xs={12} sm={6} smOffset={3}>
-        <Row>
-          <pre>
-            {JSON.stringify(this.props.folders, undefined, "  ")}
-          </pre>
-        </Row>
         <Row>
           <input placeholder={"Search"} disabled={true} />
-          <button onClick={() => console.dir(createFolder())}>
+          <button onClick={() => createFolder()}>
             Add Folder
           </button>
           <button>
@@ -66,6 +72,11 @@ export class RawFolders extends React.Component<Props, State> {
       </Col>
       <Col xs={12} sm={6} smOffset={3}>
         <Row> <this.Graph /> </Row>
+        <Row>
+          <pre>
+            {JSON.stringify(this.props.folders, undefined, "  ")}
+          </pre>
+        </Row>
       </Col>
     </Page>;
   }

frontend/resources/selectors_by_id.ts

@@ -10,6 +10,7 @@ import {
   isTaggedPlantTemplate,
   isTaggedGenericPointer,
   isTaggedSavedGarden,
+  isTaggedFolder,
 } from "./tagged_resources";
 import {
   ResourceName,
@@ -130,6 +131,15 @@ export let findRegimenById = (ri: ResourceIndex, regimen_id: number) => {
   }
 };
 
+export const findFolderById = (ri: ResourceIndex, folder_id: number) => {
+  const folder = byId("Folder")(ri, folder_id);
+  if (folder && isTaggedFolder(folder) && sanityCheck(folder)) {
+    return folder;
+  } else {
+    throw new Error("Bad folder id: " + folder_id);
+  }
+};
+
 export function findResourceById(index: ResourceIndex, kind: ResourceName,
   id: number) {
   return findId(index, kind, id);

frontend/resources/tagged_resources.ts

@@ -81,6 +81,8 @@ function isTaggedPoint(x: {}): x is PointerType {
 
 export let isTaggedRegimen =
   (x: object): x is TaggedRegimen => is("Regimen")(x);
+export let isTaggedFolder =
+  (x: object): x is TaggedRegimen => is("Folder")(x);
 export let isTaggedSequence =
   (x: object): x is TaggedSequence => is("Sequence")(x);
 export let isTaggedTool =