Install fuse.js, add search terms to state tree

frontend/constants.ts

@@ -1017,5 +1017,6 @@ export enum Actions {
   FOLDER_TOGGLE = "FOLDER_TOGGLE",
   FOLDER_TOGGLE_ALL = "FOLDER_TOGGLE_ALL",
   FOLDER_TOGGLE_EDIT = "FOLDER_EDIT",
+  FOLDER_SEARCH = "FOLDER_SEARCH"
 
 }

frontend/folders/actions.ts

@@ -78,8 +78,13 @@ export const deleteFolder = (id: number) => {
 
 export const moveFolderItem = (_: Tree) => Promise.reject("WIP");
 export const moveFolder = (_: Tree) => Promise.reject("WIP");
-export const searchSequencesAndFolders = (_: Tree) => Promise.reject("WIP");
-export const searchByNameOrFolder = (_: Tree) => Promise.reject("WIP");
+
+export const updateSearchTerm = (payload: string | undefined) => {
+  store.dispatch({
+    type: Actions.FOLDER_SEARCH,
+    payload
+  });
+};
 
 export const toggleFolderOpenState = (id: number) => Promise
   .resolve(store.dispatch({ type: Actions.FOLDER_TOGGLE, payload: { id } }));
@@ -92,3 +97,4 @@ export const toggleFolderEditState = (id: number) => Promise
 
 export const toggleAll = (payload: boolean) => Promise
   .resolve(store.dispatch({ type: Actions.FOLDER_TOGGLE_ALL, payload }));
+

frontend/folders/index.tsx

@@ -9,13 +9,15 @@ import {
   setFolderName,
   toggleFolderOpenState,
   toggleFolderEditState,
-  toggleAll
+  toggleAll,
+  updateSearchTerm
 } from "./actions";
 import { TaggedSequence } from "farmbot";
 import { selectAllSequences } from "../resources/selectors";
 
 interface Props extends RootFolderNode {
   sequences: Record<string, TaggedSequence>;
+  searchTerm: string | undefined;
 }
 
 type State = {
@@ -110,7 +112,11 @@ export class RawFolders extends React.Component<Props, State> {
     return <Page>
       <Col xs={12} sm={6} smOffset={3}>
         <Row>
-          <input placeholder={"Search"} disabled={true} />
+          <input
+            value={this.props.searchTerm || ""}
+            onChange={({ currentTarget }) => {
+              updateSearchTerm(currentTarget.value);
+            }} />
           <button onClick={() => createFolder()}>📁</button>
           <button onClick={this.toggleAll}>{this.state.toggleDirection ? "📂" : "📁"}</button>
           <button>➕Sequence</button>
@@ -126,16 +132,22 @@ export class RawFolders extends React.Component<Props, State> {
 }
 
 export function mapStateToProps(props: Everything): Props {
+  type Reducer = (a: Props["sequences"], b: TaggedSequence) =>
+    Record<string, TaggedSequence>;
+
+  const reduce: Reducer = (a, b) => {
+    a[b.uuid] = b;
+    return a;
+  };
+
   const x = props.resources.index.sequenceFolders;
-  const reduce =
-    (a: Props["sequences"], b: TaggedSequence): Record<string, TaggedSequence> => {
-      a[b.uuid] = b;
-      return a;
-    };
+
   return {
-    folders: x.folders.folders,
+    folders: x.filteredFolders ? x.filteredFolders.folders : x.folders.folders,
     noFolder: x.folders.noFolder,
-    sequences: selectAllSequences(props.resources.index).reduce(reduce, {})
+    sequences: selectAllSequences(props.resources.index).reduce(reduce, {}),
+    searchTerm: x.searchTerm
   };
 }
+
 export const Folders = connect(mapStateToProps)(RawFolders);

frontend/resources/interfaces.ts

@@ -78,6 +78,8 @@ export interface ResourceIndex {
     /** Local data about a `Folder` that is stored
      * out-of-band rather than in the API. */
     localMetaAttributes: Record<number, FolderMeta>;
+    searchTerm?: string;
+    filteredFolders?: RootFolderNode | undefined;
   }
 }
 

frontend/resources/reducer.ts

@@ -181,5 +181,9 @@ export let resourceReducer =
 
       reindexFolders(s.index);
 
+      return s;
+    })
+    .add<string | undefined>(Actions.FOLDER_SEARCH, (s, { payload }) => {
+      s.index.sequenceFolders.searchTerm = payload;
       return s;
     });

package.json

@@ -46,6 +46,7 @@
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.1",
     "farmbot": "8.4.2",
+    "fuse.js": "3.4.6",
     "i18next": "19.0.1",
     "install": "0.13.0",
     "lodash": "4.17.15",