From 64d95f8d9435dc59586c6d3a43c2fc1f0206a471 Mon Sep 17 00:00:00 2001 From: Apostolof Date: Mon, 11 Jun 2018 11:48:06 +0300 Subject: [PATCH] Fix Routes, Add other users profiles view, Other minor fixes --- src/components/Post.js | 16 +++++--- src/components/PostList.js | 17 +++++---- src/components/TopicList.js | 4 +- src/containers/PrivateRouteContainer.js | 41 +++++---------------- src/containers/ProfileContainer.js | 49 ++++++++++++++++++++----- src/containers/StartTopicContainer.js | 2 + src/containers/TopicContainer.js | 39 +++++++++++++------- src/index.js | 18 +++++++-- 8 files changed, 114 insertions(+), 72 deletions(-) diff --git a/src/components/Post.js b/src/components/Post.js index 9980c6f..242e7d3 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -1,4 +1,5 @@ import React from 'react'; +import { Link, withRouter } from 'react-router'; import UserAvatar from 'react-user-avatar'; import TimeAgo from 'react-timeago'; import ReactMarkdown from 'react-markdown'; @@ -9,11 +10,14 @@ const Post = (props) => { ?
- + {event.stopPropagation()}}> + +

{props.post.username} @@ -60,4 +64,4 @@ const Post = (props) => { ); }; -export default Post; \ No newline at end of file +export default withRouter(Post); \ No newline at end of file diff --git a/src/components/PostList.js b/src/components/PostList.js index 5ff4099..d8bc25f 100644 --- a/src/components/PostList.js +++ b/src/components/PostList.js @@ -1,6 +1,5 @@ import { drizzleConnect } from 'drizzle-react'; import React, { Component } from 'react'; -import { Link } from 'react-router'; import PropTypes from 'prop-types'; import Post from './Post'; @@ -45,12 +44,15 @@ class PostList extends Component { const posts = this.postsData.map((post, index) => { if (post) { return ( - { + this.context.router.push("/topic/" + post[4] + "/" + + ((this.orbitPostsData[index] !== undefined) + ? this.orbitPostsData[index].subject + "/" + this.props.postIDs[index] + : ""))}} key={index}> - +

); } else { return ( @@ -94,13 +96,14 @@ class PostList extends Component { }; PostList.contextTypes = { - drizzle: PropTypes.object + drizzle: PropTypes.object, + router: PropTypes.object }; const mapStateToProps = state => { return { user: state.user, //Needed!! - orbitDB: state.orbitDB, + orbitDB: state.orbitDB } }; diff --git a/src/components/TopicList.js b/src/components/TopicList.js index 9eb55fb..de24078 100644 --- a/src/components/TopicList.js +++ b/src/components/TopicList.js @@ -56,7 +56,7 @@ class TopicList extends Component { const topics = this.topicsData.map((topic, index) => { if (topic){ return ( - { - console.log("rest"); - console.log(JSON.stringify(component)); +const PrivateRoute = (props) => { return ( - { - return user.hasSignedUp - ? (renderMergedProps(component, routeProps, rest)) - : (); - }}/> + props.user.hasSignedUp + ? + : ); }; -const renderMergedProps = (component, ...rest) => { - const finalProps = Object.assign({}, ...rest); - return ( - React.createElement(component, finalProps) - ); -} - - -const PrivateRouteContainer = withRouter(connect(state => ({ - hasSignedUp: state.user.hasSignedUp -}))(PrivateRoute)); - -/*const mapStateToProps = state => { +const mapStateToProps = state => { return { user: state.user } -};*/ +}; -/*const PrivateRouteContainer = withRouter(drizzleConnect(PrivateRoute, mapStateToProps));*/ +const PrivateRouteContainer = drizzleConnect(PrivateRoute, mapStateToProps); export default PrivateRouteContainer; \ No newline at end of file diff --git a/src/containers/ProfileContainer.js b/src/containers/ProfileContainer.js index 2e62442..7f940bc 100644 --- a/src/containers/ProfileContainer.js +++ b/src/containers/ProfileContainer.js @@ -10,6 +10,7 @@ import epochTimeConverter from '../helpers/EpochTimeConverter'; const contract = "Forum"; const contractMethods = { + getUsername: "getUsername", getDateOfRegister: "getUserDateOfRegister", getOrbitDB: "getOrbitDBId", getUserTopics: "getUserTopics", @@ -20,10 +21,20 @@ class Profile extends Component { constructor(props, context) { super(props); - //THIS WILL CHANGE WITH ACTUAL DATA - this.match = { - username: this.props.user.username, - userAddress: this.props.user.address + if (this.props.params.address){ + this.profile = { + userAddress: this.props.params.address, + username: this.props.params.username ? this.props.params.username : "", + orbitId: "", + self: false + } + } else { + this.profile = { + userAddress: this.props.user.address, + username: this.props.user.username, + orbitId: this.props.orbitDB.id, + self: true + } } this.handleTabClick = this.handleTabClick.bind(this); @@ -32,12 +43,13 @@ class Profile extends Component { this.state = { viewSelected: "topics", - username: this.match.username, // TODO actually get them from match - userAddress: this.match.userAddress, // when router is fixed + username: this.profile.username, + userAddress: this.profile.userAddress, dateOfRegister: null, - orbitDBId: this.match.address === this.props.user.address ? this.props.orbitDB.id : "", + orbitDBId: this.profile.orbitId, + getUsernameTransactionState: null, getDateOfRegisterTransactionState: null, - getOrbitDBTransactionState: this.match.address === this.props.user.address ? "SUCCESS" : null, + getOrbitDBTransactionState: this.profile.orbitId ? "SUCCESS" : null, getTopicsTransactionState: null, getPostsTransactionState: null, topicIDs: [], @@ -58,7 +70,7 @@ class Profile extends Component { numberOfTopics={this.state.topicIDs.length} numberOfPosts={this.state.postIDs.length} dateOfRegister={this.state.dateOfRegister} - self/> + self={this.profile.self}/>

(this.handleTabClick("topics"))} className={this.state.viewSelected === "topics" ? "profile-tab-selected" : ""}> @@ -88,6 +100,25 @@ class Profile extends Component { } componentWillReceiveProps() { + if (this.state.getUsernameTransactionState === null){ + if (this.drizzle.contracts[contract]){ //Waits until drizzle is initialized + this.usernameKey = this.drizzle.contracts[contract] + .methods[contractMethods.getUsername].cacheCall(this.state.userAddress); + this.setState({'getUsernameTransactionState': "IN_PROGRESS"}); + } + } + if (this.state.getUsernameTransactionState === "IN_PROGRESS") { + let currentDrizzleState = this.drizzle.store.getState(); + let dataFetched = (currentDrizzleState + .contracts[contract][contractMethods.getUsername])[this.usernameKey]; + if (dataFetched){ + this.setState({ + 'username': dataFetched.value, + 'getUsernameTransactionState': "SUCCESS" + }); + } + } + if (this.state.getDateOfRegisterTransactionState === null){ if (this.drizzle.contracts[contract]){ //Waits until drizzle is initialized this.dateOfRegisterKey = this.drizzle.contracts[contract] diff --git a/src/containers/StartTopicContainer.js b/src/containers/StartTopicContainer.js index 2601b1b..3f1edf5 100644 --- a/src/containers/StartTopicContainer.js +++ b/src/containers/StartTopicContainer.js @@ -235,6 +235,8 @@ class StartTopic extends Component { 'savingToOrbitDB': null, 'transactionOutputTimerActive': false }); + this.props.router.push("/topic/" + this.topicIDFetched + "/" + + this.state.topicSubjectInput); }, 5000); } else if (this.state.savingToOrbitDB === "ERROR"){ diff --git a/src/containers/TopicContainer.js b/src/containers/TopicContainer.js index 9bd1a46..bdb2e2c 100644 --- a/src/containers/TopicContainer.js +++ b/src/containers/TopicContainer.js @@ -14,6 +14,10 @@ class Topic extends Component { constructor(props, context) { super(props); + if (!/^[0-9]+$/.test(this.props.params.topicId)){ + this.props.router.push("/404"); + } + this.fetchTopicSubject = this.fetchTopicSubject.bind(this); this.handleClick = this.handleClick.bind(this); this.postCreated = this.postCreated.bind(this); @@ -21,21 +25,25 @@ class Topic extends Component { this.drizzle = context.drizzle; this.state = { + topicID: this.props.params.topicId, + topicSubject: this.props.params.topicSubject ? this.props.params.topicSubject : null, + postFocus: this.props.params.postId && /^[0-9]+$/.test(this.props.params.postId) + ? this.props.params.postId + : null, getPostsTransactionState: null, - posting: false, - topicSubject: null + posting: false }; } - async fetchTopicSubject(orbitDBAddress, topicID) { - /*const fullAddress = this.topicsData[topicID][1]; + async fetchTopicSubject(orbitDBAddress) { + /*const fullAddress = this.topicsData[this.state.topicID][1]; const store = await this.props.orbitDB.orbitdb.keyvalue(JSON.stringify(fullAddress)); await store.load(); - var som = store.get(JSON.stringify(topicID)); - this.topicsSubjects[topicID] = som['subject']; - this.topicsSubjectsFetchStatus[topicID] = "fetched";*/ + var som = store.get(JSON.stringify(this.state.topicID)); + this.topicsSubjects[this.state.topicID] = som['subject']; + this.topicsSubjectsFetchStatus[this.state.topicID] = "fetched";*/ - var som =this.props.orbitDB.topicsDB.get(JSON.stringify(topicID)); + var som =this.props.orbitDB.topicsDB.get(JSON.stringify(this.state.topicID)); this.setState({'topicSubject': som['subject']}); } @@ -65,7 +73,7 @@ class Topic extends Component { topicContents = ( (

{this.state.posting && - {this.handleClick()}} onPostCreated={() => {this.postCreated()}} @@ -90,7 +98,8 @@ class Topic extends Component { if (this.state.getPostsTransactionState === null){ if (this.drizzle.contracts[contract]){ //Waits until drizzle is initialized //This gets called only once but should be called every time someone posts - this.getPostsDataKey = this.drizzle.contracts[contract].methods[contractMethod].cacheCall(1); + this.getPostsDataKey = this.drizzle.contracts[contract].methods[contractMethod] + .cacheCall(this.state.topicID); this.setState({'getPostsTransactionState': "IN_PROGRESS"}); } } @@ -98,9 +107,13 @@ class Topic extends Component { let currentDrizzleState = this.drizzle.store.getState(); let dataFetched = (currentDrizzleState.contracts[contract][contractMethod])[this.getPostsDataKey]; if (dataFetched){ - this.posts = dataFetched.value[4]; - this.setState({'getPostsTransactionState': "SUCCESS"}); - this.fetchTopicSubject(dataFetched.value[0], 1); + if (dataFetched.value){ + this.posts = dataFetched.value[4]; + this.setState({'getPostsTransactionState': "SUCCESS"}); + this.fetchTopicSubject(dataFetched.value[0]); + } else if (dataFetched.error){ + //TODO + } } } } diff --git a/src/index.js b/src/index.js index b5c5263..59864e9 100644 --- a/src/index.js +++ b/src/index.js @@ -31,9 +31,12 @@ render(( - - - + + + @@ -42,4 +45,11 @@ render(( ), document.getElementById('root') -); \ No newline at end of file +); + +/* + + */ \ No newline at end of file