Ytukyg

I have a redux action which sends a request to update some data in the backend and on the response I dispatch another action to set this updated data. Heres the action:

export const openLecture = lectureId => dispatch => {

  axios

    .put(`/api/lectures/open/${lectureId}`)

    .then(res => {

      if (res.data.lecture) {

        console.log(res.data.lecture);

        dispatch(getLecture(res.data.lecture._id));

      }

    })

    .catch(err => {

      console.log(err);

    });

};

Theres a component which takes this data from the redux state adn passes it to a child component. Heres the child component:

class LectureHeader extends Component {

  constructor() {

    super();

    this.state = {};

    this.makeLectureLive = this.makeLectureLive.bind(this);

    this.closeLecture = this.closeLecture.bind(this);

  }



  componentWillReceiveProps(newProps) {

    this.setState({ ...newProps });

  }



  makeLectureLive() {

    this.props.openLecture(this.props.id);

  }



  closeLecture() {

    this.props.closeLecture(this.props.id);

  }



  render() {

    const { form, status, notes, id, date, code, name } = this.state;

    let formBtn, liveBtn, liveStatus, progress, liveColor;

    let formLink = `/dashboard/form/${id}`;



    if (typeof form !== "undefined") {

      if (form.length > 0) {

        formBtn = (

          <a id="formBtn" href={formLink} className="btn btn-dark">

            Edit form

          </a>

        );

      } else {

        formBtn = (

          <a id="formBtn" href={formLink} className="btn btn-dark">

            Create form

          </a>

        );

      }

      //Lecture has not been live yet

      if (status.iat === null && status.exp === null) {

        liveBtn = (

          <a

            id="liveBtn"

            href="javascript:void(0)"

            className="btn btn-primary"

            data-toggle="modal"

            data-target=".bd-example-modal-sm"

          >

            Make Live

          </a>

        );

      } else if (status.iat <= Date.now() && status.exp >= Date.now()) {

        //Lecture is currently live

        liveBtn = (

          <a

            id="liveBtn"

            onClick={this.closeLecture}

            href="javascript:void(0)"

            className="btn btn-primary"

          >

            Close Lecture

          </a>

        );

        formBtn = (

          <a id="formBtn" href={formLink} className="btn btn-dark">

            see form

          </a>

        );

        liveColor = "#05c435";

        let percent =

          (100 * (Date.now() - status.iat)) / (status.exp - status.iat);

        let percentWidth = percent + "%";

        progress = (

          <div style={{ height: "8px" }} className="progress">

            <div

              className="progress-bar"

              role="progressbar"

              style={{ width: percentWidth }}

              aria-valuenow={percent}

              aria-valuemin="0"

              aria-valuemax="100"

            />

          </div>

        );

      } else {

        //Lecture was live and now is closed

        formBtn = (

          <a id="formBtn" href={formLink} className="btn btn-dark">

            see form

          </a>

        );

      }

    }

    let confirmModal = (

      <div

        className="modal fade bd-example-modal-sm"

        tabIndex="-1"

        role="dialog"

        aria-labelledby="mySmallModalLabel"

        aria-hidden="true"

      >

        <div className="modal-dialog modal-sm">

          <div style={{ padding: "20px" }} className="modal-content">

            <p>Are you sure you want to make this lecture live?</p>

            <a

              id="liveBtn"

              href="javascript:void(0)"

              className="btn btn-primary"

              data-dismiss="modal"

              aria-label="Close"

              onClick={this.makeLectureLive}

            >

              Yes

            </a>

            <a

              id="confirmCancel"

              href={formLink}

              className="btn btn-dark"

              data-dismiss="modal"

              aria-label="Close"

            >

              Cancel

            </a>

          </div>

        </div>

      </div>

    );

    return (

      <div className="lecture-header">

        <div>

          <h1 style={{ color: liveColor }}>{name}</h1>

          {formBtn}

          {liveBtn}

          {confirmModal}

          <hr />

          <h6 id="lecture-code">code: {code}</h6>

          <small className="text text-muted">{date}</small>

          <h6>{notes}</h6>

        </div>

        {progress}

      </div>

    );

  }

}



LectureHeader.propTypes = {

  openLecture: PropTypes.func.isRequired,

  closeLecture: PropTypes.func.isRequired,

  name: PropTypes.string,

  notes: PropTypes.string,

  form: PropTypes.array,

  status: PropTypes.object,

  id: PropTypes.string

};



export default connect(

  null,

  { openLecture, closeLecture }

)(LectureHeader);

The problem Im having is that this component si fully updating when I run the app locally. However I have it deployed in two places and neither of them fully update the component. The component changes slightly but doesnt actually update based on any of the new data. I cant figure out why any suggestions would be great. Thanks in advance.