diff --git a/packages/concordia-app/src/ErrorBoundary.jsx b/packages/concordia-app/src/ErrorBoundary.jsx
new file mode 100644
index 0000000..86c97ef
--- /dev/null
+++ b/packages/concordia-app/src/ErrorBoundary.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { hasError: false };
+ }
+
+ static getDerivedStateFromError() {
+ return { hasError: true };
+ }
+
+ render() {
+ const { props: { children }, state: { hasError } } = this;
+ if (hasError) {
+ return
Something went wrong.
; // TODO: Make a better "Something went wrong" screen
+ }
+ return children;
+ }
+}
+
+export default ErrorBoundary;
diff --git a/packages/concordia-app/src/components/CustomLoadingTabPane.jsx b/packages/concordia-app/src/components/CustomLoadingTabPane.jsx
index 1b363a8..ac48a93 100644
--- a/packages/concordia-app/src/components/CustomLoadingTabPane.jsx
+++ b/packages/concordia-app/src/components/CustomLoadingTabPane.jsx
@@ -40,7 +40,7 @@ const CustomLoadingTabPane = (props) => {
CustomLoadingTabPane.propTypes = {
loading: PropTypes.bool,
loadingMessage: PropTypes.string,
- children: PropTypes.element.isRequired,
+ children: PropTypes.element,
};
export default CustomLoadingTabPane;
diff --git a/packages/concordia-app/src/components/Pagination/PaginatedTopicList/styles.css b/packages/concordia-app/src/components/Pagination/PaginatedTopicList/styles.css
deleted file mode 100644
index 6bbac7b..0000000
--- a/packages/concordia-app/src/components/Pagination/PaginatedTopicList/styles.css
+++ /dev/null
@@ -1,4 +0,0 @@
-#topic-list{
- height: auto;
- clear: both;
-}
diff --git a/packages/concordia-app/src/components/Pagination/index.jsx b/packages/concordia-app/src/components/PaginationComponent.jsx
similarity index 100%
rename from packages/concordia-app/src/components/Pagination/index.jsx
rename to packages/concordia-app/src/components/PaginationComponent.jsx
diff --git a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
index e2a86b7..cccc576 100644
--- a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
+++ b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
@@ -108,9 +108,9 @@ const PostListRow = (props) => {
[
diff --git a/packages/concordia-app/src/components/PostList/index.jsx b/packages/concordia-app/src/components/PostList/index.jsx
index e2ca121..fdb73be 100644
--- a/packages/concordia-app/src/components/PostList/index.jsx
+++ b/packages/concordia-app/src/components/PostList/index.jsx
@@ -2,41 +2,34 @@ import React, {
useEffect, useMemo, useState,
} from 'react';
import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
import {
- Dimmer, Feed, Loader,
+ Dimmer, Divider, 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, { ITEMS_PER_PAGE } from '../PaginationComponent';
+import './styles.css';
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 [pageNumber, setPageNumber] = useState(1);
const [getPostCallHashes, setGetPostCallHashes] = useState([]);
- const drizzleInitialized = useSelector((state) => state.drizzleStatus.initialized);
- const drizzleInitializationFailed = useSelector((state) => state.drizzleStatus.failed);
useEffect(() => {
- if (drizzleInitialized && !drizzleInitializationFailed && !loading) {
- const newPostsFound = postIds
- .filter((postId) => !getPostCallHashes
- .map((getPostCallHash) => getPostCallHash.id)
- .includes(postId));
-
- if (newPostsFound.length > 0) {
- setGetPostCallHashes([
- ...getPostCallHashes,
- ...newPostsFound
- .map((postId) => ({
- id: postId,
- hash: getPostChainData(postId),
- })),
- ]);
- }
+ if (!loading) {
+ setGetPostCallHashes(
+ postIds.map((postId) => ({
+ id: postId,
+ hash: getPostChainData(postId),
+ })),
+ );
}
- }, [drizzleInitializationFailed, drizzleInitialized, getPostCallHashes, loading, postIds]);
+ }, [loading, postIds]);
const posts = useMemo(() => {
if (loading) {
@@ -49,7 +42,7 @@ const PostList = (props) => {
return (
{
/>
);
});
- }, [focusOnPost, getPostCallHashes, loading, postIds]);
+ }, [focusOnPost, getPostCallHashes, loading, pageNumber, postIds]);
+
+ const handlePageChange = (event, data) => {
+ setPageNumber(data.activePage);
+ onPageChange(event, data);
+ };
return (
-
-
- {posts}
-
+ <>
+
+
+ {posts}
+
+
+
+ >
);
};
diff --git a/packages/concordia-app/src/components/PostList/styles.css b/packages/concordia-app/src/components/PostList/styles.css
index baf2856..bffcaf6 100644
--- a/packages/concordia-app/src/components/PostList/styles.css
+++ b/packages/concordia-app/src/components/PostList/styles.css
@@ -1,3 +1,7 @@
#post-list{
height: 100%;
}
+
+#post-list-pagination{
+ padding: 1rem 0;
+}
diff --git a/packages/concordia-app/src/components/ProfileImage.jsx b/packages/concordia-app/src/components/ProfileImage.jsx
index 5c78f66..f7be574 100644
--- a/packages/concordia-app/src/components/ProfileImage.jsx
+++ b/packages/concordia-app/src/components/ProfileImage.jsx
@@ -6,7 +6,7 @@ import { USER_PROFILE_PICTURE } from '../constants/orbit/UserDatabaseKeys';
const ProfileImage = (props) => {
const {
- topicAuthorAddress, topicAuthor, topicAuthorMeta, avatarUrl, size, link,
+ profileAddress, profileUsername, topicAuthorMeta, avatarUrl, size, link,
} = props;
const stopClickPropagation = (event) => {
@@ -20,30 +20,30 @@ const ProfileImage = (props) => {
return (
);
- }, [avatarUrl, size, topicAuthor, topicAuthorMeta]);
+ }, [avatarUrl, size, profileUsername, topicAuthorMeta]);
return useMemo(() => {
- if (link && topicAuthorAddress) {
+ if (link && profileAddress) {
return (
-
+
{authorAvatar}
);
}
return authorAvatar;
- }, [authorAvatar, link, topicAuthorAddress]);
+ }, [authorAvatar, link, profileAddress]);
};
ProfileImage.propTypes = {
- topicAuthorAddress: PropTypes.string,
- topicAuthor: PropTypes.string,
- topicAuthorMeta: PropTypes.shape({ id: PropTypes.string, profile_picture: PropTypes.string }),
+ profileAddress: PropTypes.string,
+ profileUsername: PropTypes.string,
+ profileUserMeta: PropTypes.shape({ id: PropTypes.string, profile_picture: PropTypes.string }),
avatarUrl: PropTypes.string,
size: PropTypes.string,
link: PropTypes.bool,
diff --git a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
index 16ed29b..5fffc4a 100644
--- a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
+++ b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
@@ -105,9 +105,9 @@ const TopicListRow = (props) => {
]-
diff --git a/packages/concordia-app/src/components/TopicList/index.jsx b/packages/concordia-app/src/components/TopicList/index.jsx
index 2941848..7cb9912 100644
--- a/packages/concordia-app/src/components/TopicList/index.jsx
+++ b/packages/concordia-app/src/components/TopicList/index.jsx
@@ -2,32 +2,28 @@ import React, {
useEffect, useMemo, useState,
} from 'react';
import PropTypes from 'prop-types';
-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);
useEffect(() => {
- if (drizzleInitialized && !drizzleInitializationFailed) {
- setGetTopicCallHashes(
- topicIds
- .map((topicId) => ({
- id: topicId,
- hash: getTopicChainData(topicId),
- })),
- );
- }
- }, [drizzleInitializationFailed, drizzleInitialized, topicIds]);
+ setGetTopicCallHashes(
+ topicIds
+ .map((topicId) => ({
+ id: topicId,
+ hash: getTopicChainData(topicId),
+ })),
+ );
+ }, [topicIds]);
const topics = useMemo(() => topicIds
.map((topicId) => {
@@ -44,14 +40,19 @@ const TopicList = (props) => {
}), [getTopicCallHashes, topicIds]);
return (
-
- {topics}
-
+
);
};
TopicList.propTypes = {
topicIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+ numberOfItems: PropTypes.number.isRequired,
+ onPageChange: PropTypes.func,
};
export default TopicList;
diff --git a/packages/concordia-app/src/index.jsx b/packages/concordia-app/src/index.jsx
index a29f530..1f4b575 100644
--- a/packages/concordia-app/src/index.jsx
+++ b/packages/concordia-app/src/index.jsx
@@ -3,15 +3,18 @@ import './utils/wdyr';
import React, { Suspense } from 'react';
import { render } from 'react-dom';
import App from './App';
+import ErrorBoundary from './ErrorBoundary';
import store from './redux/store';
import * as serviceWorker from './utils/serviceWorker';
import LoadingScreen from './components/LoadingScreen';
import './assets/css/index.css';
render(
- }>
-
- ,
+
+ }>
+
+
+ ,
document.getElementById('root'),
);
diff --git a/packages/concordia-app/src/layouts/RegisterLayout/styles.css b/packages/concordia-app/src/layouts/RegisterLayout/styles.css
index 9892747..454bfbc 100644
--- a/packages/concordia-app/src/layouts/RegisterLayout/styles.css
+++ b/packages/concordia-app/src/layouts/RegisterLayout/styles.css
@@ -1,7 +1,8 @@
.particles {
position: fixed;
- right: 0;
+ top: 0;
bottom: 0;
+ right: 0;
left: 0;
background: var(--secondary-color);
}
diff --git a/packages/concordia-app/src/views/Home/Board/index.jsx b/packages/concordia-app/src/views/Home/Board/index.jsx
deleted file mode 100644
index 618ea7f..0000000
--- a/packages/concordia-app/src/views/Home/Board/index.jsx
+++ /dev/null
@@ -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
- ? (
-