Infinite Load Hooks - UsePostTypeInfiniteScroll

gistfile1.txt

import { usePostTypeInfiniteScroll } from "@frontity/hooks";
import { styled, connect } from "frontity";

const ArticlesOverview = ({ state }) => {
  const { posts, isFetching, isLimit, isError, fetchNext } =
    usePostTypeInfiniteScroll({ limit: 9 });

  return (
    <>
      <div>
        {posts.map(({ Wrapper, key, link, isLast }) => (
          <Wrapper key={key}>
            <div>{link}</div>
            {!isLast && <hr />}
          </Wrapper>
        ))}
      </div>

      <ButtonContainer>
        {isFetching && <div>Loading..</div>}
        {isLimit && <Button onClick={fetchNext}>Load Next Page</Button>}
        {isError && (
          <Button onClick={fetchNext}>Something failed - Retry</Button>
        )}
      </ButtonContainer>
    </>
  );
};

export default connect(ArticlesOverview);

const ButtonContainer = styled.div`
  width: 100%;
  text-align: center;
  margin-top: 40px;
`;

const Button = styled.button`
  position: relative;
  background: black;
  color: white;
  padding: 12px;
  font-weight: bold;
  border: none;
`;