Merge pull request #80 from webdoc-labs/feature/e-search

Feature: Explorer search!

Author: ShukantPal

packages/webdoc-default-template/package.json

@@ -81,7 +81,8 @@
     "sass-loader": "^9.0.3",
     "webpack": "^4.43.0",
     "webpack-stream": "^5.2.1",
-    "redux": "~4.0.5",
-    "react-redux": "~7.2.2"
+    "redux": "^4.0.5",
+    "react-redux": "^7.2.2",
+    "lodash": "^4.17.20"
   }
 }

packages/webdoc-default-template/src/app/components/Explorer/ExplorerCategoryItem.js

@@ -23,7 +23,9 @@ export default function ExplorerCategoryItem(props) {
       label={props.title}
     >
       {props.data.map(
-        (explorerTarget, i) => (<ExplorerItem key={i} data={explorerTarget} />),
+        (explorerTarget, i) => (
+          <ExplorerItem key={i} data={explorerTarget} toggle={props.toggle} />
+        ),
       )}
     </TreeItem>
   );

packages/webdoc-default-template/src/app/components/Explorer/ExplorerFilter.js

@@ -0,0 +1,58 @@
+import React from "react";
+import {connect} from "react-redux";
+import debounce from "lodash/debounce";
+import store from "../../store";
+
+function filterTree(query, collector, data) {
+  data.$match = !query || (!!data.title && data.title.toLowerCase().includes(query));
+
+  if (data.children) {
+    for (const [key, value] of Object.entries(data.children)) {
+      if (key.charAt(0) === "$") {
+        continue;
+      }
+      filterTree(query, collector, value);
+      data.$match = data.$match || value.$match;
+    }
+  }
+
+  if (query && data.$match) {
+    collector.add(data.$nodeId);
+  }
+}
+
+export default connect(() => ({
+  nextQuery: (query, items) => store.dispatch({
+    type: "setQuery",
+    value: query,
+    items,
+  }),
+}))(function ExplorerFilter(props) {
+  const onNativeChange = React.useCallback(
+    debounce((e) => {
+      const query = e.target.value;
+      const items = new Set();
+
+      const startish = Date.now();
+      filterTree(query.toLowerCase(), items, props.data);
+      console.log("Search took: " + Date.now() - startish + " ms");
+      props.nextQuery(query, items);
+    }, 200, {
+      maxWait: 1000,
+    }),
+    [props.data],
+  );
+
+  const onChange = React.useCallback(
+    (e) => onNativeChange(e.nativeEvent),
+    [onNativeChange],
+  );
+
+  return (
+    <input
+      onChange={onChange}
+      placeholder="Filter"
+      type="text"
+    />
+  );
+});

packages/webdoc-default-template/src/app/components/Explorer/ExplorerItem.js

@@ -1,13 +1,12 @@
 import {useExplorerCategoryStyles, useExplorerStyles} from "./useExplorerStyles";
-import ExplorerTargetGroup from "./ExplorerCategoryItem";
+import ExplorerCategoryItem from "./ExplorerCategoryItem";
 import Link from "@material-ui/core/Link";
-//import React from "react";
+import React from "react";
 import TreeItem from "@material-ui/lab/TreeItem";
-import cuid from "cuid";
 
 export default function ExplorerItem(props) {
-  if (!props.data.nodeId) {
-    props.data.nodeId = cuid();
+  if (!props.data.$nodeId) {
+    throw new Error("Ids must be assigned");
   }
 
   const classesItem = useExplorerStyles();
@@ -17,13 +16,23 @@ export default function ExplorerItem(props) {
   let i = 0;
   for (const [key, value] of Object.entries(props.data.children || {})) {
     targetChildren.push(Array.isArray(value) ?
-      (<ExplorerTargetGroup key={i} title={key} data={value} />) :
-      (<ExplorerItem key={i} data={value} />),
+      (<ExplorerCategoryItem key={i} title={key} data={value} toggle={props.toggle} />) :
+      (<ExplorerItem key={i} data={value} toggle={props.toggle} />),
     );
     i++;
   }
 
   const classes = i > 0 ? classesCategory : classesItem;
+  const nodeId = props.data.$nodeId;
+
+  const toggle = React.useCallback(
+    () => props.toggle(nodeId),
+    [nodeId],
+  );
+
+  if (props.data.title !== "(overview)" && props.data.$match === false) {
+    return null;
+  }
 
   return (
     <TreeItem
@@ -33,7 +42,8 @@ export default function ExplorerItem(props) {
         iconContainer: classes.iconContainer,
         selected: classes.selected,
       }}
-      nodeId={props.data.nodeId}
+      onClick={toggle}
+      nodeId={nodeId}
       label={
         props.data.page ?
           (

packages/webdoc-default-template/src/app/components/Explorer/index.js

@@ -1,34 +1,63 @@
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import ArrowRightIcon from "@material-ui/icons/ArrowRight";
+import ExplorerFilter from "./ExplorerFilter";
 import ExplorerHeader from "./ExplorerHeader";
 import ExplorerTarget from "./ExplorerItem";
 import ExplorerTargetGroup from "./ExplorerCategoryItem";
 import React from "react";
 import TreeView from "@material-ui/lab/TreeView";
 import {connect} from "react-redux";
+import cuid from "cuid";
 import store from "../../store";
 import {useExplorerStyles} from "./useExplorerStyles";
 
 let fetched = false;
 
-export default connect(({explorerOpen}) => ({
+function makeIds(data) {
+  data.$nodeId = cuid();
+
+  if (data.children) {
+    for (const [, value] of Object.entries(data.children)) {
+      makeIds(value);
+    }
+  }
+}
+
+export default connect(({
+  expandedItems,
+  explorerOpen,
+  query,
+}) => ({
   isOpen: explorerOpen,
-  setOpen: (isOpen) => store.dispatch({type: "setExplorerOpen", value: isOpen}),
+  query, /* Added for re-rendering when query updates */
+  setOpen: (isOpen) => store.dispatch({
+    type: "setExplorerOpen",
+    value: isOpen,
+  }),
+  expandedItems: Array.from(expandedItems),
+  toggleItem: (nodeId, optValue) => store.dispatch({
+    type: "toggleItem",
+    nodeId,
+    value: optValue,
+  }),
 }))(function Explorer({
   isOpen,
   setOpen,
+  expandedItems,
+  toggleItem,
 }) {
   const [data, setData] = React.useState(null);
   const {root} = useExplorerStyles();
   const toggleOpen = React.useCallback(() => setOpen(!isOpen), [isOpen]);
   const children = [];
+  const sitePrefix = window.appData.siteRoot ? "/" + window.appData.siteRoot + "/" : "/";
 
   if (!fetched) {
-    fetch("/" + window.appData.siteRoot + "/explorer/reference.json")
+    fetch(sitePrefix + "explorer/reference.json")
       .then((response) => {
         if (response.ok) {
           response.json().then((idata) => {
-            // console.log(idata);
+            makeIds(idata);
             setData(idata || {});
           });
         } else {
@@ -44,9 +73,13 @@ export default connect(({explorerOpen}) => ({
   let i = 0;
   if (data) {
     for (const [key, value] of Object.entries(data.children || {})) {
+      if (value.$match === false) {
+        continue;
+      }
+
       children.push(Array.isArray(value) ?
-        (<ExplorerTargetGroup key={i} title={key} data={value} />) :
-        (<ExplorerTarget key={i} data={value} />),
+        (<ExplorerTargetGroup key={i} title={key} data={value} toggle={toggleItem} />) :
+        (<ExplorerTarget key={i} data={value} toggle={toggleItem} />),
       );
       i++;
     }
@@ -66,7 +99,9 @@ export default connect(({explorerOpen}) => ({
       }),
     }}>
       <ExplorerHeader isOpen={isOpen} toggleOpen={toggleOpen} />
+      {data && <ExplorerFilter data={data} />}
       <TreeView
+        expanded={expandedItems}
         className={"explorer__tree " + (
           isOpen ? "explorer__tree-open" : "explorer__tree-open"
         )}

packages/webdoc-default-template/src/app/components/Explorer/useExplorerStyles.js

@@ -2,15 +2,15 @@ import {makeStyles} from "@material-ui/core/styles";
 
 const itemStyle = {
   label: {
-    alignItems: "center",
-    display: "flex",
-    color: "#333333",
-    fontSize: 12,
-    height: "24px",
-    lineHeight: "14px",
+    alignItems: "center !important",
+    display: "flex !important",
+    color: "#333333 !important",
+    fontSize: "12px !important",
+    height: "24px !important",
+    lineHeight: "14px !important",
   },
   labelLinks: {
-    color: "#333333",
+    color: "#333333 !important",
   },
   iconContainer: {
     color: "#333333",
@@ -31,6 +31,6 @@ export const useExplorerCategoryStyles = makeStyles({
   ...itemStyle,
   label: {
     ...itemStyle.label,
-    fontWeight: "bold",
+    fontWeight: "bold !important",
   },
 });

packages/webdoc-default-template/src/app/store.js

@@ -7,11 +7,47 @@ function globalReducer(state = {}, action) {
       ...state,
       explorerOpen: action.value,
     };
+  case "setQuery":
+    if (!state.query && action.value) {
+      state.expandedItemsBeforeQuery = state.expandedItems;
+    } else if (state.query && !action.value) {
+      state.expandedItems = state.expandedItemsBeforeQuery;
+    }
+
+    if (action.value) {
+      return {
+        ...state,
+        query: action.value,
+        expandedItems: action.items,
+      };
+    } else {
+      return {
+        ...state,
+        query: action.value,
+      };
+    }
+  case "toggleItem": {
+    const expandedItems = new Set(state.expandedItems);
+
+    if (action.value !== undefined) {
+      expandedItems[action.value ? "add" : "delete"](action.nodeId);
+    } else {
+      expandedItems[expandedItems.has(action.nodeId) ? "delete" : "add"](action.nodeId);
+    }
+
+    return {
+      ...state,
+      expandedItems,
+    };
+  }
   default:
     return state;
   }
 }
 
 export default createStore(globalReducer, {
+  expandedItems: new Set(),
   explorerOpen: true,
+  expandedItemsBeforeQuery: new Set(),
+  query: "",
 });

packages/webdoc-default-template/src/styles/explorer.scss

@@ -5,8 +5,8 @@
   background-color: $colorSheetSecondary;
   display: flex;
   flex-direction: column;
-  padding-bottom: 8px;
   margin: 0;
+  min-height: 100%;
   max-height: 100%;
   min-width: 291px;
 
@@ -15,9 +15,27 @@
     overflow: auto;
   }
 
+  input {
+    border: 1px solid rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    font: 12px Arial;
+    margin: 8px 24px 0 24px;
+    min-height: 32px;
+    padding: 0 8px;
+  }
+
+  input:focus {
+    border: 1px solid rgba(0, 0, 0, 0.4);
+    outline: none;
+  }
+
   &__tree > *:first-child {
     margin-top: 8px;
   }
+
+  &__tree {
+    margin-bottom: 8px;
+  }
 }
 
 /* This appears outside of .explorer when its closed. */