fix: add App specific modalstack

LN-Zap · Aug 27, 2019 · 8b7d3b2 · 8b7d3b2
1 parent 79bbca3
commit 8b7d3b2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 137 deletions.
diff --git a/renderer/containers/App/ModalStack.js b/renderer/containers/App/ModalStack.js
@@ -1,11 +1,7 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import { connect } from 'react-redux'
-import { animated, Transition } from 'react-spring/renderprops.cjs'
-import styled from 'styled-components'
 import { closeModal, modalSelectors } from 'reducers/modal'
-import { Modal, ModalOverlayStyles } from 'components/UI'
-import { useOnKeydown } from 'hooks'
+import ModalStack from 'components/ModalStack'
 import Autopay from 'containers/Autopay'
 import Pay from 'containers/Pay'
 import Request from 'containers/Request'
@@ -14,136 +10,21 @@ import ChannelDetailModal from 'containers/Channels/ChannelDetailModal'
 import ChannelCreate from 'containers/Channels/ChannelCreate'
 import ReceiveModal from 'containers/Wallet/ReceiveModal'
 import ActivityModal from 'containers/Activity/ActivityModal'
-import SettingsPage from 'containers/Settings/SettingsPage'
 import ProfilePage from 'containers/Profile/ProfilePage'
 
-const Container = styled(animated.div)`
-  ${ModalOverlayStyles}
-`
-
-const ModalContent = ({ type, closeModal, isAnimating }) => {
-  switch (type) {
-    case 'SETTINGS':
-      return (
-        <Modal onClose={closeModal}>
-          <SettingsPage />
-        </Modal>
-      )
-
-    case 'PROFILE':
-      return (
-        <Modal onClose={closeModal}>
-          <ProfilePage />
-        </Modal>
-      )
-
-    case 'AUTOPAY':
-      return (
-        <Modal onClose={closeModal} pt={4}>
-          <Autopay width={1} />
-        </Modal>
-      )
-
-    case 'PAY_FORM':
-      return (
-        <Modal onClose={closeModal} p={4}>
-          <Pay mx="auto" width={9 / 16} />
-        </Modal>
-      )
-
-    case 'REQUEST_FORM':
-      return (
-        <Modal onClose={closeModal} p={4}>
-          <Request isAnimating={isAnimating} mx="auto" width={9 / 16} />
-        </Modal>
-      )
-
-    case 'RECEIVE_MODAL':
-      return (
-        <Modal onClose={closeModal} p={4}>
-          <ReceiveModal mx="auto" width={9 / 16} />
-        </Modal>
-      )
-
-    case 'ACTIVITY_MODAL':
-      return (
-        <Modal onClose={closeModal} p={4}>
-          <ActivityModal mx="auto" width={9 / 16} />
-        </Modal>
-      )
-
-    case 'CHANNELS':
-      return (
-        <Modal onClose={closeModal}>
-          <Channels width={1} />
-        </Modal>
-      )
-
-    case 'CHANNEL_CREATE':
-      return (
-        <Modal onClose={closeModal} py={4}>
-          <ChannelCreate onSubmit={closeModal} width={1} />
-        </Modal>
-      )
-
-    case 'CHANNEL_DETAIL':
-      return (
-        <Modal onClose={closeModal} p={4}>
-          <ChannelDetailModal type="CHANNEL_DETAIL" width={1} />
-        </Modal>
-      )
-  }
-}
-
-ModalContent.propTypes = {
-  closeModal: PropTypes.func.isRequired,
-  isAnimating: PropTypes.bool,
-  type: PropTypes.string.isRequired,
+const MODALS = {
+  PROFILE: <ProfilePage />,
+  AUTOPAY: <Autopay mt={4} width={1} />,
+  PAY_FORM: <Pay mx="auto" py={4} width={9 / 16} />,
+  REQUEST_FORM: <Request mx="auto" py={4} width={9 / 16} />,
+  RECEIVE_MODAL: <ReceiveModal mx="auto" py={4} width={9 / 16} />,
+  ACTIVITY_MODAL: <ActivityModal mx="auto" width={9 / 16} />,
+  CHANNELS: <Channels width={1} />,
+  CHANNEL_CREATE: <ChannelCreate py={4} width={1} />,
+  CHANNEL_DETAIL: <ChannelDetailModal mx={4} py={4} type="CHANNEL_DETAIL" width={1} />,
 }
 
-/**
- * ModalStack - Render modals from the modal stack.
- *
- * @param {{ modals, closeModal }} props Props
- * @returns {Node} Node
- */
-function ModalStack(props) {
-  const { modals, closeModal } = props
-  const doCloseModal = () => closeModal()
-
-  useOnKeydown('Escape', closeModal)
-  const [isAnimating, setIsAnimating] = useState(false)
-
-  const onStart = () => setIsAnimating(true)
-  const onRest = () => setIsAnimating(false)
-
-  return (
-    <Transition
-      enter={{ opacity: 1, pointerEvents: 'auto' }}
-      from={{ opacity: 0, pointerEvents: 'auto' }}
-      items={modals}
-      keys={item => item.id}
-      leave={{ opacity: 0, pointerEvents: 'none' }}
-      onRest={onRest}
-      onStart={onStart}
-    >
-      {modal =>
-        modal &&
-        /* eslint-disable react/display-name */
-        (styles => (
-          <Container style={styles}>
-            <ModalContent closeModal={doCloseModal} isAnimating={isAnimating} type={modal.type} />
-          </Container>
-        ))
-      }
-    </Transition>
-  )
-}
-
-ModalStack.propTypes = {
-  closeModal: PropTypes.func.isRequired,
-  modals: PropTypes.array.isRequired,
-}
+const AppModalStack = props => <ModalStack {...props} modalDefinitions={MODALS} />
 
 const mapStateToProps = state => ({
   modals: modalSelectors.getModalState(state),
@@ -156,4 +37,4 @@ const mapDispatchToProps = {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(ModalStack)
+)(AppModalStack)
diff --git a/renderer/containers/Root.js b/renderer/containers/Root.js
@@ -18,7 +18,7 @@ import { DialogLndCrashed } from './Dialog'
 import Initializer from './Initializer'
 import Logout from './Logout'
 import Home from './Home'
-import ModalStack from './ModalStack'
+import ModalStack from './RootModalStack'
 import Onboarding from './Onboarding/Onboarding'
 import Syncing from './Syncing'
 import App from './App'

diff --git a/renderer/containers/ModalStack.js → renderer/containers/RootModalStack.js b/renderer/containers/ModalStack.js → renderer/containers/RootModalStack.js
@@ -10,7 +10,7 @@ const MODALS = {
   SETTINGS: <SettingsPage />,
 }
 
-const AppModalStack = ({ closeModal, modals, ...rest }) => {
+const RootAppModalStack = ({ closeModal, modals, ...rest }) => {
   const doClose = useCallback(() => closeModal(), [closeModal])
   return (
     // key is used to reset error boundary state when there is no error
@@ -21,7 +21,7 @@ const AppModalStack = ({ closeModal, modals, ...rest }) => {
   )
 }
 
-AppModalStack.propTypes = {
+RootAppModalStack.propTypes = {
   closeModal: PropTypes.func.isRequired,
   modals: PropTypes.array.isRequired,
 }
@@ -36,4 +36,4 @@ const mapDispatchToProps = {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(AppModalStack)
+)(RootAppModalStack)