Drop the ModalRoot component

Given we have no active use of it, and the trend seems to be toward independent
modal components, eg. ContactModal, let's drop it.

app/components/ModalRoot/ModalRoot.js

@@ -1,44 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { MdClose } from 'react-icons/lib/md'
-import styles from './ModalRoot.scss'
-
-const MODAL_COMPONENTS = {
-  /* other modals */
-}
-
-const ModalRoot = ({
-  modalType, modalProps, hideModal, currentTicker, currency, isTestnet
-}) => {
-  if (!modalType) { return null }
-
-  const SpecificModal = MODAL_COMPONENTS[modalType]
-  return (
-    <div className={styles.container}>
-      <div className={styles.content}>
-        <div className={styles.esc} onClick={hideModal}>
-          <MdClose />
-        </div>
-
-        <SpecificModal
-          {...modalProps}
-          hideModal={hideModal}
-          currentTicker={currentTicker}
-          currency={currency}
-          isTestnet={isTestnet}
-        />
-      </div>
-    </div>
-  )
-}
-
-ModalRoot.propTypes = {
-  modalType: PropTypes.string,
-  modalProps: PropTypes.object,
-  hideModal: PropTypes.func.isRequired,
-  currentTicker: PropTypes.object.isRequired,
-  currency: PropTypes.string.isRequired,
-  isTestnet: PropTypes.bool.isRequired
-}
-
-export default ModalRoot

app/components/ModalRoot/ModalRoot.scss

@@ -1,43 +0,0 @@
-@import '../../variables.scss';
-
-.container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background: $spaceblue;
-}
-
-.content {
-  position: relative;
-  height: 100vh;
-  margin: 5%;
-  color: $white;
-}
-
-.esc {
-  position: absolute;
-  top: 0;
-  right: 0;
-  color: $darkestgrey;
-  cursor: pointer;
-  padding: 20px;
-  border-radius: 50%;
-
-  &:hover {
-    color: $bluegrey;
-    background: $darkgrey;
-  }
-
-  &:active {
-    color: $white;
-    background: $gold;
-  }
-
-  svg {
-    width: 32px;
-    height: 32px;
-  }
-}

app/components/ModalRoot/index.js

@@ -1,3 +0,0 @@
-import ModalRoot from './ModalRoot'
-
-export default ModalRoot

app/reducers/index.js

@@ -16,7 +16,6 @@ import payform from './payform'
 import requestform from './requestform'
 
 import invoice from './invoice'
-import modal from './modal'
 import address from './address'
 import transaction from './transaction'
 import activity from './activity'
@@ -40,7 +39,6 @@ const rootReducer = combineReducers({
   requestform,
 
   invoice,
-  modal,
   address,
   transaction,
   activity,

app/reducers/modal.js

@@ -1,47 +0,0 @@
-// ------------------------------------
-// Initial State
-// ------------------------------------
-const initialState = {
-  modalType: null,
-  modalProps: {}
-}
-
-// ------------------------------------
-// Constants
-// ------------------------------------
-export const SHOW_MODAL = 'SHOW_MODAL'
-export const HIDE_MODAL = 'HIDE_MODAL'
-
-// ------------------------------------
-// Actions
-// ------------------------------------
-export function showModal(modalType, modalProps) {
-  return {
-    type: SHOW_MODAL,
-    modalType,
-    modalProps
-  }
-}
-
-export function hideModal() {
-  return {
-    type: HIDE_MODAL
-  }
-}
-
-// ------------------------------------
-// Action Handlers
-// ------------------------------------
-const ACTION_HANDLERS = {
-  [SHOW_MODAL]: (state, { modalType, modalProps }) => ({ ...state, modalType, modalProps }),
-  [HIDE_MODAL]: () => initialState
-}
-
-// ------------------------------------
-// Reducer
-// ------------------------------------
-export default function modalReducer(state = initialState, action) {
-  const handler = ACTION_HANDLERS[action.type]
-
-  return handler ? handler(state, action) : state
-}

app/routes/app/components/App.js

@@ -6,7 +6,6 @@ import LoadingBolt from 'components/LoadingBolt'
 
 import Form from 'components/Form'
 import ChannelForm from 'components/Contacts/ChannelForm'
-import ModalRoot from 'components/ModalRoot'
 
 import Network from 'components/Contacts/Network'
 import AddChannel from 'components/Contacts/AddChannel'
@@ -47,12 +46,8 @@ class App extends Component {
 
   render() {
     const {
-      modal: { modalType, modalProps },
-      hideModal,
-      ticker,
       currentTicker,
       form,
-      info: { data },
 
       formProps,
       closeForm,
@@ -76,14 +71,6 @@ class App extends Component {
       <div>
         <div className={styles.titleBar} />
         <GlobalError error={error} clearError={clearError} />
-        <ModalRoot
-          modalType={modalType}
-          modalProps={modalProps}
-          hideModal={hideModal}
-          currentTicker={currentTicker}
-          currency={ticker.currency}
-          isTestnet={data.testnet}
-        />
 
         <ContactModal {...contactModalProps} />
 
@@ -110,13 +97,10 @@ class App extends Component {
 }
 
 App.propTypes = {
-  modal: PropTypes.object.isRequired,
-  ticker: PropTypes.object.isRequired,
   form: PropTypes.object.isRequired,
   formProps: PropTypes.object.isRequired,
   closeForm: PropTypes.func.isRequired,
   error: PropTypes.object.isRequired,
-  info: PropTypes.object.isRequired,
   currentTicker: PropTypes.object,
   contactModalProps: PropTypes.object,
   contactsFormProps: PropTypes.object,
@@ -127,7 +111,6 @@ App.propTypes = {
 
   newAddress: PropTypes.func.isRequired,
   fetchInfo: PropTypes.func.isRequired,
-  hideModal: PropTypes.func.isRequired,
   fetchTicker: PropTypes.func.isRequired,
   clearError: PropTypes.func.isRequired,
   fetchChannels: PropTypes.func.isRequired,

app/routes/app/containers/AppContainer.js

@@ -9,8 +9,6 @@ import { newAddress, closeWalletModal } from 'reducers/address'
 
 import { fetchInfo } from 'reducers/info'
 
-import { showModal, hideModal } from 'reducers/modal'
-
 import { setFormType } from 'reducers/form'
 
 import { setPayAmount, setPayInput, setCurrencyFilters, updatePayErrors, payFormSelectors } from 'reducers/payform'
@@ -81,9 +79,6 @@ const mapDispatchToProps = {
 
   fetchInfo,
 
-  showModal,
-  hideModal,
-
   setFormType,
 
   setPayAmount,
@@ -156,7 +151,6 @@ const mapStateToProps = state => ({
   requestform: state.requestform,
 
   invoice: state.invoice,
-  modal: state.modal,
 
   error: state.error,
 

test/components/ModalRoot.spec.js

@@ -1,19 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import ModalRoot from '../../app/components/ModalRoot'
-
-const defaultProps = {
-  hideModal: () => {},
-  modalProps: {},
-  currentTicker: {},
-  currency: '',
-  isTestnet: false
-}
-
-describe('no modal', () => {
-  const props = { ...defaultProps }
-  const el = shallow(<ModalRoot {...props} />)
-  it('should return null', () => {
-    expect(el.html()).toBeNull()
-  })
-})