added the usage api and put the device wizard back in the device page

src/device/DeviceViewer.tsx

@@ -12,7 +12,7 @@ import {
   useDeviceAPI,
   useInteractionsAPI,
   useSnackbar,
-  //useUsageAPI,
+  useUsageAPI,
   useUserAPI
 } from "hooks";
 import { cloneDeep } from "lodash";
@@ -74,7 +74,7 @@ export default function Device(props: Props) {
   const deviceAPI = useDeviceAPI();
   const componentAPI = useComponentAPI();
   const interactionsAPI = useInteractionsAPI();
-  //const usageAPI = useUsageAPI();
+  const usageAPI = useUsageAPI();
   const userAPI = useUserAPI();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [device, setDevice] = useState<DeviceModel>(DeviceModel.create());
@@ -147,25 +147,25 @@ export default function Device(props: Props) {
         error(err);
       })
       .finally(() => setIsLoading(false));
-    // usageAPI
+    usageAPI
-    //   .getUsage(deviceID, moment().subtract(1, "days"))
+      .getUsage(deviceID, moment().subtract(1, "days"))
-    //   .then((res: any) => {
+      .then((res: any) => {
-    //     let usage = res.data;
+        let usage = res.data;
-    //     if (usage) {
+        if (usage) {
-    //       let rCellularStatus = "active";
+          let rCellularStatus = "active";
-    //       let rCellularUsage = 0;
+          let rCellularUsage = 0;
-    //       let sessions: any[] = [];
+          let sessions: any[] = [];
-    //       if (usage.sessions) {
+          if (usage.sessions) {
-    //         sessions = usage.sessions.filter((session: any) => {
+            sessions = usage.sessions.filter((session: any) => {
-    //           return moment(session.begin).isAfter(moment().subtract(1, "days"));
+              return moment(session.begin).isAfter(moment().subtract(1, "days"));
-    //         });
+            });
-    //       }
+          }
-    //       sessions.forEach((session: any) => (rCellularUsage += Number(or(session.bytes, 0))));
+          sessions.forEach((session: any) => (rCellularUsage += Number(or(session.bytes, 0))));
-    //       setCellularStatus(rCellularStatus);
+          setCellularStatus(rCellularStatus);
-    //       setCellularUsage(rCellularUsage);
+          setCellularUsage(rCellularUsage);
-    //     }
+        }
-    //   })
+      })
-    //   .catch(err => {});
+      .catch(err => {});
   }, [componentAPI, props.device, deviceID, error, interactionsAPI, /*usageAPI*/, userAPI, user, as]);
 
   useEffect(() => {

src/hooks/index.ts

@@ -20,7 +20,7 @@ export {
 //   useSecurity,
   useSnackbar,
 //   useTagAPI,
-//   useUsageAPI,
+  useUsageAPI,
   useUserAPI
 } from "providers";
 export * from "./useDebounce";

src/pages/Device.tsx

@@ -20,6 +20,7 @@ import { sameComponentID, sortComponents } from "pbHelpers/Component";
 import { isController } from "pbHelpers/ComponentType";
 import { or } from "utils";
 import ComponentDiagnostics from "component/ComponentDiagnostics";
+import DeviceWizard from "device/DeviceWizard";
 
 export default function DevicePage() {
   const deviceAPI = useDeviceAPI()
@@ -358,16 +359,16 @@ export default function DevicePage() {
               </li>
               <Divider component="li" />
               <ListItem>
-                <Grid container direction="row" spacing={2}>
+                <Grid container direction="row" spacing={2} width={"100%"}>
                   {isMobile ? (
                     <>
                       <Grid size={{ xs: 12 }}>
-                        {/* <DeviceWizard
+                        <DeviceWizard
                           device={device}
                           //permissions={permissions}
                           components={Array.from(components.values())}
-                          refreshCallback={load}
+                          refreshCallback={loadDevice}
-                        /> */}
+                        />
                       </Grid>
                       {diagnosticComponents.map(comp => (
                         <Grid size={{ xs: 12 }} key={comp.key()}>
@@ -382,12 +383,12 @@ export default function DevicePage() {
                   ) : (
                     <>
                       <Grid size={{ xs: 6, sm: 6, lg: 4, xl: 3 }} >
-                        {/* <DeviceWizard
+                        <DeviceWizard
                           device={device}
                           //permissions={permissions}
                           components={Array.from(components.values())}
-                          refreshCallback={load}
+                          refreshCallback={loadDevice}
-                        /> */}
+                        />
                       </Grid>
                       <Grid size={{ xs: 6, sm: 6, lg: 8, xl: 9 }} >
                         <Grid container direction="row" spacing={2}>

src/providers/index.ts

@@ -30,7 +30,7 @@ export {
   useTeamAPI,
   useImagekitAPI,
   useTaskAPI, //TODO: update api with resolve, reject
-  // useUsageAPI,
+  useUsageAPI,//TODO: update api with resolve, reject
   useUserAPI,
   // useStripeAPI,
   useDataDogProxyAPI,

src/providers/pond/pond.tsx

@@ -32,6 +32,7 @@ import PreferenceProvider, {usePreferenceAPI} from "./preferenceAPI";
 import TaskProvider, { useTaskAPI } from "./taskAPI";
 import DataDogProvider, { useDataDogProxyAPI } from "./datadogProxyAPI";
 import ContractProvider, { useContractAPI } from "./contractAPI";
+import UsageProvider, { useUsageAPI } from "./usageAPI";
 // import NoteProvider from "providers/noteAPI";
 
 export const pondURL = (partial: string, demo: boolean = false): string => {
@@ -80,7 +81,9 @@ export default function PondProvider(props: PropsWithChildren<any>) {
                                                             <TaskProvider>
                                                               <DataDogProvider>
                                                                 <ContractProvider>
+                                                                  <UsageProvider>
                                                                     {children}
+                                                                  </UsageProvider>
                                                                 </ContractProvider>
                                                               </DataDogProvider>
                                                             </TaskProvider>
@@ -147,5 +150,6 @@ export {
   usePreferenceAPI,
   useTaskAPI,
   useDataDogProxyAPI,
-  useContractAPI
+  useContractAPI,
+  useUsageAPI
 };

src/providers/pond/usageAPI.tsx

@@ -0,0 +1,99 @@
+import { useHTTP } from "hooks";
+import moment from "moment";
+import { useGlobalState } from "providers";
+import { createContext, PropsWithChildren, useContext } from "react";
+import { pondURL } from "./pond";
+
+export interface IUsageAPIContext {
+  getUsage: (
+    deviceID: number | string,
+    startDate?: any,
+    demo?: boolean,
+    keys?: string[],
+    types?: string[]
+  ) => Promise<any>;
+  getUsages: (deviceIDs: number[], startDate?: any) => Promise<any>;
+  listUsages: (startDate?: any) => Promise<any>;
+}
+
+export const UsageAPIContext = createContext<IUsageAPIContext>({} as IUsageAPIContext);
+
+function usageQuery(deviceIDs?: number[], startDate?: any): string {
+  let query = "";
+  let symbol: "?" | "&" = "?";
+  if (deviceIDs && deviceIDs.length > 0) {
+    query = query.concat(symbol + "ids=" + deviceIDs.join(","));
+    symbol = "&";
+  }
+  if (startDate) {
+    let start = moment(startDate).toISOString();
+    query = query.concat(symbol + "start=" + start);
+    symbol = "&";
+  }
+  return query;
+}
+
+interface Props {}
+
+export default function UsageProvider(props: PropsWithChildren<Props>) {
+  const { children } = props;
+  const { get } = useHTTP();
+  const [{ as }] = useGlobalState();
+
+  const getUsage = (
+    deviceID: number | string,
+    startDate?: any,
+    demo: boolean = false,
+    keys?: string[],
+    types?: string[]
+  ) => {
+    if (as && !(types && types.length > 0 && types[0] === "team"))
+      return get(
+        pondURL(
+          "/devices/" +
+            deviceID +
+            "/usage" +
+            usageQuery(undefined, startDate) +
+            "&as=" +
+            as +
+            (keys ? "&keys=" + keys.toString() : "") +
+            (types ? "&types=" + types.toString() : ""),
+          demo
+        )
+      );
+    return get(
+      pondURL(
+        "/devices/" +
+          deviceID +
+          "/usage" +
+          usageQuery(undefined, startDate) +
+          (keys ? "&keys=" + keys.toString() : "") +
+          (types ? "&types=" + types.toString() : ""),
+        demo
+      )
+    );
+  };
+
+  const getUsages = (deviceIDs: number[], startDate?: any) => {
+    if (as) return get(pondURL("/usage/devices" + usageQuery(deviceIDs, startDate) + "&as=" + as));
+    return get(pondURL("/usage/devices" + usageQuery(deviceIDs, startDate)));
+  };
+
+  const listUsages = (startDate?: any) => {
+    if (as) return get(pondURL("/usage" + usageQuery(undefined, startDate) + "&as=" + as));
+    return get(pondURL("/usage" + usageQuery(undefined, startDate)));
+  };
+
+  return (
+    <UsageAPIContext.Provider
+      value={{
+        getUsage,
+        getUsages,
+        listUsages
+      }}>
+      {children}
+    </UsageAPIContext.Provider>
+  );
+}
+
+export const useUsageAPI = () => useContext(UsageAPIContext);