OnEnter event only called on page load using react router

[JustinMoser]

Hi - I know this issue has been flagged up a few times already, but none of the solutions (or the latest version) solve this for me.

I am having the exact same problem with Waypoint. Im using the latest version, however when switching pages via react router, the onEnter function doesn't get called when reaching the waypoint. On a fresh page reload it works as expected however.

Additionally, my react app has a few different pages (via react router), all with waypoints on, and on for some reason the waypoints work once, and then never again. My app is pulling data from a web service on each onEnter event, however these events are not being fired consistently, either only on page load, or just once and never again.

Thanks! Justin

[trotzig]

Is your page being remounted as a result of the route change?

If you add the debug prop to the waypoint, what's the output after a page transition?

[JustinMoser]

Where does the component output to? The browser console?

I've added the debug prop to both waypoints in question, and there is no output whatsoever.

Some extra info: On every page which has a waypoint other than the first page (main feed page in the web app), any change of page, results in the waypoint only firing the onEnter event once on the destination page. Ive added some of my own debugging, and it seems on fresh page load, the onEnter event is fired once straight away.

[trotzig]

Where does the component output to? The browser console?

That’s where it should log things.

Can you share some of your code? It might be easier to track this down then.

[JustinMoser]

@inject('uiStore', 'journalStore', 'authStore', 'paperStore')
@observer
class SingleJournalPage extends Component {
  componentWillMount() {
    console.log("SINGLE JOURNAL");
    this.journalId = this.props.match.params.id;
    this.props.paperStore.setFilter((e) => parseInt(e.journalId, 10) === parseInt(this.journalId, 10));
    this.loadInitial();
  }

  loadInitial = () => {
    if (!this.props.paperStore.isLoading) {
      console.log("loading initial");
      let journalId = this.journalId;
      this.props.paperStore.getPapersForJournal(journalId);
    }
  }

  loadMore = (page) => {
    console.log("load more");
    if (!this.props.paperStore.isLoading) {
      let journalId = this.journalId;
      this.props.paperStore.getNextPageForJournal(journalId);
    }
  }

  render () {
    const journal = this.props.journalStore.data.get(this.journalId);
    return (
      <div className="SingleJournalPage">
        <BackButton/>
        <h2>{journal && journal.name}</h2>
        <div className="SingleJournalWrapper">
           { this.props.paperStore.filteredView.map((element, index) => {
              return (
                <div key={index}>
                  <PaperComponent key={index} data={element}/>
                  <hr/>
                </div>
                )
             })
           }
          <Waypoint onEnter={this.loadMore} debug={true} />
          <ReactPlaceholder type='media' rows={10}
            style={{marginTop: '5em'}}
            ready={!this.props.paperStore.isLoading}
            showLoadingAnimation={true}>
            <div></div>
          </ReactPlaceholder>
          <ReactPlaceholder type='media' rows={10}
            ready={!this.props.paperStore.isLoading}
            showLoadingAnimation={true}>
            <div></div>
          </ReactPlaceholder>
          <ReactPlaceholder type='media' rows={10} 
            ready={!this.props.paperStore.isLoading}>
            <div></div>
          </ReactPlaceholder>
        </div>
      </div>
    );
  };
}

the loadMore function basically calls a function in paperStore which is a external api call to get more data. With my console log statements I can see that loadMore is only ever called once; when the page loads initially.

Thanks, Justin

[trotzig]

Okay, and how many times do you see SINGLE JOURNAL logged?

[JustinMoser]

Just once. Followed by a single load more. Which then is never logged again.

[trotzig]

What's the debug output from the waypoint (you can try scrolling a little after the first loadMore so that things end up in the log)?

[JustinMoser]

the loadMore function only gets called once on page load so by the time the page has rendered, the initial load is there, but there is no output whatsoever from the waypoint in chrome console.

[JustinMoser]

So it looks as though some styling has forced the span element that gets created as the waypoint to be sized to 0x0 so it never gets hit. Within the browser i have forced the waypoint to be 200x900 and black bg so I can see it, and when it is a forced size the load more function is called every time.

Based on that discovery, would it be possible to give the way point the className prop which can target the span element that gets created, so that this situation can be overriden?

[MatthewHerbst]

@JustinMoser any chance you can post the styles that were causing this? Sorry for the delayed response getting back to you.