Browse Source

Improve TopicList/PostList rendering

develop
Ezerous 6 years ago
parent
commit
b703f30561
  1. 10
      app/src/containers/Post.js
  2. 29
      app/src/containers/PostList.js
  3. 5
      app/src/containers/Topic.js
  4. 28
      app/src/containers/TopicList.js
  5. 5
      app/src/redux/actions/orbitActions.js
  6. 8
      app/src/redux/reducers/orbitReducer.js
  7. 11
      app/src/redux/sagas/orbitSaga.js
  8. 4
      app/src/utils/orbitUtils.js

10
app/src/containers/Post.js

@ -24,7 +24,7 @@ class Post extends Component {
componentDidMount() { componentDidMount() {
const { addPeerDB, userAddress, postData } = this.props; const { addPeerDB, userAddress, postData } = this.props;
if(postData.userAddress !== userAddress ) if(postData.userAddress !== userAddress )
addPeerDB(postData.fullOrbitAddress); addPeerDB(postData.userAddress, 'posts');
} }
render() { render() {
@ -180,7 +180,8 @@ function getPostSubject(state, props){
return orbitData.subject; return orbitData.subject;
} }
else{ 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){ if(db && db.store){
const localOrbitData = db.store.get(postID); const localOrbitData = db.store.get(postID);
if (localOrbitData) if (localOrbitData)
@ -199,7 +200,8 @@ function getPostContent(state, props){
return orbitData.content; return orbitData.content;
} }
else{ 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){ if(db && db.store){
const localOrbitData = db.store.get(postID); const localOrbitData = db.store.get(postID);
if (localOrbitData) if (localOrbitData)
@ -211,7 +213,7 @@ function getPostContent(state, props){
const mapDispatchToProps = dispatch => bindActionCreators({ const mapDispatchToProps = dispatch => bindActionCreators({
navigateTo: location => push(location), navigateTo: location => push(location),
addPeerDB: fullOrbitAddress => addPeerDatabase(fullOrbitAddress) addPeerDB: (userAddress, name) => addPeerDatabase(userAddress, name)
}, dispatch); }, dispatch);
function mapStateToProps(state, ownProps) { function mapStateToProps(state, ownProps) {

29
app/src/containers/PostList.js

@ -5,7 +5,6 @@ import { drizzle } from '../index';
import Post from './Post'; import Post from './Post';
import PlaceholderContainer from './PlaceholderContainer'; import PlaceholderContainer from './PlaceholderContainer';
import { determineDBAddress } from '../utils/orbitUtils';
const contract = 'Forum'; const contract = 'Forum';
const getPostMethod = 'getPost'; const getPostMethod = 'getPost';
@ -17,8 +16,7 @@ class PostList extends Component {
this.getBlockchainData = this.getBlockchainData.bind(this); this.getBlockchainData = this.getBlockchainData.bind(this);
this.state = { this.state = {
dataKeys: [], dataKeys: []
dbAddresses: []
}; };
} }
@ -31,8 +29,8 @@ class PostList extends Component {
} }
getBlockchainData() { getBlockchainData() {
const { dataKeys, dbAddresses } = this.state; const { dataKeys } = this.state;
const { drizzleStatus, postIDs, contracts } = this.props; const { drizzleStatus, postIDs } = this.props;
if (drizzleStatus.initialized) { if (drizzleStatus.initialized) {
const dataKeysShallowCopy = dataKeys.slice(); const dataKeysShallowCopy = dataKeys.slice();
@ -45,17 +43,6 @@ class PostList extends Component {
); );
fetchingNewData = true; 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) { if (fetchingNewData) {
@ -67,7 +54,7 @@ class PostList extends Component {
} }
render() { render() {
const { dataKeys, dbAddresses } = this.state; const { dataKeys } = this.state;
const { postIDs, contracts, focusOnPost, recentToTheTop } = this.props; const { postIDs, contracts, focusOnPost, recentToTheTop } = this.props;
const posts = postIDs.map((postID, index) => { const posts = postIDs.map((postID, index) => {
@ -75,13 +62,9 @@ class PostList extends Component {
if(dataKeys[postID]) if(dataKeys[postID])
fetchedPostData = contracts[contract][getPostMethod][dataKeys[postID]]; fetchedPostData = contracts[contract][getPostMethod][dataKeys[postID]];
const dbAddress = dbAddresses[postID]; if(fetchedPostData) {
if(fetchedPostData && dbAddress) {
const userAddress = fetchedPostData.value[0]; //Also works as an Orbit Identity ID
const postData = { const postData = {
userAddress, userAddress: fetchedPostData.value[0], //Also works as an Orbit Identity ID
fullOrbitAddress: `/orbitdb/${dbAddress}/posts`,
userName: fetchedPostData.value[1], userName: fetchedPostData.value[1],
timestamp: fetchedPostData.value[2]*1000, timestamp: fetchedPostData.value[2]*1000,
topicID: fetchedPostData.value[3] topicID: fetchedPostData.value[3]

5
app/src/containers/Topic.js

@ -14,7 +14,7 @@ class Topic extends Component {
componentDidMount() { componentDidMount() {
const { dispatch, userAddress, topicData } = this.props; const { dispatch, userAddress, topicData } = this.props;
if(topicData.userAddress !== userAddress ) if(topicData.userAddress !== userAddress )
dispatch(addPeerDatabase(topicData.fullOrbitAddress)); dispatch(addPeerDatabase(topicData.userAddress, 'topics'));
} }
render() { render() {
@ -84,7 +84,8 @@ function getTopicSubject(state, props){
return orbitData.subject; return orbitData.subject;
} }
else{ 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){ if(db && db.store){
const localOrbitData = db.store.get(topicID); const localOrbitData = db.store.get(topicID);
if (localOrbitData) if (localOrbitData)

28
app/src/containers/TopicList.js

@ -5,7 +5,6 @@ import { drizzle } from '../index';
import Topic from './Topic'; import Topic from './Topic';
import PlaceholderContainer from './PlaceholderContainer'; import PlaceholderContainer from './PlaceholderContainer';
import { determineDBAddress } from '../utils/orbitUtils';
const contract = 'Forum'; const contract = 'Forum';
const getTopicMethod = 'getTopic'; const getTopicMethod = 'getTopic';
@ -17,8 +16,7 @@ class TopicList extends Component {
this.getBlockchainData = this.getBlockchainData.bind(this); this.getBlockchainData = this.getBlockchainData.bind(this);
this.state = { this.state = {
dataKeys: [], dataKeys: []
dbAddresses: []
}; };
} }
@ -31,8 +29,8 @@ class TopicList extends Component {
} }
getBlockchainData() { getBlockchainData() {
const { dataKeys, dbAddresses } = this.state; const { dataKeys } = this.state;
const { drizzleStatus, topicIDs, contracts } = this.props; const { drizzleStatus, topicIDs } = this.props;
if (drizzleStatus.initialized) { if (drizzleStatus.initialized) {
const dataKeysShallowCopy = dataKeys.slice(); const dataKeysShallowCopy = dataKeys.slice();
@ -44,17 +42,6 @@ class TopicList extends Component {
.cacheCall(topicID); .cacheCall(topicID);
fetchingNewData = true; 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) { if (fetchingNewData) {
@ -66,7 +53,7 @@ class TopicList extends Component {
} }
render() { render() {
const { dataKeys, dbAddresses } = this.state; const { dataKeys } = this.state;
const { topicIDs, contracts } = this.props; const { topicIDs, contracts } = this.props;
const topics = topicIDs.map(topicID => { const topics = topicIDs.map(topicID => {
@ -74,12 +61,9 @@ class TopicList extends Component {
if(dataKeys[topicID]) if(dataKeys[topicID])
fetchedTopicData = contracts[contract][getTopicMethod][dataKeys[topicID]]; fetchedTopicData = contracts[contract][getTopicMethod][dataKeys[topicID]];
const dbAddress = dbAddresses[topicID]; if(fetchedTopicData) {
if(fetchedTopicData && dbAddress) {
const userAddress = fetchedTopicData.value[0]; //Also works as an Orbit Identity ID
const topicData = { const topicData = {
userAddress, userAddress: fetchedTopicData.value[0], //Also works as an Orbit Identity ID
fullOrbitAddress: `/orbitdb/${dbAddress}/topics`,
userName: fetchedTopicData.value[1], userName: fetchedTopicData.value[1],
timestamp: fetchedTopicData.value[2]*1000, timestamp: fetchedTopicData.value[2]*1000,
numberOfReplies: fetchedTopicData.value[3].length numberOfReplies: fetchedTopicData.value[3].length

5
app/src/redux/actions/orbitActions.js

@ -17,10 +17,11 @@ function updateDatabases(type, orbitdb, topicsDB, postsDB) {
}; };
} }
function addPeerDatabase(fullAddress) { function addPeerDatabase(userAddress, dbName) {
return { return {
type: ADD_PEER_DATABASE, type: ADD_PEER_DATABASE,
fullAddress userAddress, //User's Ethereum address - it's also his Orbit Identity Id
dbName //e.g. topics or posts
}; };
} }

8
app/src/redux/reducers/orbitReducer.js

@ -52,7 +52,13 @@ const orbitReducer = (state = initialState, action) => {
return { return {
...state, ...state,
peerDatabases:[...state.peerDatabases, 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: case UPDATE_PEERS:
return { return {

11
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 isEqual from 'lodash.isequal';
import { forumContract, getCurrentAccount } from './web3UtilsSaga'; import { forumContract, getCurrentAccount } from './web3UtilsSaga';
import { import {
createDatabases, createDatabases, determineDBAddress,
loadDatabases, loadDatabases,
orbitSagaOpen orbitSagaOpen
} from '../../utils/orbitUtils'; } from '../../utils/orbitUtils';
@ -52,16 +52,19 @@ function* getOrbitDBInfo() {
let peerOrbitAddresses = new Set(); let peerOrbitAddresses = new Set();
function* addPeerDatabase(action) { function* addPeerDatabase(action) {
const fullAddress = action.fullAddress; const userAddress = action.userAddress;
const dbName = action.dbName;
const size = peerOrbitAddresses.size; const size = peerOrbitAddresses.size;
peerOrbitAddresses.add(fullAddress); peerOrbitAddresses.add(userAddress + '/' + dbName);
if(peerOrbitAddresses.size>size){ if(peerOrbitAddresses.size>size){
const { orbitdb } = yield select(state => state.orbit); const { orbitdb } = yield select(state => state.orbit);
if(orbitdb){ if(orbitdb){
const dbAddress = yield call(determineDBAddress,dbName, userAddress);
const fullAddress = `/orbitdb/${dbAddress}/${dbName}`;
const store = yield call(orbitSagaOpen, orbitdb, fullAddress); const store = yield call(orbitSagaOpen, orbitdb, fullAddress);
yield put({ yield put({
type: PEER_DATABASE_ADDED, fullAddress, store: store type: PEER_DATABASE_ADDED, fullAddress, userAddress, store
}); });
} }
} }

4
app/src/utils/orbitUtils.js

@ -54,8 +54,8 @@ async function loadDatabases() {
store.dispatch(updateDatabases(DATABASES_LOADED, orbitdb, topicsDB, postsDB)); store.dispatch(updateDatabases(DATABASES_LOADED, orbitdb, topicsDB, postsDB));
} }
async function determineDBAddress(name, identityId){ async function determineDBAddress(dbName, identityId){
return (await getOrbitDB().determineAddress(name, 'keyvalue', { return (await getOrbitDB().determineAddress(dbName, 'keyvalue', {
accessController: { accessController: {
write: [identityId]} write: [identityId]}
} }

Loading…
Cancel
Save