Message List Sample Code

gistfile1.txt

  _handleScroll = event => {
    const thresholdValue = event.target.offsetHeight
    const curScroll = event.target.scrollTop
    const reloadValue = event.target.scrollHeight
    const offset = styles.gridItem.height
    
    if(reloadValue - offset <= thresholdValue + curScroll){
      this._fetchMessages(this.state.pageToken);
    }
  }

  _fetchMessages = pT => {
    let pageToken = '';
    if(pT){pageToken = "?pageToken="+pT}

    this.setState({isLoading: true})

    if(!this.state.isLoading){
      axios.get(API_URL+'messages'+pageToken)
        .then( resp => resp.data )
        .then( data => {
          let newMessages = [];
          for(let msg of data.messages){
            newMessages.push({
              uuid: uuidv4(),
              id: msg.id,
              content: msg.content,
              updated: msg.updated,
              author: {
                name: msg.author.name,
                photoUrl: msg.author.photoUrl
              }
            })
          }

          this.setState({
            count: data.count,
            messages: [
              ...this.state.messages,
              ...newMessages
            ],
            pageToken: data.pageToken,
            isLoading: false
          })
        })
        .catch( err => console.warn(err))
    }

  }