2

I am trying to add infinite scroll to my page. Whenever the user scrolls down the page it will call in a jSon that will update the array responsible of showing messages and therefore load new messages.

However if i reach the bottom of the page it will call new messages if i go either up or down with the scroll instead of acting as i intended.

No error messages are shown but i am not really sure why this happens.

The code was based on what I've found here link and the code below is what i have now. 

class Messages extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      messagesList: [],
      messageCount: 0,
      totalMessages: 0,
    };
  }
  isBottom = el => el.getBoundingClientRect().bottom <= window.innerHeight;

  componentDidMount() {
    document.addEventListener('scroll', this.trackScrolling);
  }

  trackScrolling = () => {
    const wrappedElement = document.getElementById("header");
// The if statement bellow checks if the i am at the bottom of the page and if i have more messages to load, the second information comes in the json

    if (this.isBottom(wrappedElement) != null && this.state.messageCount <= this.state.totalMessages) {
      fetchAllMessages(10, this.state.messageCount)
        .then(({ response }) => {
          this.setState({
            messagesList: this.state.messagesList.concat(response.messages.content),
            messageCount: this.state.messageCount + 1,

          });
        })
        .catch(() => null);
      document.removeEventListener('scroll', this.trackScrolling);
    } 
  };

  componentWillMount() {
    fetchAllMessage(10, this.state.messageCount)
      .then(({ response }) => {
        this.setState({
          messageList: response.message.content,
          totalMessage: response.message.totalMessage,
          messageCount: this.state.messageCount + 1,
        });
      })
      .catch(() => null);
  }

  render() {
    return (
      <div>
// Adds the event listener again
        {document.addEventListener('scroll', this.trackScrolling)}
        <Canvas >

          <Title >Messages</Title>

          {this.state.messagesList.map(i => (

            <Card id={"header"}>
              <CardContent>
                <div>
                  <div className={`icon ${MessageType[i.type].class}`} /> // adds an image
                </div>
                <div className="cardText" >
                  <Markdown>
                    {`${i.message} ${i.date != null ? ` on : ${i.date}` : ''}`}   
                  </Markdown>
                </div>
              </CardContent>
            </Card>
              ))}
        </Canvas>

      </div>

    );
  }
}

export default Messages;

I believe it might be something related to either window.innerHeight or the the fact i reset the scroll listener but i am not really sure.

Otorrinolaringologista -man
  • 1,025
  • 6
  • 30
  • 51
  • don't do `document.addEventListener('scroll', this.trackScrolling)` inside of render - it'll fire everytime the component is re-rendered. Move that to `componentDidMount` (rather, only have it in `componentDidMount`) – Tyler Sebastian Aug 22 '18 at 19:04
  • That's how it was before and with that it only load new messages once and it doesn't work a second time. – Otorrinolaringologista -man Aug 22 '18 at 19:09
  • I've written few weeks ago on how to implement infinite scrolling in React ([Infinite Scrolling in React using JavaScript Generator](https://www.slightedgecoder.com/2018/08/11/infinite-scrolling-in-react-using-javascript-generator/). You can scroll down to #windowSizeHandler, you will see that I check for the bottom and store that in the state. And if data is loaded, it's set to false. So next time you scroll down, you load new data. – dance2die Aug 22 '18 at 21:00
  • That looks really cool however I am fairly new to react and Front-end programming so i am not really sure how to implement it in my code, especially because part of my code was strait up from the linked code i posted in the description. Is there any way to reset "window.InnerHeight", i am almost sure that after calling for more messages the "window.InnerHeight" is not updated which is probably what causes the problems. – Otorrinolaringologista -man Aug 22 '18 at 21:13

0 Answers0