Major improvements (Orbit, Topic.js, LoadingContainer)

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 {
           </div>
           <hr />
           <div className="topic-meta">
-            <p className={`no-margin${
-              topicData !== null ? '' : ' grey-text'}`}
-            >
-              {topicData !== null
-                ? topicData.value[2]
-                : 'Username'
-                }
+            <p className="no-margin">
+              {topicData.userName}
             </p>
-            <p className={`no-margin${
-              topicData !== null ? '' : ' grey-text'}`}
-            >
-              {`Number of replies: ${topicData !== null
-                ? topicData.value[4].length
-                : ''}`
-                }
+            <p className="no-margin">
+              Number of Replies: {topicData.nReplies}
             </p>
             <p className="topic-date grey-text">
-              {topicData !== null
-                && (
-                <TimeAgo
-                  date={topicData.value[3]*1000}
-                />
-                )
-                }
+              <TimeAgo date={topicData.timestamp}/>
             </p>
           </div>
         </Card.Content>
@@ -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));

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 => (
-      <Topic
-        topicData={(dataKeys[topicID]
-              && contracts[contract][getTopicMethod][dataKeys[topicID]])
-          ? contracts[contract][getTopicMethod][dataKeys[topicID]]
-          : null}
-        topicID={topicID}
-        key={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(
+          <Topic
+            topicData={topicData}
+            topicID={topicID}
+            key={topicID}
+          />
+        )
+      }
+
+      return(
+        <div>TODO: Add a loading thingy</div>
+      )
+    });
 
     return (
       <div className="topics-list">

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(
+        <main className="loading-screen">
+          <div>
+            <div>
+              <img src={orbitdb_logo} alt="orbitdb_logo" height="50"/>
+              <p><strong>Initializing OrbitDB...</strong></p>
+            </div>
+          </div>
+        </main>
+      )
+    }
+
     //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
   }
 };

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

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,

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

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