Browse Source

Major improvements (Orbit, Topic.js, LoadingContainer)

develop
Ezerous 6 years ago
parent
commit
0ff69dbe31
  1. BIN
      app/src/assets/images/orbitdb_logo.png
  2. 64
      app/src/components/Topic.js
  3. 28
      app/src/components/TopicList.js
  4. 16
      app/src/containers/LoadingContainer.js
  5. 4
      app/src/redux/actions/orbitActions.js
  6. 12
      app/src/redux/reducers/orbitReducer.js
  7. 22
      app/src/redux/sagas/orbitSaga.js
  8. 11
      app/src/utils/orbitUtils.js

BIN
app/src/assets/images/orbitdb_logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

64
app/src/components/Topic.js

@ -1,6 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { GetTopicResult } from '../CustomPropTypes'
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
@ -11,21 +10,10 @@ import TimeAgo from 'react-timeago';
import { addPeerDatabase } from '../redux/actions/orbitActions'; import { addPeerDatabase } from '../redux/actions/orbitActions';
class Topic extends Component { class Topic extends Component {
constructor(props) { componentDidMount() {
super(props); const { dispatch, userAddress, topicData } = this.props;
this.state = { if(topicData.userAddress !== userAddress )
askedForReplication: false, dispatch(addPeerDatabase(topicData.fullOrbitAddress));
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 });
}
} }
render() { render() {
@ -62,30 +50,14 @@ class Topic extends Component {
</div> </div>
<hr /> <hr />
<div className="topic-meta"> <div className="topic-meta">
<p className={`no-margin${ <p className="no-margin">
topicData !== null ? '' : ' grey-text'}`} {topicData.userName}
>
{topicData !== null
? topicData.value[2]
: 'Username'
}
</p> </p>
<p className={`no-margin${ <p className="no-margin">
topicData !== null ? '' : ' grey-text'}`} Number of Replies: {topicData.nReplies}
>
{`Number of replies: ${topicData !== null
? topicData.value[4].length
: ''}`
}
</p> </p>
<p className="topic-date grey-text"> <p className="topic-date grey-text">
{topicData !== null <TimeAgo date={topicData.timestamp}/>
&& (
<TimeAgo
date={topicData.value[3]*1000}
/>
)
}
</p> </p>
</div> </div>
</Card.Content> </Card.Content>
@ -97,43 +69,37 @@ class Topic extends Component {
Topic.propTypes = { Topic.propTypes = {
user: PropTypes.object.isRequired, user: PropTypes.object.isRequired,
history: PropTypes.object.isRequired, history: PropTypes.object.isRequired,
topicData: GetTopicResult.isRequired, //TODO: topicData: GetTopicResult.isRequired,
orbitDB: PropTypes.object.isRequired, orbitDB: PropTypes.object.isRequired,
topicID: PropTypes.number.isRequired topicID: PropTypes.number.isRequired
}; };
function getTopicSubject(state, props){ function getTopicSubject(state, props){
const { user, orbit } = state; const { user: {address: userAddress}, orbit } = state;
if (orbit.ipfsInitialized && orbit.orbitdb) {
const { topicData, topicID } = props; const { topicData, topicID } = props;
if (topicData){ if(userAddress === topicData.userAddress) {
if(user && topicData.value[1] === user.address) {
const orbitData = orbit.topicsDB.get(topicID); const orbitData = orbit.topicsDB.get(topicID);
if(orbitData && orbitData.subject) if(orbitData && orbitData.subject)
return orbitData.subject; return orbitData.subject;
} }
else{ else{
const db = orbit.peerDatabases.find(db => db.fullAddress === `/orbitdb/${topicData.value[0]}/topics`); const db = orbit.peerDatabases.find(db => db.fullAddress === topicData.fullOrbitAddress);
if(db && db.store){ if(db && db.store){
const localOrbitData = db.store.get(topicID); const localOrbitData = db.store.get(topicID);
if (localOrbitData) if (localOrbitData)
return localOrbitData.subject; return localOrbitData.subject;
} }
} }
}
}
return null; return null;
} }
function mapStateToProps(state, ownProps) { function mapStateToProps(state, ownProps) {
return { return {
user: state.user, userAddress: state.user.address,
orbitDB: state.orbit, orbitDB: state.orbit,
topicSubject: getTopicSubject(state, ownProps) topicSubject: getTopicSubject(state, ownProps)
} }
} }
export default withRouter(connect(mapStateToProps)(Topic)); export default withRouter(connect(mapStateToProps)(Topic));

28
app/src/components/TopicList.js

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

16
app/src/containers/LoadingContainer.js

@ -2,8 +2,8 @@ import React, { Children, Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ethereum_logo from '../assets/images/ethereum_logo.svg'; import ethereum_logo from '../assets/images/ethereum_logo.svg';
import ipfs_logo from '../assets/images/ipfs_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 { class LoadingContainer extends Component {
render() { render() {
if (this.props.web3.status === 'failed' || !this.props.web3.networkId) { 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 //TODO: wtf is this
if (this.props.drizzleStatus.initialized) if (this.props.drizzleStatus.initialized)
return Children.only(this.props.children); return Children.only(this.props.children);
@ -101,6 +114,7 @@ const mapStateToProps = state => {
drizzleStatus: state.drizzleStatus, drizzleStatus: state.drizzleStatus,
web3: state.web3, web3: state.web3,
ipfsInitialized: state.orbit.ipfsInitialized, ipfsInitialized: state.orbit.ipfsInitialized,
orbitReady: state.orbit.ready,
contractInitialized: state.contracts.Forum.initialized contractInitialized: state.contracts.Forum.initialized
} }
}; };

4
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 ADD_PEER_DATABASE = 'ADD_PEER_DATABASE';
const PEER_DATABASE_ADDED = 'PEER_DATABASE_ADDED'; const PEER_DATABASE_ADDED = 'PEER_DATABASE_ADDED';
const UPDATE_PEERS = 'UPDATE_PEERS'; const UPDATE_PEERS = 'UPDATE_PEERS';
const ORRBIT_GETTING_INFO = 'ORRBIT_GETTING_INFO'; const ORBIT_INIT = 'ORBIT_INIT';
const ORBIT_SAGA_ERROR = 'ORBIT_SAGA_ERROR'; const ORBIT_SAGA_ERROR = 'ORBIT_SAGA_ERROR';
function updateDatabases(type, orbitdb, topicsDB, postsDB) { function updateDatabases(type, orbitdb, topicsDB, postsDB) {
@ -32,7 +32,7 @@ export { DATABASES_CREATED,
UPDATE_PEERS, UPDATE_PEERS,
ADD_PEER_DATABASE, ADD_PEER_DATABASE,
PEER_DATABASE_ADDED, PEER_DATABASE_ADDED,
ORRBIT_GETTING_INFO, ORBIT_INIT,
ORBIT_SAGA_ERROR, ORBIT_SAGA_ERROR,
addPeerDatabase, addPeerDatabase,
updateDatabases updateDatabases

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

@ -2,7 +2,7 @@ import {
DATABASES_CREATED, DATABASES_CREATED,
DATABASES_LOADED, DATABASES_LOADED,
DATABASES_NOT_READY, DATABASES_NOT_READY,
IPFS_INITIALIZED, UPDATE_PEERS, PEER_DATABASE_ADDED IPFS_INITIALIZED, UPDATE_PEERS, PEER_DATABASE_ADDED, ORBIT_INIT
} from '../actions/orbitActions'; } from '../actions/orbitActions';
const initialState = { const initialState = {
@ -26,14 +26,6 @@ const orbitReducer = (state = initialState, action) => {
ipfsInitialized: true ipfsInitialized: true
}; };
case DATABASES_CREATED: case DATABASES_CREATED:
return {
...state,
ready: true,
orbitdb: action.orbitdb,
topicsDB: action.topicsDB,
postsDB: action.postsDB,
id: action.id
};
case DATABASES_LOADED: case DATABASES_LOADED:
return { return {
...state, ...state,
@ -43,7 +35,7 @@ const orbitReducer = (state = initialState, action) => {
postsDB: action.postsDB, postsDB: action.postsDB,
id: action.id id: action.id
}; };
case DATABASES_NOT_READY: case ORBIT_INIT:
return { return {
...state, ...state,
ready: false, ready: false,

22
app/src/redux/sagas/orbitSaga.js

@ -1,13 +1,17 @@
import { all, call, put, select, take, takeEvery, takeLatest } from 'redux-saga/effects'; import { all, call, put, select, take, takeEvery, takeLatest } from 'redux-saga/effects';
import isEqual from 'lodash.isequal'; import isEqual from 'lodash.isequal';
import { forumContract, getCurrentAccount } from './drizzleUtilsSaga'; 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 { DRIZZLE_UTILS_SAGA_INITIALIZED } from '../actions/drizzleUtilsActions';
import { import {
ADD_PEER_DATABASE, PEER_DATABASE_ADDED, ADD_PEER_DATABASE, PEER_DATABASE_ADDED,
DATABASES_NOT_READY, DATABASES_CREATED,
IPFS_INITIALIZED, IPFS_INITIALIZED,
UPDATE_PEERS, ORRBIT_GETTING_INFO, ORBIT_SAGA_ERROR UPDATE_PEERS, ORBIT_INIT, ORBIT_SAGA_ERROR, updateDatabases
} from '../actions/orbitActions'; } from '../actions/orbitActions';
import { ACCOUNT_CHANGED } from '../actions/userActions'; import { ACCOUNT_CHANGED } from '../actions/userActions';
import { ACCOUNTS_FETCHED } from '../actions/drizzleActions'; import { ACCOUNTS_FETCHED } from '../actions/drizzleActions';
@ -16,7 +20,7 @@ let latestAccount;
function* getOrbitDBInfo() { function* getOrbitDBInfo() {
yield put({ yield put({
type: ORRBIT_GETTING_INFO, ...[] type: ORBIT_INIT, ...[]
}); });
const account = yield call(getCurrentAccount); const account = yield call(getCurrentAccount);
if (account !== latestAccount) { if (account !== latestAccount) {
@ -42,11 +46,13 @@ function* getOrbitDBInfo() {
orbitDBInfo[0], orbitDBInfo[1], orbitDBInfo[2], orbitDBInfo[3], orbitDBInfo[0], orbitDBInfo[1], orbitDBInfo[2], orbitDBInfo[3],
orbitDBInfo[4]); orbitDBInfo[4]);
} else { } else {
yield put({ const orbit = yield select(state => state.orbit);
type: DATABASES_NOT_READY, ...[] 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; latestAccount = account;
} catch (error) { } catch (error) {
console.error(error); console.error(error);

11
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() { async function createDatabases() {
console.debug('Creating databases...'); console.debug('Creating databases...');
const ipfs = getIPFS(); const ipfs = getIPFS();
@ -108,4 +117,4 @@ async function orbitSagaOpen(orbitdb, address) {
return store; return store;
} }
export { initIPFS, createDatabases, loadDatabases, orbitSagaPut, orbitSagaOpen }; export { initIPFS, createTempDatabases, createDatabases, loadDatabases, orbitSagaPut, orbitSagaOpen };

Loading…
Cancel
Save