InfiniteMasonry.tsx

import React from "react"
import LinearProgress from "@material-ui/core/LinearProgress"
import throttle from "lodash.throttle"
import ScrollManager from "./ScrollManager"
import { Id, Result } from "../../modules/Stores/Search/searchInterfaces"

import Masonry from "./Masonry"
import { Typography } from "@material-ui/core"

interface Props {
  setActiveInfoId(id: Id): void
  setInfoOpen(open: boolean): void
  items: Result[]
  loadMore(): void
  isLoading: boolean
  isFinished: boolean
}

const InfiniteScroll = (Content) => ({
  setActiveInfoId,
  setInfoOpen,
  items,
  loadMore,
  isLoading,
  isFinished,
}: Props) => {
  const sentinel = React.useRef<null | any>(null)
  const threshold = 300
  const scrollThrottle = 64

  const onScroll = React.useCallback(
    throttle(() => {
      if (
        sentinel.current &&
        sentinel.current.getBoundingClientRect().top - window.innerHeight < threshold
      ) {
        loadMore()
      }
    }, scrollThrottle),
    [loadMore]
  )

  React.useEffect(() => {
    window.addEventListener("scroll", onScroll)

    return () => window.removeEventListener("scroll", onScroll)
  }, [onScroll])

  React.useEffect(() => {
    onScroll() // in case the window isn't full of items yet
  }, [items, onScroll])

  React.useEffect(() => {
    if (items.length === 0) {
      loadMore()
    }
  }, [loadMore, items.length])

  return (
    <>
      <ScrollManager />
      <Content
        setActiveInfoId={setActiveInfoId}
        setInfoOpen={setInfoOpen}
        items={items}
      />
      <div ref={sentinel} key="sentinel" />
      {isLoading ? <LinearProgress variant="query" color="secondary" /> : null}
      {isFinished ? (
        <Typography>Your query returned {items.length} results.</Typography>
      ) : null}
    </>
  )
}

export default InfiniteScroll(Masonry)