From b703f305615f59b0b927ce1685762c8cd35f9804 Mon Sep 17 00:00:00 2001 From: Ezerous Date: Sat, 18 May 2019 13:45:43 +0300 Subject: [PATCH] Improve TopicList/PostList rendering --- app/src/containers/Post.js | 10 +++++---- app/src/containers/PostList.js | 29 ++++++-------------------- app/src/containers/Topic.js | 5 +++-- app/src/containers/TopicList.js | 28 ++++++------------------- app/src/redux/actions/orbitActions.js | 5 +++-- app/src/redux/reducers/orbitReducer.js | 8 ++++++- app/src/redux/sagas/orbitSaga.js | 11 ++++++---- app/src/utils/orbitUtils.js | 4 ++-- 8 files changed, 40 insertions(+), 60 deletions(-) diff --git a/app/src/containers/Post.js b/app/src/containers/Post.js index 6228f7f..9e899be 100644 --- a/app/src/containers/Post.js +++ b/app/src/containers/Post.js @@ -24,7 +24,7 @@ class Post extends Component { componentDidMount() { const { addPeerDB, userAddress, postData } = this.props; if(postData.userAddress !== userAddress ) - addPeerDB(postData.fullOrbitAddress); + addPeerDB(postData.userAddress, 'posts'); } render() { @@ -180,7 +180,8 @@ function getPostSubject(state, props){ return orbitData.subject; } else{ - const db = orbit.peerDatabases.find(db => db.fullAddress === postData.fullOrbitAddress); + const db = orbit.peerDatabases.find(db => + (db.userAddress === postData.userAddress) && (db.name === 'posts')); if(db && db.store){ const localOrbitData = db.store.get(postID); if (localOrbitData) @@ -199,7 +200,8 @@ function getPostContent(state, props){ return orbitData.content; } else{ - const db = orbit.peerDatabases.find(db => db.fullAddress === postData.fullOrbitAddress); + const db = orbit.peerDatabases.find(db => + (db.userAddress === postData.userAddress) && (db.name === 'posts')); if(db && db.store){ const localOrbitData = db.store.get(postID); if (localOrbitData) @@ -211,7 +213,7 @@ function getPostContent(state, props){ const mapDispatchToProps = dispatch => bindActionCreators({ navigateTo: location => push(location), - addPeerDB: fullOrbitAddress => addPeerDatabase(fullOrbitAddress) + addPeerDB: (userAddress, name) => addPeerDatabase(userAddress, name) }, dispatch); function mapStateToProps(state, ownProps) { diff --git a/app/src/containers/PostList.js b/app/src/containers/PostList.js index c2de481..9de6f5a 100644 --- a/app/src/containers/PostList.js +++ b/app/src/containers/PostList.js @@ -5,7 +5,6 @@ import { drizzle } from '../index'; import Post from './Post'; import PlaceholderContainer from './PlaceholderContainer'; -import { determineDBAddress } from '../utils/orbitUtils'; const contract = 'Forum'; const getPostMethod = 'getPost'; @@ -17,8 +16,7 @@ class PostList extends Component { this.getBlockchainData = this.getBlockchainData.bind(this); this.state = { - dataKeys: [], - dbAddresses: [] + dataKeys: [] }; } @@ -31,8 +29,8 @@ class PostList extends Component { } getBlockchainData() { - const { dataKeys, dbAddresses } = this.state; - const { drizzleStatus, postIDs, contracts } = this.props; + const { dataKeys } = this.state; + const { drizzleStatus, postIDs } = this.props; if (drizzleStatus.initialized) { const dataKeysShallowCopy = dataKeys.slice(); @@ -45,17 +43,6 @@ class PostList extends Component { ); fetchingNewData = true; } - else if (!dbAddresses[postID]){ - const fetchedPostData = contracts[contract][getPostMethod][dataKeys[postID]]; - if(fetchedPostData) { - const dbAddress = await determineDBAddress('posts', fetchedPostData.value[0]); - const dbAddressesShallowCopy = dbAddresses.slice(); - dbAddressesShallowCopy[postID] = dbAddress; - this.setState({ - dbAddresses: dbAddressesShallowCopy - }); - } - } }); if (fetchingNewData) { @@ -67,7 +54,7 @@ class PostList extends Component { } render() { - const { dataKeys, dbAddresses } = this.state; + const { dataKeys } = this.state; const { postIDs, contracts, focusOnPost, recentToTheTop } = this.props; const posts = postIDs.map((postID, index) => { @@ -75,13 +62,9 @@ class PostList extends Component { if(dataKeys[postID]) fetchedPostData = contracts[contract][getPostMethod][dataKeys[postID]]; - const dbAddress = dbAddresses[postID]; - if(fetchedPostData && dbAddress) { - const userAddress = fetchedPostData.value[0]; //Also works as an Orbit Identity ID - + if(fetchedPostData) { const postData = { - userAddress, - fullOrbitAddress: `/orbitdb/${dbAddress}/posts`, + userAddress: fetchedPostData.value[0], //Also works as an Orbit Identity ID userName: fetchedPostData.value[1], timestamp: fetchedPostData.value[2]*1000, topicID: fetchedPostData.value[3] diff --git a/app/src/containers/Topic.js b/app/src/containers/Topic.js index 0cee538..0eeee6f 100644 --- a/app/src/containers/Topic.js +++ b/app/src/containers/Topic.js @@ -14,7 +14,7 @@ class Topic extends Component { componentDidMount() { const { dispatch, userAddress, topicData } = this.props; if(topicData.userAddress !== userAddress ) - dispatch(addPeerDatabase(topicData.fullOrbitAddress)); + dispatch(addPeerDatabase(topicData.userAddress, 'topics')); } render() { @@ -84,7 +84,8 @@ function getTopicSubject(state, props){ return orbitData.subject; } else{ - const db = orbit.peerDatabases.find(db => db.fullAddress === topicData.fullOrbitAddress); + const db = orbit.peerDatabases.find(db => + (db.userAddress === topicData.userAddress) && (db.name === 'topics')); if(db && db.store){ const localOrbitData = db.store.get(topicID); if (localOrbitData) diff --git a/app/src/containers/TopicList.js b/app/src/containers/TopicList.js index 0db0cd8..82bacc6 100644 --- a/app/src/containers/TopicList.js +++ b/app/src/containers/TopicList.js @@ -5,7 +5,6 @@ import { drizzle } from '../index'; import Topic from './Topic'; import PlaceholderContainer from './PlaceholderContainer'; -import { determineDBAddress } from '../utils/orbitUtils'; const contract = 'Forum'; const getTopicMethod = 'getTopic'; @@ -17,8 +16,7 @@ class TopicList extends Component { this.getBlockchainData = this.getBlockchainData.bind(this); this.state = { - dataKeys: [], - dbAddresses: [] + dataKeys: [] }; } @@ -31,8 +29,8 @@ class TopicList extends Component { } getBlockchainData() { - const { dataKeys, dbAddresses } = this.state; - const { drizzleStatus, topicIDs, contracts } = this.props; + const { dataKeys } = this.state; + const { drizzleStatus, topicIDs } = this.props; if (drizzleStatus.initialized) { const dataKeysShallowCopy = dataKeys.slice(); @@ -44,17 +42,6 @@ class TopicList extends Component { .cacheCall(topicID); fetchingNewData = true; } - else if (!dbAddresses[topicID]){ - const fetchedTopicData = contracts[contract][getTopicMethod][dataKeys[topicID]]; - if(fetchedTopicData) { - const dbAddress = await determineDBAddress('topics', fetchedTopicData.value[0]); - const dbAddressesShallowCopy = dbAddresses.slice(); - dbAddressesShallowCopy[topicID] = dbAddress; - this.setState({ - dbAddresses: dbAddressesShallowCopy - }); - } - } }); if (fetchingNewData) { @@ -66,7 +53,7 @@ class TopicList extends Component { } render() { - const { dataKeys, dbAddresses } = this.state; + const { dataKeys } = this.state; const { topicIDs, contracts } = this.props; const topics = topicIDs.map(topicID => { @@ -74,12 +61,9 @@ class TopicList extends Component { if(dataKeys[topicID]) fetchedTopicData = contracts[contract][getTopicMethod][dataKeys[topicID]]; - const dbAddress = dbAddresses[topicID]; - if(fetchedTopicData && dbAddress) { - const userAddress = fetchedTopicData.value[0]; //Also works as an Orbit Identity ID + if(fetchedTopicData) { const topicData = { - userAddress, - fullOrbitAddress: `/orbitdb/${dbAddress}/topics`, + userAddress: fetchedTopicData.value[0], //Also works as an Orbit Identity ID userName: fetchedTopicData.value[1], timestamp: fetchedTopicData.value[2]*1000, numberOfReplies: fetchedTopicData.value[3].length diff --git a/app/src/redux/actions/orbitActions.js b/app/src/redux/actions/orbitActions.js index 5902aca..a61dd91 100644 --- a/app/src/redux/actions/orbitActions.js +++ b/app/src/redux/actions/orbitActions.js @@ -17,10 +17,11 @@ function updateDatabases(type, orbitdb, topicsDB, postsDB) { }; } -function addPeerDatabase(fullAddress) { +function addPeerDatabase(userAddress, dbName) { return { type: ADD_PEER_DATABASE, - fullAddress + userAddress, //User's Ethereum address - it's also his Orbit Identity Id + dbName //e.g. topics or posts }; } diff --git a/app/src/redux/reducers/orbitReducer.js b/app/src/redux/reducers/orbitReducer.js index 86df503..1d49dcb 100644 --- a/app/src/redux/reducers/orbitReducer.js +++ b/app/src/redux/reducers/orbitReducer.js @@ -52,7 +52,13 @@ const orbitReducer = (state = initialState, action) => { return { ...state, peerDatabases:[...state.peerDatabases, - {fullAddress: action.fullAddress, store: action.store}] + { + fullAddress: action.fullAddress, + userAddress: action.userAddress, + name: action.fullAddress.split('/')[3], + store: action.store + } + ] }; case UPDATE_PEERS: return { diff --git a/app/src/redux/sagas/orbitSaga.js b/app/src/redux/sagas/orbitSaga.js index 77803f3..b6ec73b 100644 --- a/app/src/redux/sagas/orbitSaga.js +++ b/app/src/redux/sagas/orbitSaga.js @@ -2,7 +2,7 @@ import { all, call, put, select, take, takeEvery, takeLatest } from 'redux-saga/ import isEqual from 'lodash.isequal'; import { forumContract, getCurrentAccount } from './web3UtilsSaga'; import { - createDatabases, + createDatabases, determineDBAddress, loadDatabases, orbitSagaOpen } from '../../utils/orbitUtils'; @@ -52,16 +52,19 @@ function* getOrbitDBInfo() { let peerOrbitAddresses = new Set(); function* addPeerDatabase(action) { - const fullAddress = action.fullAddress; + const userAddress = action.userAddress; + const dbName = action.dbName; const size = peerOrbitAddresses.size; - peerOrbitAddresses.add(fullAddress); + peerOrbitAddresses.add(userAddress + '/' + dbName); if(peerOrbitAddresses.size>size){ const { orbitdb } = yield select(state => state.orbit); if(orbitdb){ + const dbAddress = yield call(determineDBAddress,dbName, userAddress); + const fullAddress = `/orbitdb/${dbAddress}/${dbName}`; const store = yield call(orbitSagaOpen, orbitdb, fullAddress); yield put({ - type: PEER_DATABASE_ADDED, fullAddress, store: store + type: PEER_DATABASE_ADDED, fullAddress, userAddress, store }); } } diff --git a/app/src/utils/orbitUtils.js b/app/src/utils/orbitUtils.js index 91a2ef7..b5105eb 100644 --- a/app/src/utils/orbitUtils.js +++ b/app/src/utils/orbitUtils.js @@ -54,8 +54,8 @@ async function loadDatabases() { store.dispatch(updateDatabases(DATABASES_LOADED, orbitdb, topicsDB, postsDB)); } -async function determineDBAddress(name, identityId){ - return (await getOrbitDB().determineAddress(name, 'keyvalue', { +async function determineDBAddress(dbName, identityId){ + return (await getOrbitDB().determineAddress(dbName, 'keyvalue', { accessController: { write: [identityId]} }