saving filters and sorts

RoamJS · Mar 15, 2022 · 0e34bcc · 0e34bcc
1 parent 97942fa
commit 0e34bcc
Show file tree

Hide file tree

Showing 5 changed files with 348 additions and 136 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,6 @@
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "roamjs-components": "^0.51.2"
+    "roamjs-components": "^0.52.6"
   }
 }
diff --git a/src/components/QueryPage.tsx b/src/components/QueryPage.tsx
@@ -23,18 +23,23 @@ const QueryPage = ({ pageUid }: Props) => {
     () => queryNode.children.map((s) => s.text),
     [queryNode]
   );
+  const [loading, setLoading] = useState(false);
   const [results, setResults] = useState<SearchResult[]>([]);
   const { returnNode, conditionNodes, selectionNodes } = useMemo(
     () => parseQuery(query),
     [parseQuery, query]
   );
   useEffect(() => {
-    const results = fireQuery({
-      returnNode,
-      conditions: conditionNodes,
-      selections: selectionNodes,
-    });
-    setResults(results);
+    setLoading(true);
+    setTimeout(() => {
+      const results = fireQuery({
+        returnNode,
+        conditions: conditionNodes,
+        selections: selectionNodes,
+      });
+      setResults(results);
+      setLoading(false);
+    }, 1);
   }, [setResults]);
   return (
     <Card
@@ -103,10 +108,14 @@ const QueryPage = ({ pageUid }: Props) => {
           />
         </Tooltip>
       )}
-      <ResultsView
-        header={
-          <div>
-            {/*<Tooltip content={"Export"}>
+      {loading ? (
+        <p>Loading results...</p>
+      ) : (
+        <ResultsView
+          parentUid={pageUid}
+          header={
+            <div>
+              {/*<Tooltip content={"Export"}>
                 <Button
                   icon={"export"}
                   disabled
@@ -138,19 +147,20 @@ const QueryPage = ({ pageUid }: Props) => {
                   }}
                 />
                 </Tooltip>*/}
-          </div>
-        }
-        results={results.map(({ id, ...a }) => a)}
-        resultContent={
-          <div style={{ fontSize: 10, position: "relative" }}>
-            {query.map((q, i) => (
-              <p key={i} style={{ margin: 0 }}>
-                {q}
-              </p>
-            ))}
-          </div>
-        }
-      />
+            </div>
+          }
+          results={results.map(({ id, ...a }) => a)}
+          resultContent={
+            <div style={{ fontSize: 10, position: "relative" }}>
+              {query.map((q, i) => (
+                <p key={i} style={{ margin: 0 }}>
+                  {q}
+                </p>
+              ))}
+            </div>
+          }
+        />
+      )}
     </Card>
   );
 };