Hello, I am pretty new to Frontity and Web Development in general so please excuse any lack of perspective I may have.
My issue is effectively using the Material UI component pagination to route through an already paginated blog archive.
import React from 'react'
import { connect, styled } from "frontity"
import Link from "@frontity/components/link"
import { Pagination, PaginationItem } from '@material-ui/lab';
function PaginationComponent( { state, actions, libraries }) {
const { totalPages } = state.source.get(state.router.link);
const { path, page, query } = libraries.source.parse(state.router.link)
const isThereNextPage = page < totalPages;
const isTherePreviousPage = page > 1;
const nextPageLink = libraries.source.stringify({path, page: page + 1, query});
const prevPageLink = libraries.source.stringify({path, page: page - 1, query})
return (
<div>
{isTherePreviousPage && (
<Link link={prevPageLink}>New Posts</Link>
) }
<Pagination
page={page}
count={totalPages}
renderItem={(item) => (
<PaginationItem
component={Link}
to={`/blog${page === 1 ? '' : `/page/${page}`}`}
{...item}
/>
)}
/>
{isThereNextPage && (
<Link link={nextPageLink}>Older Posts</Link>
) }
</div>
)
}
export default connect(PaginationComponent)
I so far have been able to create pagination and route through the pages using the Link component, through a technique I discovered on this forum. What I would like to do, however, is use the Material UI component for it. I was able find this to help guide me, where it says “Router Intergration”. From there this code is given,
import React from 'react';
import { MemoryRouter, Route } from 'react-router';
import { Link } from 'react-router-dom';
import Pagination from '@material-ui/lab/Pagination';
import PaginationItem from '@material-ui/lab/PaginationItem';
export default function PaginationLink() {
return (
<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
<Route>
{({ location }) => {
const query = new URLSearchParams(location.search);
const page = parseInt(query.get('page') || '1', 10);
return (
<Pagination
page={page}
count={10}
renderItem={(item) => (
<PaginationItem
component={Link}
to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}
{...item}
/>
)}
/>
);
}}
</Route>
</MemoryRouter>
);
}
My question is how can I adapt this code that uses purely React to work in Frontity? Here is my repo.