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

remove uuids from .map, add React.memo

pull/509/head
Tim Pechersky 2021-12-21 14:02:45 +00:00
rodzic 6f2813710a
commit 2a1c2013d0
11 zmienionych plików z 53 dodań i 143 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
frontend/package.json
Wyświetl plik

@ -39,7 +39,7 @@
"react-hook-form": "^6.9.2",
"react-hubspot-form": "^1.3.7",
"react-icons": "^4.3.1",
"react-pro-sidebar": "^0.6.0",
"react-pro-sidebar": "^0.7.1",
"react-query": "^3.18.1",
"react-showdown": "^2.3.0",
"react-slick": "^0.28.1",

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

@ -20,7 +20,6 @@ import { useRouter, useSubscriptions } from "../../src/core/hooks";
import { BiTrash } from "react-icons/bi";
import OverlayContext from "../../src/core/providers/OverlayProvider/context";
import SubscriptionReport from "../../src/components/SubscriptionReport";
import { v4 } from "uuid";
import { DRAWER_TYPES } from "../../src/core/providers/OverlayProvider/constants";
import Page404 from "../../src/components/FourOFour";
import { BsGear } from "react-icons/bs";
@ -158,7 +157,7 @@ const Analytics = () => {
)?.label;
return (
<Flex
key={v4()}
key={`${dashboardId}-subscription-report-${key}`}
flexBasis={plotMinW}
flexGrow={1}
minW={plotMinW}

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

@ -46,9 +46,9 @@ const AccountIconButton = (props) => {
</MenuGroup>
<MenuDivider />
{ui.isMobileView &&
ALL_NAV_PATHES.map((pathToLink) => {
ALL_NAV_PATHES.map((pathToLink, idx) => {
return (
<MenuItem key={v4()}>
<MenuItem key={`AccountIconButton-All_nav_pathes-${idx}`}>
<RouterLink href={pathToLink.path}>
{pathToLink.title}
</RouterLink>

3
frontend/src/components/AutoCompleter.js
Wyświetl plik

@ -1,6 +1,5 @@
import React, { useContext } from "react";
import Downshift from "downshift";
import { v4 } from "uuid";
import {
Stack,
Box,
@ -124,7 +123,7 @@ const AutoCompleter = ({
px={4}
py={1}
alignItems="center"
key={v4()}
key={`autocomplete-item-${index}`}
{...getItemProps({
index,
item,

98
frontend/src/components/CheckboxABI.js
Wyświetl plik

@ -145,101 +145,3 @@ const SuggestABI = ({ subscriptionId, state }) => {
const ChakraSuggestABI = chakra(SuggestABI);
export default ChakraSuggestABI;
{
/* <Stack pl={6} spacing={0}>
{getEvents(pickerItems).map((event, idx) => {
const pickedEvents = getEvents(pickedItems);
return (
<Stack
px={2}
key={v4()}
direction="row"
bgColor={idx % 2 == 0 ? "gray.50" : "gray.100"}
>
<Checkbox
isChecked={pickedEvents.some(
(pickedEvent) => pickedEvent.value === event.value
)}
onChange={() => {
const changedIndex = pickedItems.findIndex(
(pickedItem) =>
event.type === "event" &&
pickedItem.value === event.value
);
if (changedIndex === -1) {
setPickedItems((currentlyPicked) => {
const newPicked = [...currentlyPicked];
newPicked.push(event);
return newPicked;
});
} else {
setPickedItems((currentlyPicked) => {
const newPicked = [...currentlyPicked];
newPicked.splice(changedIndex, 1);
return newPicked;
});
}
}}
>
{event.value}
</Checkbox>
<Spacer />
{event.stateMutability === "view" && (
<Badge variant="solid" colorScheme="orange" size="sm">
View
</Badge>
)}
{event.stateMutability === "payable" && (
<Badge variant="solid" colorScheme="blue" size="sm">
Payable
</Badge>
)}
{event.stateMutability === "nonpayable" && (
<Badge variant="solid" colorScheme="green" size="sm">
Non-Payable
</Badge>
)}
</Stack>
);
})}
{pickerItems
?.filter((unfilteredItem) => unfilteredItem.type === "function")
.map((item, idx) => {
return (
<Stack
px={2}
key={v4()}
direction="row"
bgColor={idx % 2 == 0 ? "gray.50" : "gray.100"}
>
<Checkbox
isChecked={pickedItems.some(
(pickedItem) =>
item.type === "function" &&
pickedItem.value === item.value
)}
>
{item.value}
</Checkbox>
<Spacer />
{item.stateMutability === "view" && (
<Badge variant="solid" colorScheme="orange" size="sm">
View
</Badge>
)}
{item.stateMutability === "payable" && (
<Badge variant="solid" colorScheme="blue" size="sm">
Payable
</Badge>
)}
{item.stateMutability === "nonpayable" && (
<Badge variant="solid" colorScheme="green" size="sm">
Non-Payable
</Badge>
)}
</Stack>
);
})}
</Stack> */
}

3
frontend/src/components/CheckboxGrouped.js
Wyświetl plik

@ -1,6 +1,5 @@
import React from "react";
import { Stack, Checkbox } from "@chakra-ui/react";
import { v4 } from "uuid";
const CheckboxGroupped = ({
groupName,
@ -27,7 +26,7 @@ const CheckboxGroupped = ({
return (
<Stack
px={2}
key={v4()}
key={`list-item-checkbox-${idx}`}
direction="row"
bgColor={idx % 2 == 0 ? "gray.50" : "gray.100"}
>

12
frontend/src/components/Footer.js
Wyświetl plik

@ -110,9 +110,9 @@ const Footer = () => (
</SocialButton>
</Stack>
</Stack>
{Object.values(FOOTER_COLUMNS).map((columnEnum) => {
{Object.values(FOOTER_COLUMNS).map((columnEnum, colIndex) => {
return (
<Stack align={"flex-start"} key={v4()}>
<Stack align={"flex-start"} key={`footer-list-column-${colIndex}`}>
{ALL_NAV_PATHES.filter(
(navPath) => navPath.footerCategory === columnEnum
).length > 0 && (
@ -120,9 +120,13 @@ const Footer = () => (
<ListHeader>{columnEnum}</ListHeader>
{ALL_NAV_PATHES.filter(
(navPath) => navPath.footerCategory === columnEnum
).map((linkItem) => {
).map((linkItem, linkItemIndex) => {
return (
<RouterLink passHref href={linkItem.path} key={v4()}>
<RouterLink
passHref
href={linkItem.path}
key={`footer-list-link-item-${linkItemIndex}-col-${colIndex}`}
>
<Link {...LINKS_SIZES}>{linkItem.title}</Link>
</RouterLink>
);

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

@ -103,4 +103,4 @@ const Report = ({ data, timeRange }) => {
);
};
export default Report;
export default React.memo(Report);

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

@ -102,9 +102,9 @@ const Sidebar = () => {
Login
</MenuItem>
{ui.isMobileView &&
ALL_NAV_PATHES.map((pathToLink) => {
ALL_NAV_PATHES.map((pathToLink, linkItemIndex) => {
return (
<MenuItem key={v4()}>
<MenuItem key={`mobile-all-nav-path-item-${linkItemIndex}`}>
<RouterLink href={pathToLink.path}>
{pathToLink.title}
</RouterLink>

45
frontend/src/components/SubscriptionReport.js
Wyświetl plik

@ -1,4 +1,4 @@
import React from "react";
import React, { useMemo } from "react";
import { usePresignedURL } from "../core/hooks";
import Report from "./Report";
import {
@ -30,6 +30,27 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
hideToastOn404: true,
});
const plotMinW = "250px";
const eventKeys = useMemo(
() =>
Object.keys(data?.events ?? {}).length > 0
? Object.keys(data?.events)
: undefined,
[data]
);
const methodKeys = useMemo(
() =>
Object.keys(data?.methods ?? {}).length > 0
? Object.keys(data?.methods)
: undefined,
[data]
);
const genericKeys = useMemo(
() =>
Object.keys(data?.generic ?? {}).length > 0
? Object.keys(data?.generic)
: undefined,
[data]
);
if (failureCount < 1 && (!data || isLoading)) return <Spinner />;
if (failureCount >= 1 && (!data || isLoading))
return (
@ -79,7 +100,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
flexWrap="wrap"
alignContent={["inherit", "flex-start", null]}
>
{data?.web3_metric.map((metric) => {
{data?.web3_metric.map((metric, web3MetricIndex) => {
return (
<Flex
flexGrow={1}
@ -88,7 +109,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
p={2}
m={1}
bgColor="blue.100"
key={v4()}
key={`web3-metric-${web3MetricIndex}`}
size="sm"
fontWeight="600"
boxShadow="sm"
@ -111,7 +132,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
);
})}
</Flex>
{data?.events && Object.keys(data?.events) && (
{data?.events && eventKeys && (
<Flex
w="100%"
h="auto"
@ -122,10 +143,10 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
<Heading size="md" pt={4}>
Events
</Heading>
{Object.keys(data.events).map((key) => {
{eventKeys.map((key) => {
return (
<Flex
key={v4()}
key={`events-list-${key}`}
flexBasis={plotMinW}
flexGrow={1}
minW={plotMinW}
@ -154,7 +175,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
})}
</Flex>
)}
{data?.functions && Object.keys(data?.functions) && (
{data?.functions && methodKeys && (
<Flex
w="100%"
h="auto"
@ -165,10 +186,10 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
<Heading size="md" pt={4}>
functions
</Heading>
{Object.keys(data.functions).map((key) => {
{methodKeys.map((key) => {
return (
<Flex
key={v4()}
key={`methods-list-${key}`}
flexBasis={plotMinW}
flexGrow={1}
minW={plotMinW}
@ -197,7 +218,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
})}
</Flex>
)}
{data?.generic && Object.keys(data?.generic) && (
{data?.generic && genericKeys && (
<Flex
w="100%"
h="auto"
@ -211,7 +232,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
{Object.keys(data.generic).map((key) => {
return (
<Flex
key={v4()}
key={`generics-list-${key}`}
flexBasis={plotMinW}
flexGrow={1}
minW={plotMinW}
@ -244,4 +265,4 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
);
};
export default SubscriptionReport;
export default React.memo(SubscriptionReport);

18
frontend/src/core/providers/UIProvider/index.js
Wyświetl plik

@ -260,26 +260,12 @@ const UIProvider = ({ children }) => {
}, [onboardingStep, router.nextRouter.pathname, user, isAppReady]);
useEffect(() => {
if (
isInit &&
router.nextRouter.isReady &&
onboardingState &&
!isLoggingOut &&
!isLoggingIn &&
onboardingRedirectCheckPassed
) {
if (isInit && router.nextRouter.isReady && !isLoggingOut && !isLoggingIn) {
setAppReady(true);
} else {
setAppReady(false);
}
}, [
isInit,
router,
onboardingState,
isLoggingOut,
isLoggingIn,
onboardingRedirectCheckPassed,
]);
}, [isInit, router, isLoggingOut, isLoggingIn]);
//***************New chart item 's state ************************/
const dashboardUpdateReducer = useCallback(