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} - +
+ + {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 - ? ( -