gatsby-theme-advanced
Version:
GatsbyJS theme equipped with advanced features.
51 lines (50 loc) • 2.42 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const useScrollBasedFetching = (feedQuery) => {
// Ref to the listing wrapper element
// Used to track scroll progress
const feedElementRef = (0, react_1.useRef)(null);
// Helpers for loading pages
const loadNext = () => __awaiter(void 0, void 0, void 0, function* () {
if (feedQuery.hasNextPage && !feedQuery.isFetchingNextPage) {
yield feedQuery.fetchNextPage();
}
});
const checkScrollState = () => __awaiter(void 0, void 0, void 0, function* () {
if (feedElementRef.current) {
// If we're on the bottom edge of the feed element, load next page
if (feedElementRef.current.getBoundingClientRect().bottom <=
window.innerHeight) {
yield loadNext();
}
}
});
// Handle loading next/previous pages on scroll
(0, react_1.useEffect)(() => {
const onScroll = () => __awaiter(void 0, void 0, void 0, function* () {
yield checkScrollState();
});
// eslint-disable-next-line @typescript-eslint/no-misused-promises
window.addEventListener("scroll", onScroll);
return () => {
// eslint-disable-next-line @typescript-eslint/no-misused-promises
window.removeEventListener("scroll", onScroll);
};
});
// Check state on rerenders
// This prevents edge cases when no scrollbar is availble but all the data is already loaded
// eslint-disable-next-line @typescript-eslint/no-floating-promises
checkScrollState();
return feedElementRef;
};
exports.default = useScrollBasedFetching;