trampa-frontend/src/components/MarketPlace/Offers/Offers.js

import React, { useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import { OffersContainer } from "./Offers.styled";
import OfferCard from "../../Cards/OfferCard/OfferCard";
import {
  fetchMoreOffers,
  fetchOffers,
} from "../../../store/actions/offers/offersActions";
import { useDispatch, useSelector } from "react-redux";
import {
  selectNoMoreOffers,
  selectOffers,
  selectPinnedOffers,
} from "../../../store/selectors/offersSelectors";
import useFilters from "../../../hooks/useFilters";

const Offers = (props) => {
  const filters = useFilters();
  const [page, setPage] = useState(2);
  const [initialLoad, setInitialLoad] = useState(true);
  const pinnedOffers = useSelector(selectPinnedOffers);
  const offers = useSelector(selectOffers);
  const dispatch = useDispatch();
  const offersRef = useRef(null);
  const noMoreOffersStatus = useSelector(selectNoMoreOffers);
  let timeout = null;
  let listener;

  useEffect(() => {
    listener = () => {
      if (
        !noMoreOffersStatus &&
        offers?.length > 0 &&
        window.scrollY + window.innerHeight >
          window.document.body.offsetHeight * 0.8
      ) {
        if (!timeout) {
          timeout = setTimeout(() => {
            timeout = null;
          }, 5000);
          dispatch(
            fetchMoreOffers({ page: page, queryString: filters.queryString })
          );
        }
      }
    };
    window.addEventListener("scroll", listener);
    return () => window.removeEventListener("scroll", listener);
  }, [page, noMoreOffersStatus, filters.queryString, timeout, offers]);

  useEffect(() => {
    setPage(Math.floor((offers.length + pinnedOffers.length ) / 10) + 1);
  }, [offers, pinnedOffers]);

  useEffect(() => {
    dispatch(fetchOffers({ page: 1 }));
  }, []);

  useEffect(() => {
    if (filters.queryString) {
      if (filters.queryString.length > 1) {
        if (initialLoad) {
          dispatch(fetchOffers({ page: 1, queryString: filters.queryString }));
          setInitialLoad(false);
        }
      } else {
        setInitialLoad(false);
      }
    }
  }, [filters.queryString, initialLoad]);

  return (
    <OffersContainer ref={offersRef}>
      <>
        {pinnedOffers != undefined &&
          pinnedOffers.map((item) => {
            return (
              <OfferCard key={item._id} offer={item} halfwidth={props.isGrid} />
            );
          })}
      </>
      {offers != undefined &&
        offers.map((item) => {
          return (
            <OfferCard key={item._id} offer={item} halfwidth={props.isGrid} />
          );
        })}
    </OffersContainer>
  );
};

Offers.propTypes = {
  children: PropTypes.node,
  isGrid: PropTypes.bool,
};

export default Offers;