Refactoring

packages/concordia-app/src/components/Pagination/PaginatedTopicList/styles.css

@@ -1,4 +0,0 @@
-#topic-list{
-    height: auto;
-    clear: both;
-}

packages/concordia-app/src/components/PostList/index.jsx

@@ -20,23 +20,14 @@ const PostList = (props) => {
 
   useEffect(() => {
     if (drizzleInitialized && !drizzleInitializationFailed && !loading) {
-      const newPostsFound = postIds
+      setGetPostCallHashes(
-        .filter((postId) => !getPostCallHashes
+        postIds.map((postId) => ({
-          .map((getPostCallHash) => getPostCallHash.id)
-          .includes(postId));
-
-      if (newPostsFound.length > 0) {
-        setGetPostCallHashes([
-          ...getPostCallHashes,
-          ...newPostsFound
-            .map((postId) => ({
           id: postId,
           hash: getPostChainData(postId),
         })),
-        ]);
+      );
-      }
     }
-  }, [drizzleInitializationFailed, drizzleInitialized, getPostCallHashes, loading, postIds]);
+  }, [drizzleInitializationFailed, drizzleInitialized, loading, postIds]);
 
   const posts = useMemo(() => {
     if (loading) {

packages/concordia-app/src/components/TopicList/index.jsx

@@ -6,13 +6,14 @@ import { useSelector } from 'react-redux';
 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 { drizzle } from '../../redux/store';
 import './styles.css';
 
 const { contracts: { [FORUM_CONTRACT]: { methods: { getTopic: { cacheCall: getTopicChainData } } } } } = drizzle;
 
 const TopicList = (props) => {
-  const { topicIds } = props;
+  const { topicIds, numberOfItems, onPageChange } = props;
   const [getTopicCallHashes, setGetTopicCallHashes] = useState([]);
   const drizzleInitialized = useSelector((state) => state.drizzleStatus.initialized);
   const drizzleInitializationFailed = useSelector((state) => state.drizzleStatus.failed);
@@ -44,14 +45,19 @@ const TopicList = (props) => {
     }), [getTopicCallHashes, topicIds]);
 
   return (
+      <div>
           <List id="topic-list" size="big">
               {topics}
           </List>
+          <PaginationComponent onPageChange={onPageChange} numberOfItems={numberOfItems} />
+      </div>
   );
 };
 
 TopicList.propTypes = {
   topicIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+  numberOfItems: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func,
 };
 
 export default TopicList;

packages/concordia-app/src/views/Home/Board/index.jsx

@@ -1,67 +0,0 @@
-import React, { useMemo } from 'react';
-import { Button, Header } from 'semantic-ui-react';
-import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router';
-import { useTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
-import PaginatedTopicList from '../../../components/Pagination/PaginatedTopicList';
-import './styles.css';
-
-const Board = (props) => {
-  const { numberOfTopics } = props;
-  const hasSignedUp = useSelector((state) => state.user.hasSignedUp);
-  const history = useHistory();
-  const { t } = useTranslation();
-
-  const boardContents = useMemo(() => (
-      <>
-          {hasSignedUp
-            ? (
-                <Button
-                  id="new-topic-button"
-                  className="primary-button"
-                  content="New Topic"
-                  icon="plus"
-                  labelPosition="left"
-                  positive
-                  onClick={() => history.push('/topics/new')}
-                />
-            )
-            : null}
-          {/* eslint-disable-next-line no-nested-ternary */}
-          {numberOfTopics > 0
-          // eslint-disable-next-line react/jsx-no-undef
-            ? (<PaginatedTopicList />)
-            : (!hasSignedUp
-              ? (
-                  <div id="no-topic-message" className="vertical-center-in-parent unselectable">
-                      <Header textAlign="center" as="h2">
-                          {t('board.header.no.topics.message')}
-                      </Header>
-                      <Header textAlign="center" as="h3">
-                          {t('board.sub.header.no.topics.guest')}
-                      </Header>
-                  </div>
-              )
-              : (
-                  <div id="no-topic-message" className="vertical-center-in-parent unselectable">
-                      <Header textAlign="center" as="h2">
-                          {t('board.header.no.topics.message')}
-                      </Header>
-                      <Header textAlign="center" as="h3">
-                          {t('board.sub.header.no.topics.user')}
-                      </Header>
-                  </div>
-              ))}
-
-      </>
-  ), [numberOfTopics, hasSignedUp, t, history]);
-
-  return (boardContents);
-};
-
-Board.propTypes = {
-  numberOfTopics: PropTypes.number.isRequired,
-};
-
-export default Board;

packages/concordia-app/src/views/Home/Board/styles.css

@@ -1,15 +0,0 @@
-#no-topic-message {
-    padding-top: 22rem;
-    clear: both;
-}
-
-#no-topic-message > .header {
-    color: white;
-}
-
-#new-topic-button{
-    float:right;
-    margin-top: 1px;
-    margin-bottom: 2em;
-    margin-right: 0;
-}

packages/concordia-app/src/components/Pagination/PaginatedTopicList/index.jsx → packages/concordia-app/src/views/Home/HomeTopicList/index.jsx

@@ -5,9 +5,8 @@ import { useSelector } from 'react-redux';
 import _ from 'lodash';
 import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
 import { drizzle } from '../../../redux/store';
-import TopicList from '../../TopicList';
+import { ITEMS_PER_PAGE } from '../../../components/PaginationComponent';
-import PaginationComponent, { ITEMS_PER_PAGE } from '../index';
+import TopicList from '../../../components/TopicList';
-import './styles.css';
 
 const {
   contracts: {
@@ -19,7 +18,7 @@ const {
   },
 } = drizzle;
 
-const PaginatedTopicList = () => {
+const HomeTopicList = () => {
   const drizzleInitialized = useSelector((state) => state.drizzleStatus.initialized);
   const drizzleInitializationFailed = useSelector((state) => state.drizzleStatus.failed);
   const [pageNumber, setPageNumber] = useState(1);
@@ -40,11 +39,11 @@ const PaginatedTopicList = () => {
       setTopicIds(_.rangeRight(Math.max(numTopics - ITEMS_PER_PAGE * pageNumber, 0),
         numTopics - ITEMS_PER_PAGE * (pageNumber - 1)));
     }
-  }, [pageNumber, drizzleInitializationFailed, drizzleInitialized, numTopics]);
+  }, [drizzleInitializationFailed, drizzleInitialized, numTopics, pageNumber]);
 
   useEffect(() => {
     if (numTopicsResult) {
-      setNumTopics(numTopicsResult.value);
+      setNumTopics(parseInt(numTopicsResult.value, 10));
     }
   }, [numTopicsResult]);
 
@@ -52,12 +51,18 @@ const PaginatedTopicList = () => {
     setPageNumber(data.activePage);
   };
 
-  return useMemo(() => (
+  return useMemo(() => {
-      <div id="paginated-topic-list">
+    if (numTopics !== null) {
-          <TopicList topicIds={topicIds} />
+      return (
-          <PaginationComponent onPageChange={handlePageChange} numberOfItems={numTopics} />
+          <TopicList
-      </div>
+            topicIds={topicIds}
-  ), [numTopics, topicIds]);
+            numberOfItems={numTopics}
+            onPageChange={handlePageChange}
+          />
+      );
+    }
+    return null;
+  }, [numTopics, topicIds]);
 };
 
-export default PaginatedTopicList;
+export default HomeTopicList;

packages/concordia-app/src/views/Home/index.jsx

@@ -1,10 +1,12 @@
 import React, {
   memo, useEffect, useMemo, useState,
 } from 'react';
-import { Container } from 'semantic-ui-react';
+import { useHistory } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { Button, Container, Header } from 'semantic-ui-react';
 import { useSelector } from 'react-redux';
 import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
-import Board from './Board';
+import HomeScreenTopicList from './HomeTopicList';
 import './styles.css';
 import { drizzle } from '../../redux/store';
 
@@ -13,6 +15,9 @@ const { contracts: { [FORUM_CONTRACT]: { methods: { numTopics } } } } = drizzle;
 const Home = () => {
   const [numberOfTopicsCallHash, setNumberOfTopicsCallHash] = useState('');
   const numTopicsResults = useSelector((state) => state.contracts[FORUM_CONTRACT].numTopics);
+  const hasSignedUp = useSelector((state) => state.user.hasSignedUp);
+  const history = useHistory();
+  const { t } = useTranslation();
 
   useEffect(() => {
     setNumberOfTopicsCallHash(numTopics.cacheCall());
@@ -25,9 +30,51 @@ const Home = () => {
 
   return useMemo(() => (
       <Container id="home-container" textAlign="center">
-          {numberOfTopics !== null && <Board numberOfTopics={numberOfTopics} />}
+          {numberOfTopics !== null && (
+              <>
+                  {hasSignedUp
+                    ? (
+                        <Button
+                          id="new-topic-button"
+                          className="primary-button"
+                          content="New Topic"
+                          icon="plus"
+                          labelPosition="left"
+                          positive
+                          onClick={() => history.push('/topics/new')}
+                        />
+                    )
+                    : null}
+                  {/* eslint-disable-next-line no-nested-ternary */}
+                  {numberOfTopics > 0
+                  // eslint-disable-next-line react/jsx-no-undef
+                    ? (<HomeScreenTopicList />)
+                    : (!hasSignedUp
+                      ? (
+                          <div id="no-topic-message" className="vertical-center-in-parent unselectable">
+                              <Header textAlign="center" as="h2">
+                                  {t('board.header.no.topics.message')}
+                              </Header>
+                              <Header textAlign="center" as="h3">
+                                  {t('board.sub.header.no.topics.guest')}
+                              </Header>
+                          </div>
+                      )
+                      : (
+                          <div id="no-topic-message" className="vertical-center-in-parent unselectable">
+                              <Header textAlign="center" as="h2">
+                                  {t('board.header.no.topics.message')}
+                              </Header>
+                              <Header textAlign="center" as="h3">
+                                  {t('board.sub.header.no.topics.user')}
+                              </Header>
+                          </div>
+                      ))}
+
+              </>
+          )}
       </Container>
-  ), [numberOfTopics]);
+  ), [numberOfTopics, hasSignedUp, t, history]);
 };
 
 export default memo(Home);

packages/concordia-app/src/views/Home/styles.css

@@ -1,3 +1,19 @@
 #home-container {
     height: 100%;
 }
+
+#no-topic-message {
+    padding-top: 22rem;
+    clear: both;
+}
+
+#no-topic-message > .header {
+    color: white;
+}
+
+#new-topic-button{
+    float:right;
+    margin-top: 1px;
+    margin-bottom: 2em;
+    margin-right: 0;
+}

packages/concordia-contracts/contracts/Forum.sol

@@ -7,6 +7,7 @@ contract Forum {
     string public constant USERNAME_TAKEN = "Username is already taken.";
     string public constant TOPIC_DOES_NOT_EXIST = "Topic doesn't exist.";
     string public constant POST_DOES_NOT_EXIST = "Post doesn't exist.";
+    string public constant INVALID_RANGE = "Invalid range.";
 
     //----------------------------------------USER----------------------------------------
     struct User {
@@ -67,12 +68,38 @@ contract Forum {
         return false;
     }
 
-    function getUserTopics(address userAddress) public view returns (uint[] memory) {
+    function getUserTopics(address userAddress, uint startIndex, uint endIndex) public view returns (uint[] memory) {
+        require(hasUserSignedUp(userAddress), USER_HAS_NOT_SIGNED_UP);
+        require(startIndex <= endIndex && users[userAddress].topicIDs.length > endIndex, INVALID_RANGE);
+        uint length = endIndex - startIndex + 1;
+        uint[] memory userTopics = new uint[](length);
+        uint counter = 0;
+        for (uint i = startIndex; i <= endIndex; i++) {
+            userTopics[counter] = users[userAddress].topicIDs[i];
+            counter++;
+        }
+        return userTopics;
+    }
+
+    function getUserPosts(address userAddress, uint startIndex, uint endIndex) public view returns (uint[] memory) {
+        require(hasUserSignedUp(userAddress), USER_HAS_NOT_SIGNED_UP);
+        require(startIndex <= endIndex && users[userAddress].postIDs.length > endIndex, INVALID_RANGE);
+        uint length = endIndex - startIndex + 1;
+        uint[] memory userPosts = new uint[](length);
+        uint counter = 0;
+        for (uint i = startIndex; i <= endIndex; i++) {
+            userPosts[counter] = users[userAddress].postIDs[i];
+            counter++;
+        }
+        return userPosts;
+    }
+
+    function getAllUserTopics(address userAddress) public view returns (uint[] memory) {
         require(hasUserSignedUp(userAddress), USER_HAS_NOT_SIGNED_UP);
         return users[userAddress].topicIDs;
     }
 
-    function getUserPosts(address userAddress) public view returns (uint[] memory) {
+    function getAllUserPosts(address userAddress) public view returns (uint[] memory) {
         require(hasUserSignedUp(userAddress), USER_HAS_NOT_SIGNED_UP);
         return users[userAddress].postIDs;
     }