From 9d481fc16211993c3e0c1e7f711096bd8e462beb Mon Sep 17 00:00:00 2001 From: Apostolof Date: Tue, 2 Apr 2019 22:10:33 +0300 Subject: [PATCH] Fixes for propTypes, Minro UI improvements --- app/src/CustomPropTypes.js | 28 +++- app/src/containers/PlaceholderContainer.js | 164 ++++++++++++++++++++ app/src/containers/Post.js | 88 +++-------- app/src/containers/PostList.js | 44 ++++-- app/src/containers/ProfileContainer.js | 6 +- app/src/containers/ProfileInformation.js | 106 ++++++++----- app/src/containers/Topic.js | 5 +- app/src/containers/TopicContainer.js | 2 +- app/src/containers/TopicList.js | 8 +- app/src/containers/UsernameFormContainer.js | 4 +- 10 files changed, 322 insertions(+), 133 deletions(-) create mode 100644 app/src/containers/PlaceholderContainer.js diff --git a/app/src/CustomPropTypes.js b/app/src/CustomPropTypes.js index 62a9087..cd6baf8 100644 --- a/app/src/CustomPropTypes.js +++ b/app/src/CustomPropTypes.js @@ -2,11 +2,27 @@ import PropTypes from 'prop-types'; //TODO: Move this file const GetTopicResult = PropTypes.PropTypes.shape({ - 0: PropTypes.string, - 1: PropTypes.string, - 2: PropTypes.string, - 3: PropTypes.string, - 4: PropTypes.arrayOf(PropTypes.number) + userAddress: PropTypes.string.isRequired, + fullOrbitAddress: PropTypes.string.isRequired, + userName: PropTypes.string.isRequired, + timestamp: PropTypes.number.isRequired, + numberOfReplies: PropTypes.number.isRequired }); -export { GetTopicResult }; +const GetPostResult = PropTypes.PropTypes.shape({ + userAddress: PropTypes.string.isRequired, + fullOrbitAddress: PropTypes.string.isRequired, + userName: PropTypes.string.isRequired, + timestamp: PropTypes.number.isRequired, + topicID: PropTypes.string.isRequired +}); + +const TopicPlaceholderExtra = PropTypes.PropTypes.shape({ + topicID: PropTypes.number.isRequired, +}); + +const PostPlaceholderExtra = PropTypes.PropTypes.shape({ + postIndex: PropTypes.number.isRequired, +}); + +export { GetTopicResult, GetPostResult, TopicPlaceholderExtra, PostPlaceholderExtra }; diff --git a/app/src/containers/PlaceholderContainer.js b/app/src/containers/PlaceholderContainer.js new file mode 100644 index 0000000..c3d2586 --- /dev/null +++ b/app/src/containers/PlaceholderContainer.js @@ -0,0 +1,164 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { withRouter } from 'react-router-dom'; +import { TopicPlaceholderExtra, PostPlaceholderExtra } from '../CustomPropTypes' + +import ContentLoader from 'react-content-loader'; +import { Card, Button, Divider, Grid, Icon, Label } from 'semantic-ui-react'; + +class PlaceholderContainer extends Component { + render() { + const { placeholderType, extra, history } = this.props; + + switch (placeholderType) { + case 'Topic': + return( + { + history.push(`/topic/${extra.topicID}`); + }} + > + +
+ + + +
+
+
+

+ + + +

+

+ + + +

+

+ + + +

+
+ + + ); + case 'Post': + return( +
+ + +# + {extra.postIndex} + + + + + +
+ + + +
+ + +
+
+ + Username + + + + + + +
+
+ + + + + + + +
+
+ + + + +
+
+ + + + + + + + + + + +
+ ); + } + } +} + +PlaceholderContainer.propTypes = { + placeholderType: PropTypes.string.isRequired, + extra: PropTypes.oneOfType([ + TopicPlaceholderExtra.isRequired, + PostPlaceholderExtra.isRequired + ]) +}; + +export default withRouter(PlaceholderContainer); diff --git a/app/src/containers/Post.js b/app/src/containers/Post.js index 3c440e3..59087fc 100644 --- a/app/src/containers/Post.js +++ b/app/src/containers/Post.js @@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux'; import { push } from 'connected-react-router'; import { Link, withRouter } from 'react-router-dom'; import { connect } from 'react-redux'; +import { GetPostResult } from '../CustomPropTypes' import ContentLoader from 'react-content-loader'; import { Button, Divider, Grid, Icon, Label, Transition } from 'semantic-ui-react'; @@ -65,7 +66,7 @@ class Post extends Component { const { fetchPostDataStatus } = this.state; const { postData, orbitDB, postID } = this.props; - if (postData && orbitDB.orbitdb && fetchPostDataStatus === 'pending') { + if (orbitDB.orbitdb && fetchPostDataStatus === 'pending') { this.setState({ fetchPostDataStatus: 'fetching' }); @@ -77,10 +78,10 @@ class Post extends Component { const { address, postData, orbitDB } = this.props; let orbitPostData; - if (postData.value[1] === address) { + if (postData.userAddress === address) { orbitPostData = orbitDB.postsDB.get(postID); } else { - const fullAddress = `/orbitdb/${postData.value[0]}/posts`; + const fullAddress = `/orbitdb/${postData.fullOrbitAddress}/posts`; const store = await orbitDB.orbitdb.keyvalue(fullAddress); await store.load(); @@ -107,30 +108,6 @@ class Post extends Component { const { animateOnToggle, postSubject, postContent } = this.state; const { avatarUrl, postIndex, navigateTo, postData, postID } = this.props; - const avatarView = (postData - ? ( - - ) - : ( -
- - - -
- ) - ); - return ( - {postData !== null - ? ( - { event.stopPropagation(); }} - > - {avatarView} - - ) - : avatarView - } + { event.stopPropagation(); }} > + +
- + - {postData !== null - ? postData.value[2] - : 'Username' - } + {postData.userName} - {postData !== null - && ( - - ) - } +
- + {postSubject === '' ? ( @@ -209,9 +169,8 @@ class Post extends Component { /> ) - : `Subject: ${ - postSubject}` - } + : `Subject: ${postSubject}` + }
@@ -243,8 +202,7 @@ class Post extends Component { height="4.0" /> - ) - } + )}
@@ -270,7 +228,7 @@ class Post extends Component { onClick={postData ? () => { navigateTo(`/topic/${ - postData.value[4]}/${ + postData.topicID}/${ postID}`); } : () => {}} @@ -293,7 +251,7 @@ Post.propTypes = { avatarUrl: PropTypes.string, postIndex: PropTypes.number.isRequired, navigateTo: PropTypes.func.isRequired, - postData: PropTypes.object, + postData: GetPostResult.isRequired, postID: PropTypes.string.isRequired }; diff --git a/app/src/containers/PostList.js b/app/src/containers/PostList.js index 22a1024..6de283f 100644 --- a/app/src/containers/PostList.js +++ b/app/src/containers/PostList.js @@ -4,6 +4,7 @@ import { connect } from 'react-redux'; import { drizzle } from '../index'; import Post from './Post'; +import PlaceholderContainer from './PlaceholderContainer'; const contract = 'Forum'; const getPostMethod = 'getPost'; @@ -56,19 +57,34 @@ class PostList extends Component { const { dataKeys } = this.state; const { postIDs, contracts, focusOnPost, recentToTheTop } = this.props; - const posts = postIDs.map((postID, index) => ( - - )); + const posts = postIDs.map((postID, index) => { + let fetchedPostData; + if(dataKeys[postID]) + fetchedPostData = contracts[contract][getPostMethod][dataKeys[postID]]; + + if(fetchedPostData) { + const postData = { + userAddress: fetchedPostData.value[1], + fullOrbitAddress: `/orbitdb/${fetchedPostData.value[0]}/posts`, + userName: fetchedPostData.value[2], + timestamp: fetchedPostData.value[3]*1000, + topicID: fetchedPostData.value[4] + }; + return( + + ) + } + + return (); + }); return (
@@ -84,7 +100,7 @@ class PostList extends Component { PostList.propTypes = { drizzleStatus: PropTypes.object.isRequired, postIDs: PropTypes.array.isRequired, - contracts: PropTypes.array.isRequired, + contracts: PropTypes.PropTypes.objectOf(PropTypes.object).isRequired, focusOnPost: PropTypes.number, recentToTheTop: PropTypes.bool }; diff --git a/app/src/containers/ProfileContainer.js b/app/src/containers/ProfileContainer.js index 0c6da08..cc2bdf5 100644 --- a/app/src/containers/ProfileContainer.js +++ b/app/src/containers/ProfileContainer.js @@ -136,8 +136,8 @@ class ProfileContainer extends Component { @@ -200,7 +200,7 @@ class ProfileContainer extends Component { ProfileContainer.propTypes = { match: PropTypes.object.isRequired, drizzleStatus: PropTypes.object.isRequired, - contracts: PropTypes.array.isRequired, + contracts: PropTypes.PropTypes.objectOf(PropTypes.object).isRequired, navigateTo: PropTypes.func.isRequired, user: PropTypes.object.isRequired, setNavBarTitle: PropTypes.func.isRequired diff --git a/app/src/containers/ProfileInformation.js b/app/src/containers/ProfileInformation.js index 92267e3..fd35a3f 100644 --- a/app/src/containers/ProfileInformation.js +++ b/app/src/containers/ProfileInformation.js @@ -6,7 +6,9 @@ import { drizzle } from '../index'; import epochTimeConverter from '../helpers/EpochTimeConverter'; +import ContentLoader from 'react-content-loader'; import UsernameFormContainer from './UsernameFormContainer'; +import { Table } from 'semantic-ui-react' const callsInfo = [ { @@ -130,46 +132,76 @@ class ProfileInformation extends Component { name={username} /> )} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
Username:{username}
Account address:{address}
OrbitDB:{orbitDBId}
TopicsDB:{topicsDBId}
PostsDB:{postsDBId}
Number of topics created:{numberOfTopics}
Number of posts:{numberOfPosts}
+ + + Username: + {username} + + + Account address: + {address} + + + OrbitDB: + {orbitDBId ? orbitDBId + : + + + } + + + TopicsDB: + {topicsDBId ? topicsDBId + : + + + } + + + PostsDB: + {postsDBId ? postsDBId + : + + + } + + + Number of topics created: + {numberOfTopics !== -1 ? numberOfTopics + : + + + } + + + Number of posts: + {numberOfPosts !== -1 ? numberOfPosts + : + + + } + {dateOfRegister && ( - - - - + + Member since: + {epochTimeConverter(dateOfRegister)} + ) } - -
Member since:{epochTimeConverter(dateOfRegister)}
+ + {self && }
); @@ -178,7 +210,7 @@ class ProfileInformation extends Component { ProfileInformation.propTypes = { drizzleStatus: PropTypes.object.isRequired, - contracts: PropTypes.array.isRequired, + contracts: PropTypes.PropTypes.objectOf(PropTypes.object).isRequired, avatarUrl: PropTypes.string, username: PropTypes.string.isRequired, address: PropTypes.string.isRequired, diff --git a/app/src/containers/Topic.js b/app/src/containers/Topic.js index caa7a9c..0cee538 100644 --- a/app/src/containers/Topic.js +++ b/app/src/containers/Topic.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; +import { GetTopicResult } from '../CustomPropTypes' import ContentLoader from 'react-content-loader'; import { Card } from 'semantic-ui-react'; @@ -54,7 +55,7 @@ class Topic extends Component { {topicData.userName}

- Number of Replies: {topicData.nReplies} + Number of Replies: {topicData.numberOfReplies}

@@ -69,7 +70,7 @@ class Topic extends Component { Topic.propTypes = { userAddress: PropTypes.string.isRequired, history: PropTypes.object.isRequired, - //TODO: topicData: GetTopicResult.isRequired, + topicData: GetTopicResult.isRequired, orbitDB: PropTypes.object.isRequired, topicID: PropTypes.number.isRequired }; diff --git a/app/src/containers/TopicContainer.js b/app/src/containers/TopicContainer.js index ead4599..9c6bdbf 100644 --- a/app/src/containers/TopicContainer.js +++ b/app/src/containers/TopicContainer.js @@ -191,7 +191,7 @@ TopicContainer.propTypes = { drizzleStatus: PropTypes.object.isRequired, orbitDB: PropTypes.object.isRequired, setNavBarTitle: PropTypes.func.isRequired, - contracts: PropTypes.array.isRequired, + contracts: PropTypes.PropTypes.objectOf(PropTypes.object).isRequired, user: PropTypes.object.isRequired, match: PropTypes.object.isRequired, navigateTo: PropTypes.func.isRequired diff --git a/app/src/containers/TopicList.js b/app/src/containers/TopicList.js index de41297..dbab22a 100644 --- a/app/src/containers/TopicList.js +++ b/app/src/containers/TopicList.js @@ -4,6 +4,7 @@ import { connect } from 'react-redux'; import { drizzle } from '../index'; import Topic from './Topic'; +import PlaceholderContainer from './PlaceholderContainer'; const contract = 'Forum'; const getTopicMethod = 'getTopic'; @@ -62,11 +63,11 @@ class TopicList extends Component { if(fetchedTopicData) { const topicData = { - userAddress: fetchedTopicData.value[0], + userAddress: fetchedTopicData.value[1], fullOrbitAddress: `/orbitdb/${fetchedTopicData.value[0]}/topics`, userName: fetchedTopicData.value[2], timestamp: fetchedTopicData.value[3]*1000, - nReplies: fetchedTopicData.value[4].length + numberOfReplies: fetchedTopicData.value[4].length }; return( TODO: Loading UI/fetching needs to be changed (?)); + return (); }); //TODO: Return loading indicator instead of topics when not fully loaded (?) diff --git a/app/src/containers/UsernameFormContainer.js b/app/src/containers/UsernameFormContainer.js index e4d209e..a32c260 100644 --- a/app/src/containers/UsernameFormContainer.js +++ b/app/src/containers/UsernameFormContainer.js @@ -213,8 +213,8 @@ UsernameFormContainer.propTypes = { dispatch: PropTypes.func.isRequired, account: PropTypes.string.isRequired, transactionStack: PropTypes.array.isRequired, - transactions: PropTypes.array.isRequired, - contracts: PropTypes.array.isRequired, + transactions: PropTypes.PropTypes.objectOf(PropTypes.object).isRequired, + contracts: PropTypes.PropTypes.objectOf(PropTypes.object).isRequired, user: PropTypes.object.isRequired };