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

add props to modal state

pull/379/head
Tim Pechersky 2021-11-09 12:28:41 +00:00
rodzic 680babf9e9
commit 3a0d46fe55
14 zmienionych plików z 63 dodań i 50 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
frontend/pages/index.js
Wyświetl plik

@ -396,7 +396,7 @@ const Homepage = () => {
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer want to find more button`,
}
);
toggleModal(MODAL_TYPES.HUBSPOT);
toggleModal({ type: MODAL_TYPES.HUBSPOT });
}}
>
request early access

2
frontend/pages/subscriptions.js
Wyświetl plik

@ -34,7 +34,7 @@ const Subscriptions = () => {
};
const newSubscriptionClicked = () => {
modal.toggleModal(MODAL_TYPES.NEW_SUBSCRIPTON);
modal.toggleModal({ type: MODAL_TYPES.NEW_SUBSCRIPTON });
};
return (
<Box w="100%" px="7%" pt={2}>

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

@ -45,7 +45,9 @@ const AddNewIconButton = (props) => {
New Dashboard...
</MenuItem>
<MenuItem
onClick={() => modal.toggleModal(MODAL_TYPES.NEW_SUBSCRIPTON)}
onClick={() =>
modal.toggleModal({ type: MODAL_TYPES.NEW_SUBSCRIPTON })
}
>
New Subscription...
</MenuItem>

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

@ -20,7 +20,7 @@ const ForgotPassword = ({ toggleModal }) => {
useEffect(() => {
if (!data) return;
toggleModal(MODAL_TYPES.OFF);
toggleModal({ type: MODAL_TYPES.OFF });
}, [data, toggleModal, toast]);
return (

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

@ -14,7 +14,7 @@ const RequestIntegration = ({ toggleModal, formId }) => {
event.data.eventName === "onFormSubmitted"
) {
if (event.data.id === formId) {
toggleModal(MODAL_TYPES.OFF);
toggleModal({ type: MODAL_TYPES.OFF });
toast("Request sent", "success");
}
}

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

@ -100,7 +100,7 @@ const LandingNavbar = () => {
{!ui.isLoggedIn && (
<Button
color="white"
onClick={() => toggleModal(MODAL_TYPES.LOGIN)}
onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
fontWeight="400"
>
Log in

21
frontend/src/components/NewDashboard.js
Wyświetl plik

@ -247,11 +247,11 @@ const NewDashboard = (props) => {
m={0}
isTruncated
onClick={() => {
overlay.toggleModal(
MODAL_TYPES.NEW_SUBSCRIPTON
);
overlay.setModalProps({
initialValue: inputValue,
overlay.toggleModal({
type: MODAL_TYPES.NEW_SUBSCRIPTON,
props: {
initialValue: inputValue,
},
});
}}
>
@ -334,9 +334,9 @@ const NewDashboard = (props) => {
m={0}
size="sm"
onClick={() =>
overlay.toggleModal(
MODAL_TYPES.NEW_SUBSCRIPTON
)
overlay.toggleModal({
type: MODAL_TYPES.NEW_SUBSCRIPTON,
})
}
>
New subscription
@ -393,7 +393,10 @@ const NewDashboard = (props) => {
py={2}
disabled={!subscibedItem.address}
onClick={() =>
overlay.toggleModal(MODAL_TYPES.UPLOAD_ABI)
overlay.toggleModal({
type: MODAL_TYPES.UPLOAD_ABI,
props: { id: subscibedItem.id },
})
}
>
Upload

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

@ -96,7 +96,7 @@ const Sidebar = () => {
<Menu iconShape="square">
<MenuItem
onClick={() => {
ui.toggleModal(MODAL_TYPES.LOGIN);
ui.toggleModal({ type: MODAL_TYPES.LOGIN });
ui.setSidebarToggled(false);
}}
>

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

@ -26,7 +26,7 @@ const SignIn = ({ toggleModal }) => {
return;
}
toggleModal(MODAL_TYPES.OFF);
toggleModal({ type: MODAL_TYPES.OFF });
}, [data, toggleModal]);
return (
@ -84,7 +84,7 @@ const SignIn = ({ toggleModal }) => {
cursor="pointer"
color="blue.800"
as="span"
onClick={() => toggleModal(MODAL_TYPES.FORGOT)}
onClick={() => toggleModal({ type: MODAL_TYPES.FORGOT })}
>
Forgot your password?
</Box>

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

@ -27,7 +27,7 @@ const SignUp = ({ toggleModal }) => {
useEffect(() => {
if (isSuccess) {
ui.toggleModal(MODAL_TYPES.OFF);
ui.toggleModal({ type: MODAL_TYPES.OFF });
}
}, [isSuccess, toggleModal, ui]);
@ -101,7 +101,7 @@ const SignUp = ({ toggleModal }) => {
cursor="pointer"
color="blue.400"
as="span"
onClick={() => toggleModal(MODAL_TYPES.LOGIN)}
onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
>
Login
</Box>

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

@ -119,7 +119,7 @@ const SubscriptionsList = ({ emptyCTA }) => {
py={2}
disabled={!subscription.address}
onClick={() =>
overlay.toggleModal(MODAL_TYPES.UPLOAD_ABI)
overlay.toggleModal({ type: MODAL_TYPES.UPLOAD_ABI })
}
>
Upload

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

@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import { Flex, ButtonGroup, Button, useToast, Spinner } from "@chakra-ui/react";
import { modifySubscription } from "../core/services/subscriptions.service";
// import hljs from "highlight.js";
// import ReactQuill from "react-quill"; // ES6
import AceEditor from "react-ace";
@ -44,7 +45,7 @@ const ABIUPLoad = () => {
};
const handleSubmit = () => {
if (json) {
setSubmitting(true);
modifySubscription({ id: abi: json });
}
};

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

@ -45,21 +45,23 @@ const UploadABI = React.lazy(() => import("../../../components/UploadABI"));
const OverlayProvider = ({ children }) => {
const ui = useContext(UIContext);
const { user } = useContext(UserContext);
const [modal, toggleModal] = useState(MODAL_TYPES.OFF);
const [modal, toggleModal] = useState({
type: MODAL_TYPES.OFF,
props: undefined,
});
const [drawer, toggleDrawer] = useState(DRAWER_TYPES.OFF);
const [alertCallback, setAlertCallback] = useState(null);
const drawerDisclosure = useDisclosure();
const modalDisclosure = useDisclosure();
const alertDisclosure = useDisclosure();
const [modalProps, setModalProps] = useState();
useLayoutEffect(() => {
if (modal === MODAL_TYPES.OFF && modalDisclosure.isOpen) {
if (modal.type === MODAL_TYPES.OFF && modalDisclosure.isOpen) {
modalDisclosure.onClose();
} else if (modal !== MODAL_TYPES.OFF && !modalDisclosure.isOpen) {
} else if (modal.type !== MODAL_TYPES.OFF && !modalDisclosure.isOpen) {
modalDisclosure.onOpen();
}
}, [modal, modalDisclosure]);
}, [modal.type, modalDisclosure]);
useLayoutEffect(() => {
if (drawer === DRAWER_TYPES.OFF && drawerDisclosure.isOpen) {
@ -83,7 +85,7 @@ const OverlayProvider = ({ children }) => {
Object.values(DRAWER_TYPES).some((element) => element === drawer)
);
console.assert(
Object.values(MODAL_TYPES).some((element) => element === modal)
Object.values(MODAL_TYPES).some((element) => element === modal.type)
);
const cancelRef = React.useRef();
@ -96,18 +98,18 @@ const OverlayProvider = ({ children }) => {
!user?.username &&
!ui.isLoggingOut &&
!ui.isLoggingIn &&
!modal
!modal.type
) {
toggleModal(MODAL_TYPES.LOGIN);
toggleModal({ type: MODAL_TYPES.LOGIN });
} else if (user && ui.isLoggingOut) {
toggleModal(MODAL_TYPES.OFF);
toggleModal({ type: MODAL_TYPES.OFF });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ui.isAppView, ui.isAppReady, user, ui.isLoggingOut, modal]);
}, [ui.isAppView, ui.isAppReady, user, ui.isLoggingOut, modal.type]);
return (
<OverlayContext.Provider
value={{ modal, toggleModal, drawer, toggleDrawer, setModalProps }}
value={{ modal, toggleModal, drawer, toggleDrawer }}
>
<AlertDialog
isOpen={alertDisclosure.isOpen}
@ -142,7 +144,7 @@ const OverlayProvider = ({ children }) => {
<Modal
isOpen={modalDisclosure.isOpen}
onClose={() => toggleModal(MODAL_TYPES.OFF)}
onClose={() => toggleModal({ type: MODAL_TYPES.OFF })}
size="2xl"
scrollBehavior="outside"
trapFocus={false}
@ -151,44 +153,48 @@ const OverlayProvider = ({ children }) => {
<ModalContent>
<ModalHeader bgColor="white.200" py={2} fontSize="lg">
{modal === MODAL_TYPES.NEW_SUBSCRIPTON &&
{modal.type === MODAL_TYPES.NEW_SUBSCRIPTON &&
"Subscribe to a new address"}
{modal === MODAL_TYPES.FORGOT && "Forgot Password"}
{modal === MODAL_TYPES.HUBSPOT && "Join the waitlist"}
{modal === MODAL_TYPES.LOGIN && "Login now"}
{modal === MODAL_TYPES.SIGNUP && "Create an account"}
{modal === MODAL_TYPES.UPLOAD_ABI && "Assign ABI"}
{modal.type === MODAL_TYPES.FORGOT && "Forgot Password"}
{modal.type === MODAL_TYPES.HUBSPOT && "Join the waitlist"}
{modal.type === MODAL_TYPES.LOGIN && "Login now"}
{modal.type === MODAL_TYPES.SIGNUP && "Create an account"}
{modal.type === MODAL_TYPES.UPLOAD_ABI && "Assign ABI"}
</ModalHeader>
<Divider />
<ModalCloseButton />
<ModalBody
zIndex={100002}
bgColor={modal === MODAL_TYPES.UPLOAD_ABI ? "white.200" : undefined}
bgColor={
modal.type === MODAL_TYPES.UPLOAD_ABI ? "white.200" : undefined
}
>
<Suspense fallback={<Spinner />}>
{modal === MODAL_TYPES.NEW_SUBSCRIPTON && (
{modal.type === MODAL_TYPES.NEW_SUBSCRIPTON && (
<NewSubscription
onClose={() => toggleModal(MODAL_TYPES.OFF)}
onClose={() => toggleModal({ type: MODAL_TYPES.OFF })}
isModal={true}
{...modalProps}
{...modal.props}
/>
)}
{modal === MODAL_TYPES.FORGOT && <ForgotPassword />}
{modal === MODAL_TYPES.HUBSPOT && (
{modal.type === MODAL_TYPES.FORGOT && <ForgotPassword />}
{modal.type === MODAL_TYPES.HUBSPOT && (
<HubspotForm
toggleModal={toggleModal}
title={"Join the waitlist"}
formId={"1897f4a1-3a00-475b-9bd5-5ca2725bd720"}
/>
)}
{modal === MODAL_TYPES.LOGIN && (
{modal.type === MODAL_TYPES.LOGIN && (
<SignIn toggleModal={toggleModal} />
)}
{
modal === MODAL_TYPES.SIGNUP && ""
modal.type === MODAL_TYPES.SIGNUP && ""
// <SignUp toggleModal={toggleModal} />
}
{modal === MODAL_TYPES.UPLOAD_ABI && <UploadABI />}
{modal.type === MODAL_TYPES.UPLOAD_ABI && (
<UploadABI {...modal.props} />
)}
</Suspense>
</ModalBody>
</ModalContent>

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

@ -50,10 +50,11 @@ export const createSubscription =
export const modifySubscription =
() =>
({ id, label, color }) => {
({ id, label, color, abi }) => {
const data = new FormData();
color && data.append("color", color);
label && data.append("label", label);
abi && data.append("abi", abi);
return http({
method: "PUT",
url: `${API}/subscriptions/${id}`,