mirror
/
moonstream
kopia lustrzana https://github.com/bugout-dev/moonstream
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

intermediate state

pull/477/head
Tim Pechersky 2021-12-02 19:39:59 +00:00
rodzic 098f8b6b43
commit 97f36be26d
14 zmienionych plików z 679 dodań i 154 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

6
frontend/pages/dashboard/[dashboardId].js
Wyświetl plik

@ -160,6 +160,7 @@ const Analytics = () => {
const dashboard = { ...dashboardCache.data.data.resource_data };
dashboard.name = name;
updateDashboard.mutate({ id: dashboardCache.data.data.id, dashboard });
};
const addReportClicked = () => {
console.log("click");
};
@ -218,7 +219,10 @@ const Analytics = () => {
/>
<Button
onClick={() =>
overlay.toggleDrawer(DRAWER_TYPES.NEW_DASHBOARD_ITEM)
overlay.toggleDrawer({
type: DRAWER_TYPES.NEW_DASHBOARD_ITEM,
props: { dashboardId: dashboardId },
})
}
mr={8}
colorScheme="blue"

4
frontend/src/components/AddNewIconButton.js
Wyświetl plik

@ -40,7 +40,9 @@ const AddNewIconButton = (props) => {
>
<MenuGroup>
<MenuItem
onClick={() => modal.toggleDrawer(DRAWER_TYPES.NEW_DASHBOARD)}
onClick={() =>
modal.toggleDrawer({ type: DRAWER_TYPES.NEW_DASHBOARD })
}
>
New Dashboard...
</MenuItem>

157
frontend/src/components/AutoCompleter.js 100644
Wyświetl plik

@ -0,0 +1,157 @@
import React, { useContext } from "react";
import Downshift from "downshift";
import { v4 } from "uuid";
import {
Stack,
Box,
InputGroup,
InputLeftAddon,
Input,
InputRightAddon,
FormLabel,
} from "@chakra-ui/react";
import UIContext from "../core/providers/UIProvider/context";
const AutoCompleter = ({
form,
setForm,
pickerItems,
initialSelectedItem,
itemToString,
onSelect,
getLabelColor,
placeholder,
getDefaultValue,
filterFn,
empyListCTA,
dropdownItem,
getLeftAddonColor,
itemIdx,
}) => {
const ui = useContext(UIContext);
return (
<Downshift
onSelect={onSelect}
itemToString={itemToString}
initialSelectedItem={initialSelectedItem ?? undefined}
>
{({
getInputProps,
getItemProps,
getLabelProps,
getMenuProps,
getToggleButtonProps,
isOpen,
inputValue,
highlightedIndex,
getRootProps,
selectedItem,
}) => {
const labelColor = getLabelColor(selectedItem);
const inputLeftBgColor = getLeftAddonColor(selectedItem);
console.log("inputLeftBgColor", inputLeftBgColor);
return (
<Box pos="relative">
<Box {...getRootProps({}, { suppressRefError: true })}>
<InputGroup>
<InputLeftAddon
isTruncated
maxW="60px"
fontSize={ui.isMobileView ? "xs" : "sm"}
bgColor={inputLeftBgColor ?? "gray.100"}
>
<FormLabel
alignContent="center"
my={2}
{...getLabelProps()}
color={
labelColor
? labelColor?.isDark()
? "white"
: labelColor.darken(0.6).hex()
: "inherit"
}
>{`#${itemIdx}:`}</FormLabel>
</InputLeftAddon>
<Input
placeholder={placeholder}
isTruncated
fontSize="sm"
{...getInputProps({
defaultValue: getDefaultValue(selectedItem),
})}
></Input>
<InputRightAddon>
{" "}
<button
{...getToggleButtonProps()}
aria-label={"toggle menu"}
>
&#8595;
</button>
</InputRightAddon>
</InputGroup>
</Box>
{isOpen ? (
<Stack
// display="flex"
direction="column"
className="menuListTim"
{...getMenuProps()}
bgColor="gray.300"
borderRadius="md"
boxShadow="lg"
pos="absolute"
overflow="scroll"
left={0}
right={0}
spacing={2}
zIndex={1000}
py={2}
>
{pickerItems &&
pickerItems.filter((item) => filterFn(item, inputValue))
.length === 0 &&
empyListCTA(inputValue)}
{pickerItems &&
pickerItems
.filter((item) => filterFn(item, inputValue))
.map((item, index) => {
return (
<Stack
px={4}
py={1}
alignItems="center"
key={v4()}
{...getItemProps({
index,
item,
})}
direction="row"
w="100%"
bgColor={
index === highlightedIndex
? "orange.900"
: "inherit"
}
color={
index === highlightedIndex ? "gray.100" : "inherit"
}
>
{dropdownItem(item)}
</Stack>
);
})}
{inputValue === "" && empyListCTA(inputValue)}
</Stack>
) : null}
{/* </Menu> */}
</Box>
);
}}
</Downshift>
);
};
export default AutoCompleter;

240
frontend/src/components/NewDashboardChart.js 100644
Wyświetl plik

@ -0,0 +1,240 @@
import React, { useContext, useEffect, useState } from "react";
import {
chakra,
FormLabel,
Input,
Stack,
InputGroup,
Box,
Button,
Table,
Th,
Td,
Tr,
Thead,
Tbody,
Center,
Checkbox,
CloseButton,
InputRightAddon,
Badge,
InputLeftAddon,
Heading,
Spinner,
Text,
ButtonGroup,
} from "@chakra-ui/react";
import { CheckCircleIcon } from "@chakra-ui/icons";
import { useSubscriptions } from "../core/hooks";
import Downshift from "downshift";
import color from "color";
import OverlayContext from "../core/providers/OverlayProvider/context";
import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
import UIContext from "../core/providers/UIProvider/context";
import SuggestABI from "./SuggestABI";
import { v4 } from "uuid";
import AutoCompleter from "./AutoCompleter";
import { CHART_METRICS } from "../core/constants";
const NewDashboardChart = (props) => {
const [metric, setMetric] = useState();
const ui = useContext(UIContext);
const overlay = useContext(OverlayContext);
const [newChartForm, setNewChartForm] = useState([
{
subscription: undefined, //subscription
type: undefined, // generic | events | transactions
name: undefined, // transactions_in | transactions_out | value_in | value_out | balance | abi.events.some() | abi.methods.some()
},
]);
const [pickerItems, setPickerItems] = useState();
useEffect(() => {
if (!subscriptionsCache.isLoading) {
const massaged = subscriptionsCache.data?.subscriptions.map((item) => {
return { value: item.address, ...item };
});
setPickerItems(massaged);
}
}, [subscriptionsCache]);
const { subscriptionsCache } = useSubscriptions();
if (subscriptionsCache.isLoading) return <Spinner />;
console.log("newChartForm:", newChartForm);
const filterFn = (item, inputValue) =>
(item.subscription_type_id === "ethereum_blockchain" ||
item.subscription_type_id === "polygon_blockchain") &&
(!inputValue ||
item.address.toUpperCase().includes(inputValue.toUpperCase()) ||
item.label.toUpperCase().includes(inputValue.toUpperCase()));
return (
<>
<Stack spacing="24px">
{newChartForm.map((subscibedItem, idx) => {
const onAbiSuggestionSelect = ({ type, value }) => {
setNewChartForm((currentValue) => {
const newValue = [...currentValue];
newValue[idx].type = type;
newValue[idx].name = value;
return newValue;
});
};
const onMetricSelect = ({ type, value }) => {
setNewChartForm((currentValue) => {
const newValue = [...currentValue];
newValue[idx].type = type;
newValue[idx].name = "";
return newValue;
});
};
return (
<Stack key={v4()}>
<FormLabel pb={0}>Subscription:</FormLabel>
<AutoCompleter
itemIdx={idx}
pickerItems={pickerItems}
initialSelectedItem={newChartForm[idx].subscription}
itemToString={(item) => item.label}
onSelect={(selectedItem) =>
setNewChartForm((currentValue) => {
const newValue = [...currentValue];
newValue[idx].subscription = selectedItem;
return newValue;
})
}
getLeftAddonColor={(item) => item?.color ?? "inherit"}
getLabelColor={(item) =>
item?.color ? color(item.color) : undefined
}
placeholder="Select subcription"
getDefaultValue={(item) => (item?.label ? item.label : "")}
filterFn={filterFn}
empyListCTA={(inputValue) => (
<Button
colorScheme="orange"
variant="outline"
size="sm"
fontSize="sm"
w="100%"
m={0}
isTruncated
onClick={() => {
overlay.toggleModal({
type: MODAL_TYPES.NEW_SUBSCRIPTON,
props: {
initialValue: inputValue,
},
});
}}
>
Subscribe to: {inputValue}{" "}
</Button>
)}
dropdownItem={(item) => {
console.log("dropdownItem,", item);
const badgeColor = color(`${item.color}`);
return (
<>
<chakra.span whiteSpace="nowrap">
{item.label}
</chakra.span>
<Badge
size="sm"
placeSelf="self-end"
colorScheme={item.abi ? "green" : "gray"}
>
ABI
</Badge>
<Badge
isTruncated
size="sm"
placeSelf="self-end"
bgColor={item.color}
color={
badgeColor.isDark()
? badgeColor.lighten(100).hex()
: badgeColor.darken(0.6).hex()
}
>
{item.address}
</Badge>
</>
);
}}
/>
{subscibedItem?.subscription?.id && (
<Stack spacing={1}>
<FormLabel pb={0}>Metric:</FormLabel>
<ButtonGroup spacing={0} display="flex">
<Button
flexGrow="1"
flexBasis="50px"
m={0}
colorScheme="orange"
bgColor="orange.600"
_active={{ bgColor: "orange.900" }}
borderRightRadius={0}
onClick={() =>
onMetricSelect({ type: CHART_METRICS.GENERIC })
}
isActive={
newChartForm[idx].type === CHART_METRICS.GENERIC
}
>
Balance
</Button>
<Button
m={0}
flexGrow="1"
flexBasis="50px"
borderRadius={0}
colorScheme="orange"
bgColor="orange.600"
_active={{ bgColor: "orange.900" }}
onClick={() =>
onMetricSelect({ type: CHART_METRICS.EVENTS })
}
isActive={newChartForm[idx].type === CHART_METRICS.EVENTS}
>
Events
</Button>
<Button
flexGrow="1"
flexBasis="50px"
m={0}
borderLeftRadius={0}
colorScheme="orange"
bgColor="orange.600"
_active={{ bgColor: "orange.900" }}
onClick={() =>
onMetricSelect({ type: CHART_METRICS.FUNCTIONS })
}
isActive={
newChartForm[idx].type === CHART_METRICS.FUNCTIONS
}
>
Functions
</Button>
</ButtonGroup>
<SuggestABI
stateContainer={newChartForm[idx]}
subscriptionId={subscibedItem.subscription.id}
onSelect={onAbiSuggestionSelect}
/>
</Stack>
)}
</Stack>
);
})}
</Stack>
</>
);
};
const ChakraNewDashboardChart = chakra(NewDashboardChart);
export default ChakraNewDashboardChart;

122
frontend/src/components/NewDashboardElement.js
Wyświetl plik

@ -1,122 +0,0 @@
import React, { useContext, useEffect } from "react";
import {
chakra,
FormLabel,
Input,
Stack,
InputGroup,
Box,
Button,
Table,
Th,
Td,
Tr,
Thead,
Tbody,
Center,
Checkbox,
CloseButton,
InputRightAddon,
Badge,
InputLeftAddon,
} from "@chakra-ui/react";
import { CheckCircleIcon } from "@chakra-ui/icons";
import { useStorage, useSubscriptions } from "../core/hooks";
import Downshift from "downshift";
import color from "color";
import OverlayContext from "../core/providers/OverlayProvider/context";
import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
import UIContext from "../core/providers/UIProvider/context";
const NewDashboardElement = (props) => {
const ui = useContext(UIContext);
const overlay = useContext(OverlayContext);
const [newDashboardForm, setNewDashboardForm] = useStorage(
sessionStorage,
"new_dashboard",
{
name: "",
subscriptions: [
{
label: "",
abi: false,
subscription_id: null,
isMethods: false,
isEvents: false,
generic: {
transactions: {
in: false,
out: false,
},
value: {
in: false,
out: false,
balance: false,
},
},
},
],
}
);
const subscriptions = useSubscriptions();
const [pickerItems, setPickerItems] = React.useState(
subscriptions.subscriptionsCache.data?.subscriptions
);
useEffect(() => {
newDashboardForm.subscriptions.forEach((element, idx) => {
const subscription =
subscriptions.subscriptionsCache.data?.subscriptions.find(
(subscription_item) =>
element.subscription_id === subscription_item.id
);
if (
element.subscription_id &&
subscription &&
newDashboardForm.subscriptions[idx].abi !== subscription?.abi
) {
const newestDashboardForm = { ...newDashboardForm };
newestDashboardForm.subscriptions[idx].abi = subscription.abi;
setNewDashboardForm(newestDashboardForm);
}
});
}, [
subscriptions.subscriptionsCache.data,
newDashboardForm,
setNewDashboardForm,
]);
useEffect(() => {
if (!subscriptions.subscriptionsCache.isLoading) {
const massaged = subscriptions.subscriptionsCache.data?.subscriptions.map(
(item) => {
return { value: item.address, ...item };
}
);
setPickerItems(massaged);
}
}, [
subscriptions.subscriptionsCache.data,
subscriptions.subscriptionsCache.isLoading,
]);
const filterFn = (item, inputValue) =>
(item.subscription_type_id === "ethereum_blockchain" ||
item.subscription_type_id === "polygon_blockchain") &&
(!inputValue ||
item.address.toUpperCase().includes(inputValue.toUpperCase()) ||
item.label.toUpperCase().includes(inputValue.toUpperCase()));
return (
<>
<Stack spacing="24px"></Stack>
</>
);
};
const ChakraNewDashboard = chakra(NewDashboardElement);
export default ChakraNewDashboard;

2
frontend/src/components/Sidebar.js
Wyświetl plik

@ -147,7 +147,7 @@ const Sidebar = () => {
colorScheme="orange"
size="sm"
onClick={() =>
overlay.toggleDrawer(DRAWER_TYPES.NEW_DASHBOARD)
overlay.toggleDrawer({ type: DRAWER_TYPES.NEW_DASHBOARD })
}
// w="100%"
// borderRadius={0}

207
frontend/src/components/SuggestABI.js 100644
Wyświetl plik

@ -0,0 +1,207 @@
import React, { useContext, useEffect, useState } from "react";
import {
chakra,
FormLabel,
Input,
Stack,
InputGroup,
Box,
Button,
Table,
Th,
Td,
Tr,
Thead,
Tbody,
Center,
Checkbox,
CloseButton,
InputRightAddon,
Badge,
InputLeftAddon,
Spinner,
Heading,
Menu,
MenuButton,
MenuList,
MenuItem,
MenuGroup,
MenuDivider,
ButtonGroup,
Text,
} from "@chakra-ui/react";
import { CheckCircleIcon } from "@chakra-ui/icons";
import { useSubscription, usePresignedURL } from "../core/hooks";
import Downshift from "downshift";
import color from "color";
import OverlayContext from "../core/providers/OverlayProvider/context";
import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
import UIContext from "../core/providers/UIProvider/context";
import { v4 } from "uuid";
import AutoCompleter from "./AutoCompleter";
import { CHART_METRICS } from "../core/constants";
const SuggestABI = ({ subscriptionId, onSelect, stateContainer }) => {
const ui = useContext(UIContext);
const overlay = useContext(OverlayContext);
const { subscriptionLinksCache } = useSubscription({
id: subscriptionId,
});
const { data, isLoading } = usePresignedURL({
url: subscriptionLinksCache?.data?.data?.url,
isEnabled: true,
id: subscriptionId,
cacheType: "abi",
requestNewURLCallback: subscriptionLinksCache.refetch,
});
const [pickerItems, setPickerItems] = React.useState();
// useEffect(() => {
// newDashboardForm.subscriptions.forEach((element, idx) => {
// const subscription =
// subscriptions.subscriptionsCache.data?.subscriptions.find(
// (subscription_item) =>
// element.subscription_id === subscription_item.id
// );
// if (
// element.subscription_id &&
// subscription &&
// newDashboardForm.subscriptions[idx].abi !== subscription?.abi
// ) {
// const newestDashboardForm = { ...newDashboardForm };
// newestDashboardForm.subscriptions[idx].abi = subscription.abi;
// setNewDashboardForm(newestDashboardForm);
// }
// });
// }, [
// subscriptions.subscriptionsCache.data,
// newDashboardForm,
// setNewDashboardForm,
// ]);
useEffect(() => {
if (!isLoading) {
const massaged = data?.map((item) => {
return { value: item.name ?? item.type, ...item };
});
setPickerItems(
massaged?.filter((item) => item.type === stateContainer.type)
);
}
}, [data, isLoading, stateContainer]);
const filterFn = (item, inputValue) =>
!inputValue || item.value.toUpperCase().includes(inputValue.toUpperCase());
if (isLoading || !pickerItems) return <Spinner />;
console.log("pickerItems", pickerItems);
return (
<>
<Stack spacing={1}>
{stateContainer.type === CHART_METRICS.EVENTS && (
<Stack>
<FormLabel pb={0}>Event:</FormLabel>
<AutoCompleter
itemIdx={""}
pickerItems={pickerItems.filter((item) => item.type === "event")}
initialSelectedItem={stateContainer}
itemToString={(item) => item.name}
onSelect={onSelect}
getLeftAddonColor={(item) => item?.color ?? "inherit"}
getLabelColor={() => undefined}
placeholder="Select metric"
getDefaultValue={(item) => (item?.value ? item.value : "")}
filterFn={filterFn}
empyListCTA={() => (
<Text alignSelf="center">No Events found {`>_<`}</Text>
)}
dropdownItem={(item) => {
console.log("dropdownItem,", item);
return (
<>
<chakra.span whiteSpace="nowrap">{item.value}</chakra.span>
<Badge isTruncated size="sm" placeSelf="self-end">
{item.type}
</Badge>
</>
);
}}
/>
</Stack>
)}
{stateContainer.type === CHART_METRICS.FUNCTIONS && (
<Stack>
<FormLabel pb={0}>Function:</FormLabel>
<AutoCompleter
itemIdx={""}
pickerItems={pickerItems.filter(
(item) => item.type === "function"
)}
initialSelectedItem={stateContainer}
itemToString={(item) => item.name}
onSelect={onSelect}
getLeftAddonColor={(item) => item?.color ?? "inherit"}
getLabelColor={() => undefined}
placeholder="Select metric"
getDefaultValue={(item) => (item?.value ? item.value : "")}
filterFn={filterFn}
empyListCTA={() => (
<Text alignSelf="center">No Functions found {`>_<`}</Text>
)}
dropdownItem={(item) => {
console.log("dropdownItem,", item);
return (
<>
<chakra.span whiteSpace="nowrap">{item.value}</chakra.span>
<Badge isTruncated size="sm" placeSelf="self-end">
{item.type}
</Badge>
</>
);
}}
/>
</Stack>
)}
{stateContainer.type === CHART_METRICS.GENERIC && (
<Stack>
<FormLabel pb={0}>Balance:</FormLabel>
<AutoCompleter
itemIdx={""}
pickerItems={pickerItems}
initialSelectedItem={stateContainer}
itemToString={(item) => item.name}
onSelect={onSelect}
getLeftAddonColor={(item) => item?.color ?? "inherit"}
getLabelColor={() => undefined}
placeholder="Select metric"
getDefaultValue={(item) => (item?.value ? item.value : "")}
filterFn={filterFn}
empyListCTA={() => ""}
dropdownItem={(item) => {
console.log("dropdownItem,", item);
return (
<>
<chakra.span whiteSpace="nowrap">{item.value}</chakra.span>
<Badge isTruncated size="sm" placeSelf="self-end">
{item.type}
</Badge>
</>
);
}}
/>
</Stack>
)}
</Stack>
</>
);
};
const ChakraSuggestABI = chakra(SuggestABI);
export default ChakraSuggestABI;

6
frontend/src/core/constants.js
Wyświetl plik

@ -71,3 +71,9 @@ export const TIME_RANGE_SECONDS = {
week: 86400 * 7,
month: 86400 * 28,
};
export const CHART_METRICS = {
GENERIC: "genetic",
FUNCTIONS: "function",
EVENTS: "event",
};

3
frontend/src/core/hooks/index.js
Wyświetl plik

@ -3,6 +3,7 @@ export { default as useAuthResultHandler } from "./useAuthResultHandler";
export { default as useChangePassword } from "./useChangePassword";
export { default as useClientID } from "./useClientID";
export { default as useCodeVerification } from "./useCodeVerification";
export { default as useDashboard } from "./useDashboard";
export { default as useForgotPassword } from "./useForgotPassword";
export { default as useInviteAccept } from "./useInviteAccept";
export { default as useJournalEntry } from "./useJournalEntry";
@ -18,8 +19,10 @@ export { default as useStatus } from "./useStatus";
export { default as useStorage } from "./useStorage";
export { default as useStream } from "./useStream";
export { default as useStripe } from "./useStripe";
export { default as useSubscription } from "./useSubscription";
export { default as useSubscriptions } from "./useSubscriptions";
export { default as useToast } from "./useToast";
export { default as useTokens } from "./useTokens";
export { default as useTxInfo } from "./useTxInfo";
export { default as useUser } from "./useUser";
export { default as useWindowSize } from "./useWindowSize";

8
frontend/src/core/hooks/usePresignedURL.js
Wyświetl plik

@ -11,6 +11,7 @@ const usePresignedURL = ({
requestNewURLCallback,
isEnabled,
}) => {
console.log("usePresignedURL:", url, id, isEnabled);
const toast = useToast();
const getFromPresignedURL = async () => {
@ -20,15 +21,17 @@ const usePresignedURL = ({
// url: `https://example.com/s3`,
method: "GET",
});
console.log("getFromPresignedURL", response);
return response.data;
};
const { data, isLoading, error, refetch } = useQuery(
[`${cacheType}`, { id }],
["presignedURL", cacheType, id],
getFromPresignedURL,
{
...queryCacheProps,
enabled: isEnabled && url ? true : false,
keepPreviousData: true,
onError: (e) => {
if (
e?.response?.data?.includes("Request has expired") ||
@ -44,9 +47,10 @@ const usePresignedURL = ({
useEffect(() => {
if (url && isEnabled) {
console.log("useeffect:", url, isEnabled);
refetch();
}
}, [url, refetch, isEnabled]);
}, [url, isEnabled, refetch]);
return {
data,

6
frontend/src/core/hooks/useSubscription.js
Wyświetl plik

@ -9,9 +9,10 @@ const useSubscription = ({ id }) => {
const toast = useToast();
const user = useContext(UserContext);
console.log("useSubscription:", id, user);
const subscriptionLinksCache = useQuery(
["dashboardLinks", { id }],
SubscriptionsService.getSubscriptionABI,
["dashboardLinks", id],
SubscriptionsService.getSubscriptionABI(id),
{
...queryCacheProps,
onError: (error) => {
@ -20,6 +21,7 @@ const useSubscription = ({ id }) => {
enabled: !!user && !!id,
}
);
return { subscriptionLinksCache };
};
export default useSubscription;

20
frontend/src/core/hooks/useToast.js
Wyświetl plik

@ -24,15 +24,17 @@ const useToast = () => {
detail: userMessage,
});
}
chakraToast({
id: `${userTitle}${userMessage}${type}`,
position: "bottom",
title: userTitle,
description: userMessage,
status: type,
// duration: 3000,
});
const id = `${userTitle}${userMessage}${type}`;
if (!chakraToast.isActive(id)) {
chakraToast({
id: id,
position: "bottom",
title: userTitle,
description: userMessage,
status: type,
// duration: 3000,
});
}
},
[chakraToast]
);

49
frontend/src/core/providers/OverlayProvider/index.js
Wyświetl plik

@ -36,7 +36,7 @@ import UserContext from "../UserProvider/context";
import UIContext from "../UIProvider/context";
import useDashboard from "../../hooks/useDashboard";
import SignUp from "../../../components/SignUp";
import NewDashboardElement from "../../../components/NewDashboardElement";
import NewDashboardElement from "../../../components/NewDashboardChart";
const ForgotPassword = React.lazy(() =>
import("../../../components/ForgotPassword")
);
@ -59,7 +59,10 @@ const OverlayProvider = ({ children }) => {
type: MODAL_TYPES.OFF,
props: undefined,
});
const [drawer, toggleDrawer] = useState(DRAWER_TYPES.OFF);
const [drawer, toggleDrawer] = useState({
type: DRAWER_TYPES.OFF,
props: undefined,
});
const [alertCallback, setAlertCallback] = useState(null);
const drawerDisclosure = useDisclosure();
const modalDisclosure = useDisclosure();
@ -74,9 +77,9 @@ const OverlayProvider = ({ children }) => {
}, [modal.type, modalDisclosure]);
useLayoutEffect(() => {
if (drawer === DRAWER_TYPES.OFF && drawerDisclosure.isOpen) {
if (drawer.type === DRAWER_TYPES.OFF && drawerDisclosure.isOpen) {
drawerDisclosure.onClose();
} else if (drawer !== DRAWER_TYPES.OFF && !drawerDisclosure.isOpen) {
} else if (drawer.type !== DRAWER_TYPES.OFF && !drawerDisclosure.isOpen) {
drawerDisclosure.onOpen();
}
}, [drawer, drawerDisclosure]);
@ -92,7 +95,7 @@ const OverlayProvider = ({ children }) => {
};
console.assert(
Object.values(DRAWER_TYPES).some((element) => element === drawer)
Object.values(DRAWER_TYPES).some((element) => element === drawer.type)
);
console.assert(
Object.values(MODAL_TYPES).some((element) => element === modal.type)
@ -118,7 +121,7 @@ const OverlayProvider = ({ children }) => {
}, [ui.isAppView, ui.isAppReady, user, ui.isLoggingOut, modal.type]);
const finishNewDashboard = () => {
toggleDrawer(DRAWER_TYPES.OFF);
toggleDrawer({ type: DRAWER_TYPES.OFF, props: undefined });
window.sessionStorage.removeItem("new_dashboard");
};
@ -265,19 +268,23 @@ const OverlayProvider = ({ children }) => {
<DrawerContent overflowY="scroll">
<DrawerCloseButton />
<DrawerHeader borderBottomWidth="1px">
{DRAWER_TYPES.NEW_DASHBOARD && "New dashboard"}
{DRAWER_TYPES.NEW_DASHBOARD_ITEM && "New dashboard element"}
{drawer.type === DRAWER_TYPES.NEW_DASHBOARD && "New dashboard"}
{drawer.type === DRAWER_TYPES.NEW_DASHBOARD_ITEM &&
"New dashboard element"}
</DrawerHeader>
<DrawerBody h="auto">
{DRAWER_TYPES.NEW_DASHBOARD && (
{drawer.type === DRAWER_TYPES.NEW_DASHBOARD && (
<Suspense fallback={<Spinner />}>
<NewDashboard firstField={firstField} />
<NewDashboard firstField={firstField} props={drawer.props} />
</Suspense>
)}
{DRAWER_TYPES.NEW_DASHBOARD_ITEM && (
{drawer.type === DRAWER_TYPES.NEW_DASHBOARD_ITEM && (
<Suspense fallback={<Spinner />}>
<NewDashboardElement firstField={firstField} />
<NewDashboardElement
firstField={firstField}
props={drawer.props}
/>
</Suspense>
)}
</DrawerBody>
@ -285,7 +292,17 @@ const OverlayProvider = ({ children }) => {
<Button
variant="outline"
mr={3}
onClick={() => toggleAlert(() => finishNewDashboard())}
onClick={() => {
console.log("cancel click on drawer", drawer.type);
if (drawer.type === DRAWER_TYPES.NEW_DASHBOARD) {
toggleAlert(() => finishNewDashboard());
}
if (drawer.type === DRAWER_TYPES.NEW_DASHBOARD_ITEM) {
toggleAlert(() =>
toggleDrawer({ type: DRAWER_TYPES.OFF, props: undefined })
);
}
}}
>
Cancel
</Button>
@ -293,8 +310,10 @@ const OverlayProvider = ({ children }) => {
colorScheme="blue"
isLoading={createDashboard.isLoading}
onClick={() => {
DRAWER_TYPES.NEW_DASHBOARD && submitNewDashboard();
DRAWER_TYPES.NEW_DASHBOARD_ITEM && submitNewDashboardItem();
drawer.type === DRAWER_TYPES.NEW_DASHBOARD &&
submitNewDashboard();
drawer.type === DRAWER_TYPES.NEW_DASHBOARD_ITEM &&
submitNewDashboardItem();
}}
>
Submit

3
frontend/src/core/services/subscriptions.service.js
Wyświetl plik

@ -68,7 +68,8 @@ export const deleteSubscription = () => (id) => {
});
};
export const getSubscriptionABI = () => (id) => {
export const getSubscriptionABI = (id) => () => {
console.log("service", id);
return http({
method: "GET",
url: `${API}/subscriptions/${id}/abi`,