React with Redux Popup or Modal syntax and setup

Question

I have a MonthContainer component that renders a MonthView component. The container passes data to the view and the view does the formatting and displays a table with link buttons corresponding to month and category.

What I want to do is when a link is clicked in MonthView, a pop up displays on the page with another set of data that is based on the year, category and month for the link that was clicked. I am using react-modal to accomplish this.

In my initial setup, MonthViewContainer was rendering MonthView and PopupContainer which in turn rendered PopupView. PopupContainer was passed a full list of transaction data (unfiltered) which it then passed to PopupView. When I clicked on a link in MonthView, it would set the displayModal flag to true and my PopupView component which was wrapped in react-modal would show up with the transactions filtered based on year, month, category. This worked fine except for my challenges with updating the parent component after saving and closing the modal. However, I don't like the idea of loading all my state into the PopupView and then filtering. Ideally, I would want to get the data when the PopView loads. I'm having trouble doing this.

I have several issues with my setup. Below is my code with comments in each section I'm having trouble with.

MonthViewContainer

import React from 'react';
import MonthView from './MonthView.js';
import { connect } from 'react-redux';
import { getTransactions } from '../actions/actions.js';
import TransactionsPopupContainer from './TransactionsPopupContainer.js';

MonthViewContainer Component

    class MonthViewContainer extends React.Component {
      constructor() {
        super();

        this.popupCategory;
        this.popupMonth;

        this.state = {
          detailPopup : false
        }

        this.handleGetDetail = this.handleGetDetail.bind(this);
        this.handleRefresh = this.handleRefresh.bind(this);
      }

      componentDidMount() {

        this.props.getTransactions(2016);
        // this.props.getTransactionsAll(2016);

      }

      render() {
        return (
          <div className="row">
            <div className="col-md-12">
                <MonthView 
                  transactions={this.props.storeTransactions.transactions} 
                  selectedYear={this.props.storeTransactions.selectedYear} 
                  onHandleGetDetail={this.handleGetDetail} 
                />
            </div>
            <div>
                <PopupContainer 
                    modalActive={this.state.detailPopup} 
                    selectedYear={this.props.storeTransactions.selectedYear} 
                    category={this.popupCategory} 
                    month={this.popupMonth}
                    onRefresh={this.handleRefresh}
                />
            </div>
          </div>
        ) 
      }

      handleRefresh() {
        console.log("handle refresh entered")
        this.props.getTransactions(this.props.storeTransactions.selectedYear);
      }

      handleGetDetail(year,category,month) {

        this.popupCategory = category;
        this.popupMonth = month;

        this.setState({ detailPopup: true}, function () {});
      }

    }


    const mapStateToProps = (state) => ({
      storeTransactions: state.storeTransactions
    });


    export default connect(mapStateToProps, {getTransactions})(MonthViewContainer);

PopupContainer

import React from 'react';
import { connect } from 'react-redux';

import PopupView from './PopupView.js';
import { getPopupTransactions } from '../actions/actions.js';
import { saveTransactions } from '../actions/actions.js';


class PopupContainer extends React.Component {

    constructor() {
        super();


        this.editedTrans = undefined;
        this.handleSave = this.handleSave.bind(this);

    }


    componentWillUnmount(){
        //when modalActive is true, I would like to get the popup data with params coming from props
            //doing something like getPopupTransactions
        //the problem is I can't do it here because the component is mounted when parent loads and
            //is set to active/visible when a button is clicked on the parent
    }





 handleSave(transToSave) {

    this.props.saveTransactions(transToSave);//use the action in redux store to save these transactions

    //refresh the parent (MonthViewContainer/MonthView) after saving //not sure how to do this after closing the modal
        //I would like the transactions that are saved after closing the modal to be reflected in the parent component
        //what I attempted is to pass in a handler what will trigger set state and case the MonthViewContainer to rerender
    this.props.handleRefresh();

  }

    render() {

        return (
            <PopupView 
                modalActive={this.props.modalActive} 
                transactions={this.props.storePopupTransactions.popuptransactions}
                savePopupView={this.handleSave}
            />
        );
    }

}


const mapStateToProps = (state) => {
    return {storePopupTransactions: state.storePopupTransactions//,
    }
};


export default connect(mapStateToProps, {getPopupTransactions,saveTransactions})(PopupContainer);

score 0 · Answer 1 · answered Feb 08 '18 at 20:36

Been working on it and it turns out that I was indeed able to call my parent component (MonthViewContainer) after calling closeModal and before setting the modalIsOpen to false for the react-modal component (PopupView in my case). Therefore, I was able to save the data from PopupView and then refresh my state in MonthViewContainer.

React with Redux Popup or Modal syntax and setup

1 Answers1