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 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 { user: {address: userAddress}, orbit } = state;
const { topicData, topicID } = props;
if (topicData){
if(user && topicData.value[1] === user.address) {
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 === `/orbitdb/${topicData.value[0]}/topics`);
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));

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

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

12
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,

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

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

Loading…
Cancel
Save