sending device state as a field contains instead of a search field

src/device/DevicesSummary.tsx

@@ -33,11 +33,11 @@ const useStyles = makeStyles((theme: Theme) => {
 });
 
 interface Props {
-  setSearch: React.Dispatch<React.SetStateAction<string>>,
+  setFieldContains: React.Dispatch<React.SetStateAction<Map<string, string>>>,
 }
 
 export default function DevicesSummary(props: Props) {
-  const { setSearch } = props;
+  const { setFieldContains } = props;
   const deviceAPI = useDeviceAPI()
   const theme = useTheme()
   const classes = useStyles()
@@ -66,16 +66,16 @@ export default function DevicesSummary(props: Props) {
   useEffect(() => {
     switch (selected) {
       case "total":
-        setSearch("");
+        setFieldContains(new Map<string, string>());
         break;
       case "active":
-        setSearch("DEVICE_STATE_OK");
+        setFieldContains(new Map<string, string>([["state", "DEVICE_STATE_OK"]]));
         break;
       case "warning":
-        setSearch("DEVICE_STATE_LOW_POWER");
+        setFieldContains(new Map<string, string>([["state", "DEVICE_STATE_LOW_POWER"]]));
         break;
       case "offline":
-        setSearch("DEVICE_STATE_MISSING");
+        setFieldContains(new Map<string, string>([["state", "DEVICE_STATE_MISSING"]]));
         break;
     }
   }, [selected])

src/pages/Devices.tsx

@@ -110,6 +110,8 @@ export default function Devices() {
   >(undefined);
   const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState<boolean>(false);
 
+  const [fieldContains, setFieldContains] = useState<Map<string, string>>(new Map<string, string>())
+
   const updateGroups = (newGroups: Group[]) => {
     setGroups(newGroups);
   };
@@ -204,7 +206,8 @@ export default function Devices() {
       undefined,
       undefined,
       getKeys(),
-      getTypes()
+      getTypes(),
+      fieldContains,
     ).then(resp => {
       let newDevices: Device[] = []
       resp.data.devices.forEach(device => {
@@ -222,12 +225,16 @@ export default function Devices() {
 
   useEffect(() => {
     loadDevices()
-  }, [limit, page, order, orderBy, search, tab])
+  }, [limit, page, order, orderBy, fieldContains, tab])
 
   useEffect(() => {
     loadGroups()
   }, [groupLimit, groupPage, orderGroup, orderGroupBy, searchGroup])
 
+  useEffect(() => {
+    console.log(search)
+  }, [search])
+
   const handleChange = (event: any) => {
     setLimit(event.target.value);
   };
@@ -465,7 +472,7 @@ export default function Devices() {
           <Tab wrapped value={"never"} label={<CreateGroupIcon className={classes.green} />} onClick={() => openGroupSettings(undefined, "add")} />
         </Tabs>
       </Box>
-      <DevicesSummary setSearch={setSearch} />
+      <DevicesSummary setFieldContains={setFieldContains} />
       <ResponsiveTable<Device>
         title={<SmartBreadcrumb prependPaths={getGroup() && ["groups", getGroup().id().toString()]} groupName={getGroup() && getGroup().name()} paddingBottom={1}/>}
         subtitle={subtitle}

src/providers/pond/deviceAPI.tsx

@@ -8,7 +8,7 @@ import { AxiosResponse } from "axios";
 import { useGlobalState } from "providers";
 import moment from "moment";
 import { or } from "utils/types";
-import { reject, result } from "lodash";
+// import { reject, result } from "lodash";
 
 export interface IDeviceAPIContext {
   add: (name: string, description: string, backpack: pond.BackpackSettings) => Promise<AxiosResponse<pond.AddDeviceResponse>>;
@@ -36,7 +36,8 @@ export interface IDeviceAPIContext {
     comprehensive?: boolean,
     withMeasurements?: boolean,
     keys?: string[],
-    types?: string[]
+    types?: string[],
+    fieldContains?: Map<string, string>,
   ) => Promise<AxiosResponse<pond.ListDevicesResponse>>;
   listForUser: (
     asRoot: boolean,
@@ -302,7 +303,8 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
     comprehensive?: boolean,
     withMeasurements?: boolean,
     keys?: string[],
-    types?: string[]
+    types?: string[],
+    fieldContains?: Map<string, string>,
   ) => {
     const url = pondURL(
       "/devices" +
@@ -321,7 +323,8 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
         (comprehensive ? "&comprehensive=" + comprehensive.toString() : "") +
         (withMeasurements ? "&measurements=" + withMeasurements.toString() : "") +
         (keys ? "&keys=" + keys.toString() : "") +
-        (types ? "&types=" + types.toString() : "")
+        (types ? "&types=" + types.toString() : "") +
+        (fieldContains ? "&fieldContains=" + JSON.stringify(Object.fromEntries(fieldContains)) : "")
     );
     return new Promise<AxiosResponse<pond.ListDevicesResponse>>((resolve, reject)=>{
       get<pond.ListDevicesResponse>(url).then(resp => {