works initially, need reponse with s3 links

frontend/pages/dashboard/[dashboardId].js

@@ -1,48 +1,48 @@
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { getLayout } from "../../src/layouts/AppLayout";
-import { Spinner, Flex, Heading, Stack, Text, Spacer } from "@chakra-ui/react";
+import {
+  Spinner,
+  Flex,
+  Heading,
+  Stack,
+  Text,
+  Spacer,
+  IconButton,
+} from "@chakra-ui/react";
 import Scrollable from "../../src/components/Scrollable";
 import RangeSelector from "../../src/components/RangeSelector";
-// import StatsCard from "../src/components/StatsCard";
-import useWindowSize from "../../src/core/hooks/useWindowSize";
-import useDashboard from "../../../src/core/hooks/useDashboard";
-// import NFTChart from "../src/components/NFTChart";
+import useDashboard from "../../src/core/hooks/useDashboard";
+import { useRouter } from "../../src/core/hooks";
+import { BiTrash } from "react-icons/bi";
+import OverlayContext from "../../src/core/providers/OverlayProvider/context";
 
 const HOUR_KEY = "Hourly";
 const DAY_KEY = "Daily";
-// const WEEK_KEY = "Weekly";
 let timeMap = {};
 timeMap[HOUR_KEY] = "hour";
 timeMap[DAY_KEY] = "day";
-// timeMap[WEEK_KEY] = "week";
 
 const Analytics = () => {
-  const windowSize = useWindowSize();
+  const { toggleAlert } = useContext(OverlayContext);
   useEffect(() => {
     if (typeof window !== "undefined") {
       document.title = `NFT Analytics`;
     }
   }, []);
 
-  const [nodesReady, setNodeReady] = useState({
-    ntx: false,
-    values: false,
-    mints: false,
-    NFTOwners: false,
-    minters: false,
-  });
+  // const [nodesReady, setNodeReady] = useState({
+  //   ntx: false,
+  //   values: false,
+  //   mints: false,
+  //   NFTOwners: false,
+  //   minters: false,
+  // });
 
-  const nTxRef_ = useRef();
-  const valueRef_ = useRef();
-  const mintsRef_ = useRef();
-  const uniqueNFTOwnersRef_ = useRef();
-  const mintersRef_ = useRef();
+  // const nTxRef_ = useRef();
+  // const valueRef_ = useRef();
+  // const mintsRef_ = useRef();
+  // const uniqueNFTOwnersRef_ = useRef();
+  // const mintersRef_ = useRef();
 
   //   const nTxRef = useCallback(
   //     (node) => {
@@ -93,7 +93,10 @@ const Analytics = () => {
   //   );
 
   const [timeRange, setTimeRange] = useState(HOUR_KEY);
-  const { dashboardCache } = useDashboard();
+  const router = useRouter();
+  const { dashboardId } = router.params;
+  console.log("router paras:", router.params, dashboardId);
+  const { dashboardCache, deleteDashboard } = useDashboard(dashboardId);
 
   //   useLayoutEffect(() => {
   //     const items = [
@@ -157,6 +160,13 @@ const Analytics = () => {
             size={["sm", "md", null]}
             onChange={(e) => setTimeRange(e)}
           />
+          <IconButton
+            icon={<BiTrash />}
+            variant="ghost"
+            colorScheme="red"
+            size="sm"
+            onClick={() => toggleAlert(() => deleteDashboard.mutate())}
+          />
         </Stack>
         <Stack
           w="100%"

frontend/src/components/AccountIconButton.js

@@ -21,8 +21,9 @@ const AccountIconButton = (props) => {
   const ui = useContext(UIContext);
 
   return (
-    <Menu {...props}>
+    <Menu>
       <MenuButton
+        {...props}
         variant="inherit"
         colorScheme="inherit"
         as={IconButton}

frontend/src/components/AddNewIconButton.js

@@ -29,7 +29,7 @@ const AddNewIconButton = (props) => {
         as={IconButton}
         // onClick={ui.addNewDrawerState.onOpen}
         aria-label="Account menu"
-        icon={<PlusSquareIcon />}
+        icon={<PlusSquareIcon m={0} size="26px" />}
         // variant="outline"
         color="gray.100"
       />

frontend/src/components/Dashboard.js

@@ -1,2 +0,0 @@
-import { React } from "react"
-import { Flex } 

frontend/src/components/RangeSelector.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useState, useRef } from "react";
+import { Stack, Container, chakra } from "@chakra-ui/react";
+
+const RangeSelector_ = ({
+  className,
+  ranges,
+  onChange,
+  initialRange,
+  size,
+}) => {
+  const [range, setRange] = useState(initialRange ?? ranges[0]);
+  const isFirstRun = useRef(true);
+
+  useEffect(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+    } else {
+      onChange(range);
+    }
+  }, [range, onChange]);
+
+  return (
+    <Stack direction="row" className={className} h="min-content">
+      {ranges.map((item, idx) => {
+        const isActive = item === range ? true : false;
+        return (
+          <Container
+            key={`date-range-${className}-${idx}`}
+            bgColor={isActive ? "secondary.900" : "primary.50"}
+            color={!isActive ? "primary.900" : "primary.50"}
+            boxShadow="sm"
+            borderRadius="md"
+            fontSize={size}
+            fontWeight="600"
+            onClick={() => setRange(item)}
+            _hover={{
+              bgColor: isActive ? "secondary.900" : "secondary.50",
+            }}
+            cursor="pointer"
+            py="2px"
+          >
+            {item}
+          </Container>
+        );
+      })}
+    </Stack>
+  );
+};
+
+const RangeSelector = chakra(RangeSelector_);
+
+export default RangeSelector;

frontend/src/core/hooks/useDashboard.js

@@ -5,17 +5,9 @@ import { DashboardService } from "../services";
 import { useContext } from "react";
 import UserContext from "../providers/UserProvider/context";
 
-const useDashboard = () => {
+const useDashboard = (dashboardId) => {
   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"],
@@ -29,7 +21,52 @@ const useDashboard = () => {
     }
   );
 
-  return { createDashboard, dashboardsListCache };
+  const createDashboard = useMutation(DashboardService.createDashboard, {
+    onSuccess: () => {
+      toast("Created new dashboard", "success");
+    },
+    onError: (error) => {
+      toast(error.error, "error", "Fail");
+    },
+    onSettled: () => {
+      dashboardsListCache.refetch();
+    },
+  });
+
+  const deleteDashboard = useMutation(
+    () => DashboardService.deleteDashboard(dashboardId),
+    {
+      onSuccess: () => {
+        toast("Deleted dashboard", "success");
+      },
+      onError: (error) => {
+        toast(error.error, "error", "Fail");
+      },
+      onSettled: () => {
+        dashboardsListCache.refetch();
+      },
+    }
+  );
+
+  console.log("dashboardId in hook:", dashboardId, !!user && !!dashboardId);
+  const dashboardCache = useQuery(
+    ["dashboards", { dashboardId }],
+    () => DashboardService.getDashboard(dashboardId),
+    {
+      ...queryCacheProps,
+      onError: (error) => {
+        toast(error, "error");
+      },
+      enabled: !!user && !!dashboardId,
+    }
+  );
+
+  return {
+    createDashboard,
+    dashboardsListCache,
+    dashboardCache,
+    deleteDashboard,
+  };
 };
 
 export default useDashboard;

frontend/src/core/providers/OverlayProvider/index.js

@@ -1,4 +1,10 @@
-import React, { useState, useLayoutEffect, useContext, Suspense } from "react";
+import React, {
+  useState,
+  useLayoutEffect,
+  useContext,
+  Suspense,
+  useEffect,
+} from "react";
 import OverlayContext from "./context";
 import { MODAL_TYPES, DRAWER_TYPES } from "./constants";
 import {
@@ -109,9 +115,19 @@ const OverlayProvider = ({ children }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ui.isAppView, ui.isAppReady, user, ui.isLoggingOut, modal.type]);
 
+  const finishNewDashboard = () => {
+    toggleDrawer(DRAWER_TYPES.OFF);
+    window.sessionStorage.removeItem("new_dashboard");
+  };
+
+  useEffect(() => {
+    if (createDashboard.isSuccess) {
+      finishNewDashboard();
+    }
+  }, [createDashboard.isSuccess]);
   return (
     <OverlayContext.Provider
-      value={{ modal, toggleModal, drawer, toggleDrawer }}
+      value={{ modal, toggleModal, drawer, toggleDrawer, toggleAlert }}
     >
       <AlertDialog
         isOpen={alertDisclosure.isOpen}
@@ -229,12 +245,7 @@ const OverlayProvider = ({ children }) => {
             <Button
               variant="outline"
               mr={3}
-              onClick={() =>
-                toggleAlert(() => {
-                  toggleDrawer(DRAWER_TYPES.OFF);
-                  window.sessionStorage.removeItem("new_dashboard");
-                })
-              }
+              onClick={() => toggleAlert(() => finishNewDashboard())}
             >
               Cancel
             </Button>

frontend/src/core/services/dashboard.service.js

@@ -16,3 +16,25 @@ export const getDashboardsList = () => {
     url: `${API_URL}/dashboards`,
   });
 };
+
+export const deleteDashboard = (id) => {
+  console.log("delete:", id);
+  return http({
+    method: "DELETE",
+    url: `${API_URL}/dashboards/${id}/`,
+  });
+};
+
+export const getDashboard = (dashboardId) => {
+  console.log("get dashboard");
+  //   const dashboardId = query.queryKey[2].dashboardId;
+  //   console.assert(
+  //     dashboardId,
+  //     "No dashboard ID found in query object that was passed to service"
+  //   );
+  console.log("service", dashboardId);
+  return http({
+    method: "GET",
+    url: `${API_URL}/dashboards/${dashboardId}/data_links`,
+  });
+};