From a90c792e093e27d64fbd88aa6dca18509edc9e5a Mon Sep 17 00:00:00 2001
From: Ezerous <ezerous@gmail.com>
Date: Sat, 27 Feb 2021 22:00:42 +0200
Subject: [PATCH] fix: fixed displayed post index

---
 .../src/components/PostList/index.jsx              | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/concordia-app/src/components/PostList/index.jsx b/packages/concordia-app/src/components/PostList/index.jsx
index c42a8c6..05c06de 100644
--- a/packages/concordia-app/src/components/PostList/index.jsx
+++ b/packages/concordia-app/src/components/PostList/index.jsx
@@ -8,7 +8,7 @@ import {
 import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
 import { drizzle } from '../../redux/store';
 import PostListRow from './PostListRow';
-import PaginationComponent from '../PaginationComponent';
+import PaginationComponent, { ITEMS_PER_PAGE } from '../PaginationComponent';
 
 const { contracts: { [FORUM_CONTRACT]: { methods: { getPost: { cacheCall: getPostChainData } } } } } = drizzle;
 
@@ -16,6 +16,7 @@ const PostList = (props) => {
   const {
     postIds, numberOfItems, onPageChange, loading, focusOnPost,
   } = props;
+  const [pageNumber, setPageNumber] = useState(1);
   const [getPostCallHashes, setGetPostCallHashes] = useState([]);
 
   useEffect(() => {
@@ -40,7 +41,7 @@ const PostList = (props) => {
         return (
             <PostListRow
               id={postId}
-              postIndex={index + 1}
+              postIndex={ITEMS_PER_PAGE * (pageNumber - 1) + index + 1}
               key={postId}
               postCallHash={postHash && postHash.hash}
               loading={postHash === undefined}
@@ -48,7 +49,12 @@ const PostList = (props) => {
             />
         );
       });
-  }, [focusOnPost, getPostCallHashes, loading, postIds]);
+  }, [focusOnPost, getPostCallHashes, loading, pageNumber, postIds]);
+
+  const handlePageChange = (event, data) => {
+    setPageNumber(data.activePage);
+    onPageChange(event, data);
+  };
 
   return (
       <>
@@ -56,7 +62,7 @@ const PostList = (props) => {
               <Loader active={loading} />
               {posts}
           </Dimmer.Dimmable>
-          <PaginationComponent onPageChange={onPageChange} numberOfItems={numberOfItems} />
+          <PaginationComponent onPageChange={handlePageChange} numberOfItems={numberOfItems} />
       </>
   );
 };