basic filtering by mongo queries

src/App.css

@@ -71,3 +71,8 @@
     max-height: 50px;
     height: 50px;
 }
+
+textarea {
+    width: 100%;
+    height: 100px;
+}

src/App.js

@@ -1,4 +1,4 @@
-import React, {useState}  from 'react';
+import React, {useState, useEffect}  from 'react';
 import logo from './logo.svg';
 import './App.css';
 
@@ -149,14 +149,20 @@ const Cell = ({children}) =>
 </div>
 
 
-function ModelGrid({model, rowHeight, gridHeight, overload}){
+function ModelGrid({model, rowHeight, gridHeight, overload, query}){
     const onScreenRowCount   = gridHeight/rowHeight
     const overloadedRowCount = overload * onScreenRowCount
 
 
+    const [oldQuery, setOldQuery] = useState()
+
+    const jsonQuery = JSON.stringify(query)
 
     const [totalCount, setTotalCount] = useState()
-    totalCount || model.count({}).then(count => setTotalCount(count))
+    if (!totalCount || oldQuery !== jsonQuery) { 
+        debugger;
+        model.count(query).then(count => {debugger; setTotalCount(count); setOldQuery(jsonQuery)})
+    }
 
     const [gridContentRef, setGridContentRef] = useState()
     const [scroll, setScroll]                 = useState(0)
@@ -174,8 +180,11 @@ function ModelGrid({model, rowHeight, gridHeight, overload}){
 
     if (sort.length) cursorCalls.sort = [sort]
 
-    records || model.find({}, cursorCalls)
-                    .then(records => setRecords(records))
+    if (!records || oldQuery !== jsonQuery) { 
+        debugger;
+        model.find(query, cursorCalls)
+                                            .then(records => (setRecords(records), setOldQuery(jsonQuery)))
+    }
 
 
     return(
@@ -209,11 +218,17 @@ function ModelGrid({model, rowHeight, gridHeight, overload}){
 
 function App() {
     let [models, setModels] = useState()
+    let [queryText,  setQueryText]  = useState('{manufacturerName: "TOYOTA"}')
+    let [query,  setQuery]  = useState({})
     models || createModels(gql).then(models => setModels(models))
 
+    console.log(query)
+
     return (
         <div className="App">
-            {models && <ModelGrid model={models.PriceItem} rowHeight={50} gridHeight={800} overload={5}/> }
+            {models && <ModelGrid model={models.PriceItem} rowHeight={50} gridHeight={700} overload={5} query={query}/> }
+            <textarea onChange={e => setQueryText(e.target.value)} value={queryText} />
+            <button onClick={() => setQuery(eval(`(${queryText})`))}>Run</button>
         </div>
     );
 }