From c95662e8dccc4aeb5ef1d8e8807392a90d360928 Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Wed, 10 Nov 2021 15:30:29 +0000
Subject: [PATCH] can upload and get dashboard

---
 frontend/src/components/NewDashboard.js       | 187 ++++++++++++++++--
 frontend/src/components/Sidebar.js            |   2 +
 frontend/src/core/hooks/useDashboard.js       |  35 ++++
 .../core/providers/OverlayProvider/index.js   |  44 ++++-
 .../src/core/services/dashboard.service.js    |  18 ++
 frontend/src/core/services/index.js           |   2 +
 6 files changed, 268 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/core/hooks/useDashboard.js
 create mode 100644 frontend/src/core/services/dashboard.service.js

diff --git a/frontend/src/components/NewDashboard.js b/frontend/src/components/NewDashboard.js
index 8445e711..5e303ae3 100644
--- a/frontend/src/components/NewDashboard.js
+++ b/frontend/src/components/NewDashboard.js
@@ -39,9 +39,21 @@ const NewDashboard = (props) => {
       subscriptions: [
         {
           label: "",
-          id: null,
+          abi: false,
+          subscription_id: null,
           isMethods: false,
           isEvents: false,
+          generic: {
+            transactions: {
+              in: false,
+              out: false,
+            },
+            value: {
+              in: false,
+              out: false,
+              balance: false,
+            },
+          },
         },
       ],
     }
@@ -99,20 +111,54 @@ const NewDashboard = (props) => {
             // borderWidth="1px"
             variant="simple"
             colorScheme="blue"
-            justifyContent="center"
+            // justifyContent="center"
+            textAlign="center"
             borderBottomRadius="xl"
-            alignItems="baseline"
+            // alignItems="baseline"
             h="auto"
             size="sm"
             mt={0}
           >
             <Thead>
               <Tr>
-                <Th>Address</Th>
-                <Th w="90px">ABI State</Th>
-                <Th w="90px">Methods</Th>
-                <Th w="90px">Events</Th>
-                <Th w="60px"></Th>
+                <Th textAlign="center">Address</Th>
+                <Th textAlign="center" colSpan="3">
+                  ABI
+                </Th>
+
+                <Th textAlign="center" colSpan="2">
+                  Transactions
+                </Th>
+                <Th textAlign="center" colSpan="3">
+                  Value
+                </Th>
+              </Tr>
+              <Tr>
+                <Th></Th>
+                <Th p={1} textAlign="center">
+                  ABI
+                </Th>
+                <Th p={1} textAlign="center">
+                  Methods
+                </Th>
+                <Th p={1} textAlign="center">
+                  Events
+                </Th>
+                <Th p={1} textAlign="center">
+                  In
+                </Th>
+                <Th p={1} textAlign="center">
+                  Out
+                </Th>
+                <Th p={1} textAlign="center">
+                  In
+                </Th>
+                <Th p={1} textAlign="center">
+                  Out
+                </Th>
+                <Th p={1} textAlign="center">
+                  Balance
+                </Th>
               </Tr>
             </Thead>
             <Tbody>
@@ -127,7 +173,25 @@ const NewDashboard = (props) => {
                             <Downshift
                               onSelect={(selectedItem) => {
                                 const newState = { ...newDashboardForm };
-                                newState.subscriptions[idx] = selectedItem;
+                                newState.subscriptions[idx] = {
+                                  label: selectedItem.label,
+                                  address: selectedItem.address,
+                                  subscription_id: selectedItem.id,
+                                  abi: selectedItem.abi,
+                                  isMethods: false,
+                                  isEvents: false,
+                                  generic: {
+                                    transactions: {
+                                      in: false,
+                                      out: false,
+                                    },
+                                    value: {
+                                      in: false,
+                                      out: false,
+                                      balance: false,
+                                    },
+                                  },
+                                };
                                 setNewDashboardForm(newState);
                               }}
                               // isOpen={showSuggestions}
@@ -382,7 +446,7 @@ const NewDashboard = (props) => {
                           // </AutoComplete>
                         )}
                     </Td>
-                    <Td w="90px">
+                    <Td p={1} textAlign="center">
                       {subscibedItem.abi && subscibedItem.address && (
                         <CheckCircleIcon color="green" />
                       )}
@@ -404,24 +468,100 @@ const NewDashboard = (props) => {
                       )}
                     </Td>
 
-                    <Td w="60px">
+                    <Td p={1} textAlign="center">
                       <Checkbox
-                        isDisabled={
-                          !subscibedItem.address || !subscibedItem.abi
-                        }
+                        isDisabled={!subscibedItem.abi}
+                        onChange={() => {
+                          const newState = { ...newDashboardForm };
+                          newState.subscriptions[idx] = {
+                            ...newState.subscriptions[idx],
+                            isMethods: !newState.subscriptions[idx].isMethods,
+                          };
+                          setNewDashboardForm(newState);
+                        }}
                         isChecked={subscibedItem.isMethods}
                       ></Checkbox>
                     </Td>
-                    <Td w="60px">
+                    <Td p={1} textAlign="center">
                       <Checkbox
                         isDisabled={
                           !subscibedItem.address || !subscibedItem.abi
                         }
+                        onChange={() => {
+                          const newState = { ...newDashboardForm };
+                          newState.subscriptions[idx] = {
+                            ...newState.subscriptions[idx],
+                            isEvents: !newState.subscriptions[idx].isEvents,
+                          };
+                          setNewDashboardForm(newState);
+                        }}
                         isChecked={subscibedItem.isEvents}
                       ></Checkbox>
                     </Td>
+                    <Td p={1} textAlign="center">
+                      <Checkbox
+                        isDisabled={!subscibedItem.address}
+                        onChange={() => {
+                          const newState = { ...newDashboardForm };
+                          newState.subscriptions[idx].generic.transactions.in =
+                            !newState.subscriptions[idx].generic.transactions
+                              .in;
+                          setNewDashboardForm(newState);
+                        }}
+                        isChecked={subscibedItem.generic.transactions.in}
+                      ></Checkbox>
+                    </Td>
+                    <Td p={1} textAlign="center">
+                      <Checkbox
+                        isDisabled={!subscibedItem.address}
+                        onChange={() => {
+                          const newState = { ...newDashboardForm };
+                          newState.subscriptions[idx].generic.transactions.out =
+                            !newState.subscriptions[idx].generic.transactions
+                              .out;
+                          setNewDashboardForm(newState);
+                        }}
+                        isChecked={subscibedItem.generic.transactions.out}
+                      ></Checkbox>
+                    </Td>
+                    <Td p={1} textAlign="center">
+                      <Checkbox
+                        isDisabled={!subscibedItem.address}
+                        onChange={() => {
+                          const newState = { ...newDashboardForm };
+                          newState.subscriptions[idx].generic.value.in =
+                            !newState.subscriptions[idx].generic.value.in;
+                          setNewDashboardForm(newState);
+                        }}
+                        isChecked={subscibedItem.generic.value.in}
+                      ></Checkbox>
+                    </Td>
+                    <Td p={1} textAlign="center">
+                      <Checkbox
+                        isDisabled={!subscibedItem.address}
+                        onChange={() => {
+                          const newState = { ...newDashboardForm };
+                          newState.subscriptions[idx].generic.value.out =
+                            !newState.subscriptions[idx].generic.value.out;
+                          setNewDashboardForm(newState);
+                        }}
+                        isChecked={subscibedItem.generic.value.out}
+                      ></Checkbox>
+                    </Td>
+                    <Td p={1} textAlign="center">
+                      <Checkbox
+                        isDisabled={!subscibedItem.address}
+                        onChange={() => {
+                          const newState = { ...newDashboardForm };
+                          newState.subscriptions[idx].generic.balance =
+                            !newState.subscriptions[idx].generic.balance;
+                          setNewDashboardForm(newState);
+                        }}
+                        isChecked={subscibedItem.generic.balance}
+                      ></Checkbox>
+                    </Td>
 
-                    <Td>
+                    <Td p={1} textAlign="center">
                       {idx > 0 && (
                         <CloseButton
                           onClick={() => {
@@ -456,8 +596,21 @@ const NewDashboard = (props) => {
                 const newState = { ...newDashboardForm };
                 newState.subscriptions.push({
                   label: "",
-                  id: null,
+                  abi: false,
+                  subscription_id: null,
                   isMethods: false,
+                  isEvents: false,
+                  generic: {
+                    transactions: {
+                      in: false,
+                      out: false,
+                    },
+                    value: {
+                      in: false,
+                      out: false,
+                      balance: false,
+                    },
+                  },
                 });
                 setNewDashboardForm(newState);
               }}
diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js
index a2f9e8aa..a1d0af37 100644
--- a/frontend/src/components/Sidebar.js
+++ b/frontend/src/components/Sidebar.js
@@ -21,9 +21,11 @@ import { MdSettings } from "react-icons/md";
 import { HiAcademicCap } from "react-icons/hi";
 import { WHITE_LOGO_W_TEXT_URL } from "../core/constants";
 import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
+import useDashboard from "../core/hooks/useDashboard";
 
 const Sidebar = () => {
   const ui = useContext(UIContext);
+  const { dashboardsListCache } = useDashboard();
   return (
     <ProSidebar
       width="240px"
diff --git a/frontend/src/core/hooks/useDashboard.js b/frontend/src/core/hooks/useDashboard.js
new file mode 100644
index 00000000..05a61153
--- /dev/null
+++ b/frontend/src/core/hooks/useDashboard.js
@@ -0,0 +1,35 @@
+import { useMutation, useQuery } from "react-query";
+import { useToast } from ".";
+import { queryCacheProps } from "./hookCommon";
+import { DashboardService } from "../services";
+import { useContext } from "react";
+import UserContext from "../providers/UserProvider/context";
+
+const useDashboard = () => {
+  const toast = useToast();
+  const { user } = useContext(UserContext);
+  const createDashboard = useMutation(DashboardService.createDashboard, {
+    onSuccess: () => {
+      toast("Created new dashboard", "success");
+    },
+    onError: (error) => {
+      toast(error.error, "error", "Fail");
+    },
+  });
+
+  const dashboardsListCache = useQuery(
+    ["dashboards-list"],
+    DashboardService.getDashboardsList,
+    {
+      ...queryCacheProps,
+      onError: (error) => {
+        toast(error, "error");
+      },
+      enabled: !!user,
+    }
+  );
+
+  return { createDashboard, dashboardsListCache };
+};
+
+export default useDashboard;
diff --git a/frontend/src/core/providers/OverlayProvider/index.js b/frontend/src/core/providers/OverlayProvider/index.js
index 621ccb23..a5059f3d 100644
--- a/frontend/src/core/providers/OverlayProvider/index.js
+++ b/frontend/src/core/providers/OverlayProvider/index.js
@@ -28,6 +28,7 @@ import {
 } from "@chakra-ui/react";
 import UserContext from "../UserProvider/context";
 import UIContext from "../UIProvider/context";
+import useDashboard from "../../hooks/useDashboard";
 const ForgotPassword = React.lazy(() =>
   import("../../../components/ForgotPassword")
 );
@@ -43,6 +44,7 @@ const NewSubscription = React.lazy(() =>
 const UploadABI = React.lazy(() => import("../../../components/UploadABI"));
 
 const OverlayProvider = ({ children }) => {
+  const { createDashboard } = useDashboard();
   const ui = useContext(UIContext);
   const { user } = useContext(UserContext);
   const [modal, toggleModal] = useState({
@@ -227,15 +229,51 @@ const OverlayProvider = ({ children }) => {
             <Button
               variant="outline"
               mr={3}
-              onClick={() => toggleAlert(() => toggleDrawer(DRAWER_TYPES.OFF))}
+              onClick={() =>
+                toggleAlert(() => {
+                  toggleDrawer(DRAWER_TYPES.OFF);
+                  window.sessionStorage.removeItem("new_dashboard");
+                })
+              }
             >
               Cancel
             </Button>
             <Button
               colorScheme="blue"
+              isLoading={createDashboard.isLoading}
               onClick={() => {
-                //TODO: @Peersky Implement logic part
-                console.log("submit clicked");
+                const dashboardState = JSON.parse(
+                  sessionStorage.getItem("new_dashboard")
+                );
+                console.log("dashboardState:", dashboardState);
+                createDashboard.mutate({
+                  name: dashboardState.name,
+                  subscriptions: dashboardState.subscriptions.map(
+                    (pickedSubscription) => {
+                      const retval = {
+                        subscription_id: pickedSubscription.subscription_id,
+                        generic: [],
+                        all_methods: !!pickedSubscription.isMethods,
+                        all_events: !!pickedSubscription.isEvents,
+                      };
+
+                      pickedSubscription.generic.transactions.in &&
+                        retval.generic.push({ name: "transactions_in" });
+                      pickedSubscription.generic.transactions.out &&
+                        retval.generic.push({ name: "transactions_out" });
+                      pickedSubscription.generic.value.in &&
+                        retval.generic.push({ name: "value_in" });
+                      pickedSubscription.generic.value.out &&
+                        retval.generic.push({ name: "value_out" });
+                      pickedSubscription.generic.balance &&
+                        retval.generic.push({ name: "balance" });
+                      retval["methods"] = [];
+                      retval["events"] = [];
+
+                      return retval;
+                    }
+                  ),
+                });
               }}
             >
               Submit
diff --git a/frontend/src/core/services/dashboard.service.js b/frontend/src/core/services/dashboard.service.js
new file mode 100644
index 00000000..b2c32f5d
--- /dev/null
+++ b/frontend/src/core/services/dashboard.service.js
@@ -0,0 +1,18 @@
+import { http } from "../utils";
+
+const API_URL = process.env.NEXT_PUBLIC_MOONSTREAM_API_URL;
+
+export const createDashboard = (data) => {
+  return http({
+    method: "POST",
+    url: `${API_URL}/dashboards`,
+    data,
+  });
+};
+
+export const getDashboardsList = () => {
+  return http({
+    method: "GET",
+    url: `${API_URL}/dashboards`,
+  });
+};
diff --git a/frontend/src/core/services/index.js b/frontend/src/core/services/index.js
index ef4341d5..a9dc878e 100644
--- a/frontend/src/core/services/index.js
+++ b/frontend/src/core/services/index.js
@@ -10,6 +10,7 @@ import * as StatusService from "./status.service";
 import * as SubscriptionsService from "./subscriptions.service";
 import * as StreamService from "./stream.service";
 import * as TxInfoService from "./txinfo.service";
+import * as DashboardService from "./dashboard.service";
 export {
   AuthService,
   JournalService,
@@ -23,4 +24,5 @@ export {
   SubscriptionsService,
   StreamService,
   TxInfoService,
+  DashboardService,
 };