diff --git a/frontend/pages/dashboard/[dashboardId].js b/frontend/pages/dashboard/[dashboardId].js index aa1fcab1..701b8fb9 100644 --- a/frontend/pages/dashboard/[dashboardId].js +++ b/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)} /> + } + variant="ghost" + colorScheme="red" + size="sm" + onClick={() => toggleAlert(() => deleteDashboard.mutate())} + /> { const ui = useContext(UIContext); return ( - + { as={IconButton} // onClick={ui.addNewDrawerState.onOpen} aria-label="Account menu" - icon={} + icon={} // variant="outline" color="gray.100" /> diff --git a/frontend/src/components/Dashboard.js b/frontend/src/components/Dashboard.js deleted file mode 100644 index 00f0ac11..00000000 --- a/frontend/src/components/Dashboard.js +++ /dev/null @@ -1,2 +0,0 @@ -import { React } from "react" -import { Flex } \ No newline at end of file diff --git a/frontend/src/components/RangeSelector.js b/frontend/src/components/RangeSelector.js new file mode 100644 index 00000000..72eceb58 --- /dev/null +++ b/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 ( + + {ranges.map((item, idx) => { + const isActive = item === range ? true : false; + return ( + setRange(item)} + _hover={{ + bgColor: isActive ? "secondary.900" : "secondary.50", + }} + cursor="pointer" + py="2px" + > + {item} + + ); + })} + + ); +}; + +const RangeSelector = chakra(RangeSelector_); + +export default RangeSelector; diff --git a/frontend/src/core/hooks/useDashboard.js b/frontend/src/core/hooks/useDashboard.js index 05a61153..65e2305c 100644 --- a/frontend/src/core/hooks/useDashboard.js +++ b/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; diff --git a/frontend/src/core/providers/OverlayProvider/index.js b/frontend/src/core/providers/OverlayProvider/index.js index e36c5b99..f5fa9414 100644 --- a/frontend/src/core/providers/OverlayProvider/index.js +++ b/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 ( { diff --git a/frontend/src/core/services/dashboard.service.js b/frontend/src/core/services/dashboard.service.js index b2c32f5d..d404de1e 100644 --- a/frontend/src/core/services/dashboard.service.js +++ b/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`, + }); +};