Setting up query builder to be used in DG extension

RoamJS · Mar 17, 2022 · c281549 · c281549
1 parent dfa68ad
commit c281549
Show file tree

Hide file tree

Showing 9 changed files with 2,131 additions and 313 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,12 +11,12 @@
   "devDependencies": {
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.13",
-    "roamjs-scripts": "^0.16.1",
+    "roamjs-scripts": "^0.16.2",
     "typescript": "^4.6.2"
   },
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "roamjs-components": "^0.52.12"
+    "roamjs-components": "^0.53.4"
   }
 }
diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
@@ -10,11 +10,12 @@ import updateBlock from "roamjs-components/writes/updateBlock";
 import getFirstChildUidByBlockUid from "roamjs-components/queries/getFirstChildUidByBlockUid";
 import PageInput from "roamjs-components/components/PageInput";
 import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
-import { conditionLabels } from "../utils/conditionToDatalog";
+import { getConditionLabels } from "../utils/conditionToDatalog";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import { render as renderSimpleAlert } from "roamjs-components/components/SimpleAlert";
 import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
 import getSubTree from "roamjs-components/util/getSubTree";
+import useSubTree from "roamjs-components/hooks/useSubTree";
 
 const QueryCondition = ({
   con,
@@ -30,6 +31,7 @@ const QueryCondition = ({
   returnNode: string;
 }) => {
   const debounceRef = useRef(0);
+  const conditionLabels = useMemo(getConditionLabels, []);
   return (
     <div style={{ display: "flex", margin: "8px 0", alignItems: "baseline" }}>
       <MenuItemSelect
@@ -226,6 +228,7 @@ const QueryEditor = ({
   parentUid,
   defaultQuery,
   onQuery,
+  defaultReturnNode,
 }: {
   parentUid: string;
   defaultQuery: string[];
@@ -234,6 +237,7 @@ const QueryEditor = ({
     conditions: Condition[];
     selections: Selection[];
   }) => Promise<void>;
+  defaultReturnNode?: string;
 }) => {
   const tree = useMemo(() => getBasicTreeByParentUid(parentUid), [parentUid]);
   const scratchNode = useMemo(
@@ -253,7 +257,11 @@ const QueryEditor = ({
     () => scratchNode?.children || [],
     [scratchNode]
   );
-  const [returnNode, setReturnNode] = useState("block");
+  const [returnNode, setReturnNode] = useState(
+    () =>
+      defaultReturnNode ||
+      getSettingValueFromTree({ tree: scratchNodeChildren, key: "return" })
+  );
   const debounceRef = useRef(0);
   const returnNodeOnChange = (value: string) => {
     window.clearTimeout(debounceRef.current);
@@ -266,11 +274,10 @@ const QueryEditor = ({
       });
     }, 1000);
   };
-  const conditionsNode = useMemo(
-    () =>
-      scratchNodeChildren.find((t) => toFlexRegex("conditions").test(t.text)),
-    [scratchNodeChildren]
-  );
+  const conditionsNode = useSubTree({
+    tree: scratchNodeChildren,
+    key: "conditions",
+  });
   const conditionsNodeUid = useMemo(() => {
     if (conditionsNode?.uid) return conditionsNode?.uid;
     const newUid = window.roamAlphaAPI.util.generateUID();
@@ -368,11 +375,12 @@ const QueryEditor = ({
         )
       ),
     ]).then(([, conditionNodesWithUids, selections]) => {
-      // setReturnNode(value);
+      if (!defaultReturnNode) setReturnNode(value);
       setConditions(conditionNodesWithUids);
       setSelections(selections);
     });
   }, [
+    defaultReturnNode,
     defaultQuery,
     setReturnNode,
     setConditions,
@@ -409,7 +417,7 @@ const QueryEditor = ({
         <InputGroup
           autoFocus
           value={returnNode}
-          disabled={true}
+          disabled={!!defaultReturnNode}
           onChange={(e) => {
             returnNodeOnChange(e.target.value);
           }}

diff --git a/src/components/QueryPage.tsx b/src/components/QueryPage.tsx
@@ -1,6 +1,5 @@
 import { Card, Button, Tooltip } from "@blueprintjs/core";
-import React, { useEffect, useMemo, useState } from "react";
-import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
+import { useEffect, useMemo, useState } from "react";
 import fireQuery from "../utils/fireQuery";
 import parseQuery from "../utils/parseQuery";
 import ResultsView, { Result as SearchResult } from "./ResultsView";
@@ -10,20 +9,22 @@ import QueryEditor from "./QueryEditor";
 import createBlock from "roamjs-components/writes/createBlock";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import getSubTree from "roamjs-components/util/getSubTree";
-import useSubTree from "roamjs-components/hooks/useSubTree";
 
-type Props = { pageUid: string; configUid: string };
+type Props = {
+  pageUid: string;
+  hideMetadata?: boolean;
+  defaultReturnNode?: string;
+};
 
-const QueryPage = ({ pageUid, configUid }: Props) => {
+const QueryPage = ({
+  pageUid,
+  hideMetadata = false,
+  defaultReturnNode,
+}: Props) => {
   const queryNode = useMemo(
     () => getSubTree({ parentUid: pageUid, key: "query" }),
     [pageUid]
   );
-  const tree = useMemo(() => getBasicTreeByParentUid(configUid), [configUid]);
-  const hideMetadata = !!useSubTree({
-    key: "Hide Metadata",
-    tree,
-  }).uid;
   const [isEdit, setIsEdit] = useState(!queryNode.uid);
   const [query, setQuery] = useState(() =>
     queryNode.children.map((s) => s.text)
@@ -106,6 +107,7 @@ const QueryPage = ({ pageUid, configUid }: Props) => {
                 )
                 .then(() => Promise.resolve());
             }}
+            defaultReturnNode={defaultReturnNode}
           />
           <hr style={{ borderColor: "#333333" }} />
         </>