router with modal

sample.js

/*
LA IDEA ES LA SIGUIENTE: 

AL DARLE CLICK A UN MODAL SE DEBEN RENDERIZAR DOS RUTAS, LA RUTA DE LA PÁGINA DE ABAJO Y LA RUTA DEL MODAL

PARA SABER LA RUTA DE ABAJO SE CREA UN ESTADO backgroundPage QUE ES DE LA FORMA {pathname:<ruta>}
CUANDO LA PERSONA DA CLICK PARA ABRIR UN MODAL (LINEA 123,128) SE SETEA ESE ESTADO CON EL PATH ACTUAL...ESO LO HACE LinkToModal (114) QUE SETEA EL BACKGROUND 
LLAMANDO A LA ACCIÓN setModalBackgroundPageAction (57) TIENES UN EXTRACTO DEL ESTADO EN LA LINEA 204

ES DECIR, SI backgroundPage ESTÁ SETEADO SE MUESTRA EL MODAL Y EL SWITCH RENDERIZA ESA RUTA (82,177)

EL SWITCH SE CAMBIA, AHORA PRIMERO VA A SWITCHEAR BASADO EN QUÉ PÁGINA ESTÉ DE BACKGROUND Y SI NO HAY PÁGINA SETEADA TOMA LA LOCACION DE LA URL (82)


 const location = useLocation();

  return (
    <div>
      <Switch location={props.backgroundPage || location}>
        <Route path="/" children={<Gallery />} />
      </Switch>


LAS RUTAS DE LOS MODALES VAN FUERA DEL SWITCH YA QUE NO QUEREMOS QUE SI EL SWITCH HACE MATCH CON UNA RUTA LOS MODALES SE DEJEN DE RENDERIZAR,
 
 <Switch location={props.backgroundPage || location}>
        <Route path="/" children={<Gallery />} />
      </Switch>

      {/* Show the modal when a background page is set */}

      {<Route exact path="/modal1" children={<Modal2 component={Hello} />} />}
      {<Route exact path="/modal2" children={<Modal2 component={Bye} />} />}
       
 
 EL MODAL DETERMINA CUANDO RENDERIZARSE CUANDO EXISTE UNA PÁGINA DE BACKGROUND, SI ESE ESTADO ESTÁ SETEADO EL SE MUESTRA

 ESTO ES UNA PRUEBA DE CONCEPTO :D SI TIENES ALGUNA MEJORA ES VALIDA
*/

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
import { animated } from 'react-spring';
import { Spring } from 'react-spring/renderprops';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  // useHistory,
  useLocation,
} from 'react-router-dom';
import { connect, Provider } from 'react-redux';
import store from './state/store/index';

const setModalBackgroundPageAction = _path => {
  return { type: 'SAVE_BACKGROUND', payload: _path };
};

const closeModalCleanBackgroudAction = () => ({ type: 'CLEAN_BACKGROUND' });

export default function ModalGalleryExample() {
  return (
    <Router>
      <ModalSwitch />
    </Router>
  );
}

const mapStateToProps = state => {
  return {
    backgroundPage: state.user.backgroundPage,
  };
};

function _ModalSwitch(props) {
  const location = useLocation();

  return (
    <div>
      <Switch location={props.backgroundPage || location}>
        <Route path="/" children={<Gallery />} />
      </Switch>

      {/* Show the modal when a background page is set */}

      {<Route exact path="/modal1" children={<Modal2 component={Hello} />} />}
      {<Route exact path="/modal2" children={<Modal2 component={Bye} />} />}
    </div>
  );
}

const ModalSwitch = connect(mapStateToProps)(_ModalSwitch);

function _LinkToModal({ path, background, children, dispatch }) {
  const saveBackground = () => {
    // only avoid when is undefined, when is false or null must run the dispatcher
    if (background !== undefined) dispatch(setModalBackgroundPageAction(background));
  };

  return (
    <Link
      to={{
        pathname: path,
      }}
      onClick={saveBackground}
    >
      {children}
    </Link>
  );
}

const LinkToModal = connect(mapStateToProps)(_LinkToModal);

function Gallery() {
  const location = useLocation();
  console.log('location inside Gallery ', location);

  return (
    <div>
      <div>
        <LinkToModal path="/modal1" background="/">
          hello Modal 1
        </LinkToModal>

        <div>
          <LinkToModal path="/modal2" background="/">
            hello Modal 2
          </LinkToModal>
        </div>
      </div>
    </div>
  );
}

function Hello() {
  return (
    <>
      <div>Hola</div>
      <div>
        <Link
          to={{
            pathname: '/modal2',
          }}
        >
          GO TO MODAL 2
        </Link>
      </div>
    </>
  );
}

function Bye() {
  return (
    <>
      <div>Modal2: Bye</div>
      <div>
        <Link
          to={{
            pathname: '/modal1',
          }}
        >
          GO TO MODAL 1
        </Link>
      </div>
    </>
  );
}

function _Modal2(props) {
  const closeModal = () => {
    console.log('closing');
    props.dispatch(closeModalCleanBackgroudAction());
  };

  const showModal = !!props.backgroundPage;

  return (
    <div>
      <Modal isOpen={showModal}>
        <button onClick={closeModal}>close</button>
        <Spring
          from={{ opacity: 0, transform: 'translate(-100%,0)' }}
          to={{ opacity: 1, transform: 'translate(0%,0)' }}
        >
          {_props => <animated.div style={_props}>{props.component()}</animated.div>}
        </Spring>
      </Modal>
    </div>
  );
}

const Modal2 = connect(mapStateToProps)(_Modal2);

ReactDOM.render(
  <Provider store={store}>
    <ModalGalleryExample />
  </Provider>,
  document.getElementById('root'),
);


//EXTRACTO DEL ESTADO
const initialState = {
  backgroundPage: null,

};

function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'SAVE_BACKGROUND': {
      return { ...state, backgroundPage: action.payload };
    }

    case 'CLEAN_BACKGROUND': {
      return { ...state, backgroundPage: null };
    }