Doesnt make the first call when user scrolls down and goes back up

[jasonpraful]

Describe the bug
When the user reaches either the top/bottom of the div the hook doesn't call next if it has already made a call before.

Screenshots

Additional context
Add any other context about the problem here.

[vdmrgv]

Hey @jasonpraful !
I tested it and it works fine in my environment, you can try it here.
Could you check this example and if it doesn't work, please attach the code snippet and I will try to help you!

[jasonpraful]

Doesn't seem to work :/ I noticed another potential bug, I am not able to access the updated state data from my parent element. Happy to go through the code with you - just added you on twitter 😁

// Get Direction Function
  const getDirection = async (direction: ScrollDirection) => {
    if (direction === 'up') {
     
      fetchMessages(`${query}&beforeId=${firstMessage}`)
    } else if (direction === 'down') {
      const lastMessage = messages[messages.length - 1]._id
    }
  }

// Init
 const { setRef } = useInfiniteScroll({
    next: getDirection,
    rowCount: messages.length,
    initialScroll: { top: 1143, left: 0 },
    hasMore: { up: true, down: true }
  })

// Component
 <div style={{
          height: '75%',
          marginTop: 5,
          display: 'flex',
          flexDirection: 'column-reverse'
        }}
      >
        <div
          ref={setRef}
          style={{
            overflowY: 'auto'
          }}
        >
 {messages.map((message) => (
            <div style={{ height: 'auto' }} key={message._id}>
              <Message />
            </div>
          ))}
        </div>

// Fetch Function
  const fetchMessages = async (query: string) => {
    const retrievedmessages = await axios.get(query))
  
   const { data } = retrievedmessages.data
      setMessages((messages) => [...data, ...messages]) 
  }

[vdmrgv]

Doesn't seem to work :/ I noticed another potential bug, I am not able to access the updated state data from my parent element. Happy to go through the code with you - just added you on twitter 😁

// Get Direction Function
  const getDirection = async (direction: ScrollDirection) => {
    if (direction === 'up') {
      const query = `/api/chats?channelId=${chatChannel?._id}`
      const firstMessage = messages[0]._id
      prevUpMessageId = firstMessage
      fetchMessages(`${query}&beforeId=${firstMessage}`)
    } else if (direction === 'down') {
      const lastMessage = messages[messages.length - 1]._id
    }
  }

// Init
 const { setRef } = useInfiniteScroll({
    next: getDirection,
    rowCount: messages.length,
    initialScroll: { top: 1143, left: 0 },
    hasMore: { up: true, down: true }
  })

// Component
 <div style={{
          height: '75%',
          marginTop: 5,
          display: 'flex',
          flexDirection: 'column-reverse'
        }}
      >
        <div
          ref={setRef}
          style={{
            overflowY: 'auto'
          }}
        >
 {messages.map((message) => (
            <div style={{ height: 'auto' }} key={message._id}>
              <Message />
            </div>
          ))}
        </div>

// Fetch Function
  const fetchMessages = async (query: string) => {
    const retrievedmessages = await axios.get(query))
  
    if (retrievedmessages.data.data.length > 0) {
      const { data } = retrievedmessages.data
      setMessages((messages) => [...data, ...messages])
    } 
  }

thanks, I'll take a look today

[vdmrgv]

I found the cause of the bug, working on a fix 🙂
I'll push it today

[vdmrgv]

@jasonpraful I fixed the issue and published a new version so you can try it. Let me know if I'm wrong 😎