diff --git a/app/src/assets/images/orbitdb_logo.png b/app/src/assets/images/orbitdb_logo.png new file mode 100644 index 0000000..1f41667 Binary files /dev/null and b/app/src/assets/images/orbitdb_logo.png differ diff --git a/app/src/components/Topic.js b/app/src/components/Topic.js index 9c57686..298f19d 100644 --- a/app/src/components/Topic.js +++ b/app/src/components/Topic.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { GetTopicResult } from '../CustomPropTypes' import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; @@ -11,21 +10,10 @@ import TimeAgo from 'react-timeago'; import { addPeerDatabase } from '../redux/actions/orbitActions'; class Topic extends Component { - constructor(props) { - super(props); - this.state = { - askedForReplication: false, - fetchedSubject: false - }; - } - - componentDidUpdate() { - const { dispatch, topicData, topicSubject, orbitDB } = this.props; - const { askedForReplication } = this.state; - if(!askedForReplication && orbitDB.ipfsInitialized && orbitDB.orbitdb && dispatch && !topicSubject && topicData) { - dispatch(addPeerDatabase(`/orbitdb/${topicData.value[0]}/topics`)); - this.setState({ askedForReplication: true }); - } + componentDidMount() { + const { dispatch, userAddress, topicData } = this.props; + if(topicData.userAddress !== userAddress ) + dispatch(addPeerDatabase(topicData.fullOrbitAddress)); } render() { @@ -62,30 +50,14 @@ class Topic extends Component {
-

- {topicData !== null - ? topicData.value[2] - : 'Username' - } +

+ {topicData.userName}

-

- {`Number of replies: ${topicData !== null - ? topicData.value[4].length - : ''}` - } +

+ Number of Replies: {topicData.nReplies}

- {topicData !== null - && ( - - ) - } +

@@ -97,43 +69,37 @@ class Topic extends Component { Topic.propTypes = { user: PropTypes.object.isRequired, history: PropTypes.object.isRequired, - topicData: GetTopicResult.isRequired, + //TODO: topicData: GetTopicResult.isRequired, orbitDB: PropTypes.object.isRequired, topicID: PropTypes.number.isRequired }; function getTopicSubject(state, props){ - const { user, orbit } = state; - if (orbit.ipfsInitialized && orbit.orbitdb) { - const { topicData, topicID } = props; - if (topicData){ - if(user && topicData.value[1] === user.address) { - const orbitData = orbit.topicsDB.get(topicID); - if(orbitData && orbitData.subject) - return orbitData.subject; - } - else{ - const db = orbit.peerDatabases.find(db => db.fullAddress === `/orbitdb/${topicData.value[0]}/topics`); - if(db && db.store){ - const localOrbitData = db.store.get(topicID); - if (localOrbitData) - return localOrbitData.subject; - } - } + const { user: {address: userAddress}, orbit } = state; + const { topicData, topicID } = props; + if(userAddress === topicData.userAddress) { + const orbitData = orbit.topicsDB.get(topicID); + if(orbitData && orbitData.subject) + return orbitData.subject; + } + else{ + const db = orbit.peerDatabases.find(db => db.fullAddress === topicData.fullOrbitAddress); + if(db && db.store){ + const localOrbitData = db.store.get(topicID); + if (localOrbitData) + return localOrbitData.subject; } } + return null; } - - function mapStateToProps(state, ownProps) { return { - user: state.user, + userAddress: state.user.address, orbitDB: state.orbit, topicSubject: getTopicSubject(state, ownProps) } } - export default withRouter(connect(mapStateToProps)(Topic)); diff --git a/app/src/components/TopicList.js b/app/src/components/TopicList.js index dd00318..de6165b 100644 --- a/app/src/components/TopicList.js +++ b/app/src/components/TopicList.js @@ -55,16 +55,32 @@ class TopicList extends Component { const { dataKeys } = this.state; const { topicIDs, contracts } = this.props; - const topics = topicIDs.map(topicID => ( - - )); + const topics = topicIDs.map(topicID => { + let fetchedTopicData; + if(dataKeys[topicID]) + fetchedTopicData = contracts[contract][getTopicMethod][dataKeys[topicID]]; + + if(fetchedTopicData) { + const topicData = { + userAddress: fetchedTopicData.value[0], + fullOrbitAddress: `/orbitdb/${fetchedTopicData.value[0]}/topics`, + userName: fetchedTopicData.value[2], + timestamp: fetchedTopicData.value[3]*1000, + nReplies: fetchedTopicData.value[4].length + }; + return( + + ) + } + + return( +
TODO: Add a loading thingy
+ ) + }); return (
diff --git a/app/src/containers/LoadingContainer.js b/app/src/containers/LoadingContainer.js index 5983628..837f008 100644 --- a/app/src/containers/LoadingContainer.js +++ b/app/src/containers/LoadingContainer.js @@ -2,8 +2,8 @@ import React, { Children, Component } from 'react'; import { connect } from 'react-redux'; import ethereum_logo from '../assets/images/ethereum_logo.svg'; import ipfs_logo from '../assets/images/ipfs_logo.svg'; +import orbitdb_logo from '../assets/images/orbitdb_logo.png'; -//TODO: Add OrbitDB Loading thingy class LoadingContainer extends Component { render() { if (this.props.web3.status === 'failed' || !this.props.web3.networkId) { @@ -74,6 +74,19 @@ class LoadingContainer extends Component { ) } + if (!this.props.orbitReady) { + return( +
+
+
+ orbitdb_logo +

Initializing OrbitDB...

+
+
+
+ ) + } + //TODO: wtf is this if (this.props.drizzleStatus.initialized) return Children.only(this.props.children); @@ -101,6 +114,7 @@ const mapStateToProps = state => { drizzleStatus: state.drizzleStatus, web3: state.web3, ipfsInitialized: state.orbit.ipfsInitialized, + orbitReady: state.orbit.ready, contractInitialized: state.contracts.Forum.initialized } }; diff --git a/app/src/redux/actions/orbitActions.js b/app/src/redux/actions/orbitActions.js index 45b3907..283a505 100644 --- a/app/src/redux/actions/orbitActions.js +++ b/app/src/redux/actions/orbitActions.js @@ -5,7 +5,7 @@ const DATABASES_NOT_READY = 'DATABASES_NOT_READY'; const ADD_PEER_DATABASE = 'ADD_PEER_DATABASE'; const PEER_DATABASE_ADDED = 'PEER_DATABASE_ADDED'; const UPDATE_PEERS = 'UPDATE_PEERS'; -const ORRBIT_GETTING_INFO = 'ORRBIT_GETTING_INFO'; +const ORBIT_INIT = 'ORBIT_INIT'; const ORBIT_SAGA_ERROR = 'ORBIT_SAGA_ERROR'; function updateDatabases(type, orbitdb, topicsDB, postsDB) { @@ -32,7 +32,7 @@ export { DATABASES_CREATED, UPDATE_PEERS, ADD_PEER_DATABASE, PEER_DATABASE_ADDED, - ORRBIT_GETTING_INFO, + ORBIT_INIT, ORBIT_SAGA_ERROR, addPeerDatabase, updateDatabases diff --git a/app/src/redux/reducers/orbitReducer.js b/app/src/redux/reducers/orbitReducer.js index fc82d3f..737bb89 100644 --- a/app/src/redux/reducers/orbitReducer.js +++ b/app/src/redux/reducers/orbitReducer.js @@ -2,7 +2,7 @@ import { DATABASES_CREATED, DATABASES_LOADED, DATABASES_NOT_READY, - IPFS_INITIALIZED, UPDATE_PEERS, PEER_DATABASE_ADDED + IPFS_INITIALIZED, UPDATE_PEERS, PEER_DATABASE_ADDED, ORBIT_INIT } from '../actions/orbitActions'; const initialState = { @@ -26,14 +26,6 @@ const orbitReducer = (state = initialState, action) => { ipfsInitialized: true }; case DATABASES_CREATED: - return { - ...state, - ready: true, - orbitdb: action.orbitdb, - topicsDB: action.topicsDB, - postsDB: action.postsDB, - id: action.id - }; case DATABASES_LOADED: return { ...state, @@ -43,7 +35,7 @@ const orbitReducer = (state = initialState, action) => { postsDB: action.postsDB, id: action.id }; - case DATABASES_NOT_READY: + case ORBIT_INIT: return { ...state, ready: false, diff --git a/app/src/redux/sagas/orbitSaga.js b/app/src/redux/sagas/orbitSaga.js index 0e52ca9..18005cd 100644 --- a/app/src/redux/sagas/orbitSaga.js +++ b/app/src/redux/sagas/orbitSaga.js @@ -1,13 +1,17 @@ import { all, call, put, select, take, takeEvery, takeLatest } from 'redux-saga/effects'; import isEqual from 'lodash.isequal'; import { forumContract, getCurrentAccount } from './drizzleUtilsSaga'; -import { loadDatabases, orbitSagaOpen } from '../../utils/orbitUtils'; +import { + createTempDatabases, + loadDatabases, + orbitSagaOpen +} from '../../utils/orbitUtils'; import { DRIZZLE_UTILS_SAGA_INITIALIZED } from '../actions/drizzleUtilsActions'; import { ADD_PEER_DATABASE, PEER_DATABASE_ADDED, - DATABASES_NOT_READY, + DATABASES_CREATED, IPFS_INITIALIZED, - UPDATE_PEERS, ORRBIT_GETTING_INFO, ORBIT_SAGA_ERROR + UPDATE_PEERS, ORBIT_INIT, ORBIT_SAGA_ERROR, updateDatabases } from '../actions/orbitActions'; import { ACCOUNT_CHANGED } from '../actions/userActions'; import { ACCOUNTS_FETCHED } from '../actions/drizzleActions'; @@ -16,7 +20,7 @@ let latestAccount; function* getOrbitDBInfo() { yield put({ - type: ORRBIT_GETTING_INFO, ...[] + type: ORBIT_INIT, ...[] }); const account = yield call(getCurrentAccount); if (account !== latestAccount) { @@ -42,11 +46,13 @@ function* getOrbitDBInfo() { orbitDBInfo[0], orbitDBInfo[1], orbitDBInfo[2], orbitDBInfo[3], orbitDBInfo[4]); } else { - yield put({ - type: DATABASES_NOT_READY, ...[] - }); + const orbit = yield select(state => state.orbit); + if(!orbit.ready){ + const { orbitdb, topicsDB, postsDB } = yield call(createTempDatabases); + yield put(updateDatabases(DATABASES_CREATED, orbitdb, topicsDB, postsDB )); + console.debug("Created temporary databases."); + } } - latestAccount = account; } catch (error) { console.error(error); diff --git a/app/src/utils/orbitUtils.js b/app/src/utils/orbitUtils.js index 390cbf7..6a1e138 100644 --- a/app/src/utils/orbitUtils.js +++ b/app/src/utils/orbitUtils.js @@ -21,6 +21,15 @@ function initIPFS() { }); } +async function createTempDatabases() { + console.debug('Creating temporary databases...'); + const ipfs = getIPFS(); + const orbitdb = new OrbitDB(ipfs); + const topicsDB = await orbitdb.keyvalue('topics'); + const postsDB = await orbitdb.keyvalue('posts'); + return { orbitdb, topicsDB, postsDB }; +} + async function createDatabases() { console.debug('Creating databases...'); const ipfs = getIPFS(); @@ -108,4 +117,4 @@ async function orbitSagaOpen(orbitdb, address) { return store; } -export { initIPFS, createDatabases, loadDatabases, orbitSagaPut, orbitSagaOpen }; +export { initIPFS, createTempDatabases, createDatabases, loadDatabases, orbitSagaPut, orbitSagaOpen };