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() {
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) {

29
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]

5
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)

28
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

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 {
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 {
...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 {

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 { 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
});
}
}

4
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]}
}

Loading…
Cancel
Save