diff --git a/packages/concordia-app/src/components/PostList/index.jsx b/packages/concordia-app/src/components/PostList/index.jsx index fdb73be..ab18b80 100644 --- a/packages/concordia-app/src/components/PostList/index.jsx +++ b/packages/concordia-app/src/components/PostList/index.jsx @@ -52,10 +52,24 @@ const PostList = (props) => { }); }, [focusOnPost, getPostCallHashes, loading, pageNumber, postIds]); - const handlePageChange = (event, data) => { - setPageNumber(data.activePage); - onPageChange(event, data); - }; + const footer = useMemo(() => { + const handlePageChange = (event, data) => { + setPageNumber(data.activePage); + onPageChange(event, data); + }; + + if (numberOfItems <= ITEMS_PER_PAGE) { + return null; + } + return ( + <> + +
+ +
+ + ); + }, [numberOfItems, onPageChange]); return ( <> @@ -63,10 +77,7 @@ const PostList = (props) => { {posts} - -
- -
+ {footer} ); }; diff --git a/packages/concordia-app/src/components/TopicList/index.jsx b/packages/concordia-app/src/components/TopicList/index.jsx index 7cb9912..0f7d036 100644 --- a/packages/concordia-app/src/components/TopicList/index.jsx +++ b/packages/concordia-app/src/components/TopicList/index.jsx @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import { List } from 'semantic-ui-react'; import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames'; import TopicListRow from './TopicListRow'; -import PaginationComponent from '../PaginationComponent'; +import PaginationComponent, { ITEMS_PER_PAGE } from '../PaginationComponent'; import { drizzle } from '../../redux/store'; import './styles.css'; @@ -39,12 +39,19 @@ const TopicList = (props) => { ); }), [getTopicCallHashes, topicIds]); + const pagination = useMemo(() => { + if (numberOfItems <= ITEMS_PER_PAGE) { + return null; + } + return (); + }, [numberOfItems, onPageChange]); + return (
{topics} - + {pagination}
); };