diff --git a/packages/concordia-app/src/components/PostList/index.jsx b/packages/concordia-app/src/components/PostList/index.jsx
index 064d5a0..9b118c3 100644
--- a/packages/concordia-app/src/components/PostList/index.jsx
+++ b/packages/concordia-app/src/components/PostList/index.jsx
@@ -2,24 +2,24 @@ import React, {
useEffect, useMemo, useState,
} from 'react';
import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
import {
Dimmer, Feed, Loader,
} from 'semantic-ui-react';
import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
-import PostListRow from './PostListRow';
import { drizzle } from '../../redux/store';
+import PostListRow from './PostListRow';
+import PaginationComponent from '../PaginationComponent';
const { contracts: { [FORUM_CONTRACT]: { methods: { getPost: { cacheCall: getPostChainData } } } } } = drizzle;
const PostList = (props) => {
- const { postIds, loading, focusOnPost } = props;
+ const {
+ postIds, numberOfItems, onPageChange, loading, focusOnPost,
+ } = props;
const [getPostCallHashes, setGetPostCallHashes] = useState([]);
- const drizzleInitialized = useSelector((state) => state.drizzleStatus.initialized);
- const drizzleInitializationFailed = useSelector((state) => state.drizzleStatus.failed);
useEffect(() => {
- if (drizzleInitialized && !drizzleInitializationFailed && !loading) {
+ if (!loading) {
setGetPostCallHashes(
postIds.map((postId) => ({
id: postId,
@@ -27,7 +27,7 @@ const PostList = (props) => {
})),
);
}
- }, [drizzleInitializationFailed, drizzleInitialized, loading, postIds]);
+ }, [loading, postIds]);
const posts = useMemo(() => {
if (loading) {
@@ -54,6 +54,7 @@ const PostList = (props) => {
{posts}
+
);
};
diff --git a/packages/concordia-app/src/views/Profile/ProfilePostList/index.jsx b/packages/concordia-app/src/views/Profile/ProfilePostList/index.jsx
new file mode 100644
index 0000000..51dbf37
--- /dev/null
+++ b/packages/concordia-app/src/views/Profile/ProfilePostList/index.jsx
@@ -0,0 +1,89 @@
+import React, {
+ useEffect, useMemo, useState,
+} from 'react';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
+import { Header } from 'semantic-ui-react';
+import { drizzle } from '../../../redux/store';
+import { ITEMS_PER_PAGE } from '../../../components/PaginationComponent';
+import PostList from '../../../components/PostList';
+
+const {
+ contracts: {
+ [FORUM_CONTRACT]: {
+ methods: {
+ getUserPostCount: { cacheCall: getUserPostCountChainData },
+ getUserPosts: { cacheCall: getUserPostsChainData },
+ },
+ },
+ },
+} = drizzle;
+
+const ProfilePostList = (props) => {
+ const { username, profileAddress } = props;
+ const [pageNumber, setPageNumber] = useState(1);
+
+ const [userPostCount, setUserPostCount] = useState(null);
+ const [postIds, setPostIds] = useState([]);
+
+ const [getUserPostCountCallHash, setGetUserPostCountCallHash] = useState(null);
+ const [getUserPostsCallHash, setGetUserPostsCallHash] = useState(null);
+
+ const getUserPostCountResult = useSelector((state) => state.contracts[FORUM_CONTRACT].getUserPostCount[getUserPostCountCallHash]);
+ const getUserPostsResult = useSelector((state) => state.contracts[FORUM_CONTRACT].getUserPosts[getUserPostsCallHash]);
+
+ const { t } = useTranslation();
+
+ useEffect(() => {
+ if (getUserPostCountCallHash === null) {
+ setGetUserPostCountCallHash(getUserPostCountChainData(profileAddress));
+ }
+ }, [getUserPostCountCallHash, profileAddress]);
+
+ useEffect(() => {
+ if (userPostCount !== null && userPostCount !== 0) {
+ const startIndex = Math.max(userPostCount - ITEMS_PER_PAGE * pageNumber, 0);
+ const endIndex = userPostCount - ITEMS_PER_PAGE * (pageNumber - 1) - 1;
+ setGetUserPostsCallHash(getUserPostsChainData(profileAddress, startIndex, endIndex));
+ }
+ }, [pageNumber, profileAddress, userPostCount]);
+
+ useEffect(() => {
+ if (getUserPostCountResult) {
+ setUserPostCount(parseInt(getUserPostCountResult.value, 10));
+ }
+ }, [getUserPostCountResult, userPostCount]);
+
+ useEffect(() => {
+ if (getUserPostsResult) {
+ setPostIds(getUserPostsResult.value.slice().reverse().map(Number));
+ }
+ }, [getUserPostsResult, userPostCount]);
+
+ const handlePageChange = (event, data) => {
+ setPageNumber(data.activePage);
+ };
+
+ return useMemo(() => {
+ if (postIds.length && postIds.length !== 0) {
+ return (
+
+ );
+ }
+ if (userPostCount === 0) {
+ return (
+
+ {t('profile.user.has.no.posts.header.message', { user: username })}
+
+ );
+ }
+ return null;
+ }, [t, postIds, userPostCount, username]);
+};
+
+export default ProfilePostList;
diff --git a/packages/concordia-app/src/views/Profile/index.jsx b/packages/concordia-app/src/views/Profile/index.jsx
index 65090ad..6a3165c 100644
--- a/packages/concordia-app/src/views/Profile/index.jsx
+++ b/packages/concordia-app/src/views/Profile/index.jsx
@@ -1,7 +1,7 @@
import React, {
memo, useEffect, useMemo, useState,
} from 'react';
-import { Container, Header, Tab } from 'semantic-ui-react';
+import { Container, Tab } from 'semantic-ui-react';
import { useSelector } from 'react-redux';
import { useHistory, useRouteMatch } from 'react-router';
import { useTranslation } from 'react-i18next';
@@ -9,7 +9,7 @@ import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/Contrac
import { drizzle } from '../../redux/store';
import CustomLoadingTabPane from '../../components/CustomLoadingTabPane';
import ProfileTopicList from './ProfileTopicList';
-import PostList from '../../components/PostList';
+import ProfilePostList from './ProfilePostList';
import GeneralTab from './GeneralTab';
import { GENERAL_TAB, POSTS_TAB, TOPICS_TAB } from '../../constants/ProfileTabs';
import './styles.css';
@@ -80,13 +80,9 @@ const Profile = () => {
), [profileAddress, username]);
- const postsTab = useMemo(() => (userPostIds.length > 0
- ? ()
- : (
-
- {t('profile.user.has.no.posts.header.message', { user: username })}
-
- )), [t, userPostIds, username]);
+ const postsTab = useMemo(() => (
+
+ ), [profileAddress, username]);
const panes = useMemo(() => {
const generalTabPane = ({generalTab});