Refactoring & Cleanup

app/src/containers/BoardContainer.js → app/src/components/BoardContainer.js

@@ -7,7 +7,7 @@ import { Header } from 'semantic-ui-react';
 import { drizzle } from '../index';
 
 import TopicList from './TopicList';
-import FloatingButton from '../components/FloatingButton';
+import FloatingButton from './FloatingButton';
 
 /* import { showProgressBar, hideProgressBar } from '../redux/actions/userInterfaceActions'; */
 

app/src/components/CoreLayoutContainer.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import NavBarContainer from '../containers/NavBarContainer';
+import NavBarContainer from './NavBarContainer';
-import RightSideBarContainer from '../containers/TransactionsMonitorContainer';
+import RightSideBarContainer from './TransactionsMonitorContainer';
 // Styles
 import '../assets/fonts/fontawesome-free-5.7.2/all.js'; // TODO: check https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers
 import '../assets/css/App.css';

app/src/components/HomeContainer.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import BoardContainer from '../containers/BoardContainer';
+import BoardContainer from './BoardContainer';
 
 class HomeContainer extends Component {
   render() {

app/src/containers/PlaceholderContainer.js → app/src/components/PlaceholderContainer.js

@@ -130,6 +130,7 @@ class PlaceholderContainer extends Component {
               </Grid.Row>
               <Grid.Row>
                 <Grid.Column floated="right" textAlign="right">
+                  {/* TODO
                     <Button icon size="mini" disabled
                       style={{
                         marginRight: '0px'
@@ -141,6 +142,8 @@ class PlaceholderContainer extends Component {
                     <Button icon size="mini" disabled >
                       <Icon name="chevron down" />
                     </Button>
+                     */
+                  }
                   <Button icon size="mini" disabled >
                     <Icon name="linkify" />
                   </Button>

app/src/containers/Post.js → app/src/components/Post.js

@@ -5,7 +5,7 @@ import { push } from 'connected-react-router';
 import { Link, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import ContentLoader from 'react-content-loader';
-import { Button, Divider, Grid, Icon, Label } from 'semantic-ui-react';
+import { Button, Divider, Grid, Icon } from 'semantic-ui-react';
 import TimeAgo from 'react-timeago';
 import UserAvatar from 'react-user-avatar';
 import ReactMarkdown from 'react-markdown';
@@ -126,6 +126,7 @@ class Post extends Component {
             </Grid.Row>
             <Grid.Row>
               <Grid.Column floated="right" textAlign="right">
+                {/*  TODO (also in PlaceHolderContainer)
                 <Button
                   icon
                   size="mini"
@@ -139,6 +140,8 @@ class Post extends Component {
                 <Button icon size="mini">
                   <Icon name="chevron down" />
                 </Button>
+                */
+                }
                 <Button
                   icon
                   size="mini"
@@ -163,7 +166,6 @@ class Post extends Component {
 Post.propTypes = {
   getFocus: PropTypes.bool.isRequired,
   userAddress: PropTypes.string.isRequired,
-  orbitDB: PropTypes.object.isRequired,
   avatarUrl: PropTypes.string,
   postIndex: PropTypes.number.isRequired,
   navigateTo: PropTypes.func.isRequired,
@@ -219,7 +221,6 @@ const mapDispatchToProps = dispatch => bindActionCreators({
 function mapStateToProps(state, ownProps) {
   return {
     userAddress: state.user.address,
-    orbitDB: state.orbit,
     postSubject: getPostSubject(state, ownProps),
     postContent: getPostContent(state, ownProps)
   }

app/src/containers/ProfileContainer.js → app/src/components/ProfileContainer.js

@@ -9,7 +9,7 @@ import { drizzle } from '../index';
 import ProfileInformation from './ProfileInformation';
 import TopicList from './TopicList';
 import PostList from './PostList';
-import LoadingSpinner from '../components/LoadingSpinner';
+import LoadingSpinner from './LoadingSpinner';
 import { setNavBarTitle } from '../redux/actions/userInterfaceActions';
 
 const callsInfo = [

app/src/containers/Topic.js → app/src/components/Topic.js

@@ -71,7 +71,6 @@ Topic.propTypes = {
   userAddress: PropTypes.string.isRequired,
   history: PropTypes.object.isRequired,
   topicData: GetTopicResult.isRequired,
-  orbitDB: PropTypes.object.isRequired,
   topicID: PropTypes.number.isRequired
 };
 
@@ -99,7 +98,6 @@ function getTopicSubject(state, props){
 function mapStateToProps(state, ownProps) {
   return {
     userAddress: state.user.address,
-    orbitDB: state.orbit,
     topicSubject: getTopicSubject(state, ownProps)
   }
 }

app/src/containers/TopicContainer.js → app/src/components/TopicContainer.js

@@ -7,7 +7,7 @@ import { drizzle } from '../index';
 
 import PostList from './PostList';
 import NewPost from './NewPost';
-import FloatingButton from '../components/FloatingButton';
+import FloatingButton from './FloatingButton';
 
 import { setNavBarTitle } from '../redux/actions/userInterfaceActions.js';
 import { determineDBAddress } from '../utils/orbitUtils';

app/src/config/drizzleOptions.js

@@ -2,12 +2,6 @@ import Forum from '../contracts/Forum.json';
 // Docs: https://truffleframework.com/docs/drizzle/reference/drizzle-options
 
 const drizzleOptions = {
-  web3: {
-    fallback: {
-      type: 'ws',
-      url: 'ws://127.0.0.1:9545'
-    }
-  },
   contracts: [Forum],
   events: {
     Forum: ['UserSignedUp', 'UsernameUpdated', 'TopicCreated', 'PostCreated']

app/src/index.js

@@ -11,7 +11,7 @@ import * as serviceWorker from './utils/serviceWorker';
 
 import './assets/css/index.css';
 import drizzleOptions from './config/drizzleOptions';
-import LoadingContainer from './containers/LoadingContainer';
+import LoadingContainer from './components/LoadingContainer';
 
 initIPFS();
 

app/src/redux/actions/drizzleUtilsActions.js

@@ -0,0 +1,4 @@
+const DRIZZLE_UTILS_SAGA_INITIALIZED = 'DRIZZLE_UTILS_SAGA_INITIALIZED';
+const DRIZZLE_UTILS_SAGA_ERROR = 'DRIZZLE_UTILS_SAGA_ERROR';
+
+export { DRIZZLE_UTILS_SAGA_INITIALIZED, DRIZZLE_UTILS_SAGA_ERROR }

app/src/redux/actions/web3UtilsActions.js

@@ -1,4 +0,0 @@
-const WEB3_UTILS_SAGA_INITIALIZED = 'WEB3_UTILS_SAGA_INITIALIZED';
-const WEB3_UTILS_SAGA_ERROR = 'WEB3_UTILS_SAGA_ERROR';
-
-export { WEB3_UTILS_SAGA_INITIALIZED, WEB3_UTILS_SAGA_ERROR }

app/src/redux/sagas/drizzleUtilsSaga.js

@@ -4,7 +4,10 @@ import getWeb3 from "@drizzle-utils/get-web3";
 import Web3 from "web3";
 
 import Forum from '../../contracts/Forum';
-import { WEB3_UTILS_SAGA_INITIALIZED } from '../actions/web3UtilsActions';
+import {
+  DRIZZLE_UTILS_SAGA_ERROR,
+  DRIZZLE_UTILS_SAGA_INITIALIZED
+} from '../actions/drizzleUtilsActions';
 import { DRIZZLE_INITIALIZED } from '../actions/drizzleActions';
 import { fork, take } from 'redux-saga/effects';
 
@@ -21,11 +24,14 @@ function* init() {
       forumContract = yield call(getContractInstance, { web3, artifact: Forum });
       initFlag = true;
       yield put({
-        type: WEB3_UTILS_SAGA_INITIALIZED, ...[]
+        type: DRIZZLE_UTILS_SAGA_INITIALIZED, ...[]
       });
     }
     catch (error) {
-      console.error(`Error while initializing web3UtilsSaga: ${error}`);
+      console.error(`Error while initializing drizzleUtilsSaga: ${error}`);
+      yield put({
+        type: DRIZZLE_UTILS_SAGA_ERROR, ...[]
+      });
     }
   }
   else

app/src/redux/sagas/orbitSaga.js

@@ -6,7 +6,7 @@ import {
   loadDatabases,
   orbitSagaOpen
 } from '../../utils/orbitUtils';
-import { WEB3_UTILS_SAGA_INITIALIZED } from '../actions/web3UtilsActions';
+import { DRIZZLE_UTILS_SAGA_INITIALIZED } from '../actions/drizzleUtilsActions';
 import {
   ADD_PEER_DATABASE, PEER_DATABASE_ADDED,
   DATABASES_CREATED,
@@ -95,7 +95,7 @@ function* updatePeersState() {
 
 function* orbitSaga() {
   yield all([
-    take(WEB3_UTILS_SAGA_INITIALIZED),
+    take(DRIZZLE_UTILS_SAGA_INITIALIZED),
     take(IPFS_INITIALIZED)
   ]);
   yield takeLatest(ACCOUNT_CHANGED, getOrbitDBInfo);

app/src/redux/sagas/transactionsSaga.js

@@ -2,7 +2,7 @@ import { call, select, take, takeEvery } from 'redux-saga/effects';
 
 import { drizzle } from '../../index';
 import { orbitSagaPut } from '../../utils/orbitUtils';
-import { WEB3_UTILS_SAGA_INITIALIZED } from '../actions/web3UtilsActions';
+import { DRIZZLE_UTILS_SAGA_INITIALIZED } from '../actions/drizzleUtilsActions';
 import { CONTRACT_EVENT_FIRED } from './eventSaga';
 
 const transactionsHistory = Object.create(null);
@@ -72,7 +72,7 @@ function* handleError() {
 }
 
 function* transactionsSaga() {
-  yield take(WEB3_UTILS_SAGA_INITIALIZED);
+  yield take(DRIZZLE_UTILS_SAGA_INITIALIZED);
   yield takeEvery('INIT_TRANSACTION', initTransaction);
   yield takeEvery(CONTRACT_EVENT_FIRED, handleEvent);
   yield takeEvery('TX_ERROR', handleError);

app/src/redux/sagas/userSaga.js

@@ -1,7 +1,7 @@
 import { call, put, select, take, takeEvery } from 'redux-saga/effects';
 
 import { forumContract, getCurrentAccount } from './drizzleUtilsSaga';
-import { WEB3_UTILS_SAGA_INITIALIZED } from '../actions/web3UtilsActions';
+import { DRIZZLE_UTILS_SAGA_INITIALIZED } from '../actions/drizzleUtilsActions';
 import {
   ACCOUNT_CHANGED,
   AUTH_USER_DATA_UPDATED,
@@ -61,7 +61,7 @@ function* getUserState() {
 }
 
 function* userSaga() {
-  yield take(WEB3_UTILS_SAGA_INITIALIZED);
+  yield take(DRIZZLE_UTILS_SAGA_INITIALIZED);
   yield takeEvery(ACCOUNTS_FETCHED, updateUserData);
 }
 

app/src/router/routes.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import CoreLayoutContainer from '../components/CoreLayoutContainer';
 import HomeContainer from '../components/HomeContainer';
-import SignUpContainer from '../containers/SignUpContainer';
+import SignUpContainer from '../components/SignUpContainer';
-import StartTopicContainer from '../containers/StartTopicContainer';
+import StartTopicContainer from '../components/StartTopicContainer';
-import TopicContainer from '../containers/TopicContainer';
+import TopicContainer from '../components/TopicContainer';
-import ProfileContainer from '../containers/ProfileContainer';
+import ProfileContainer from '../components/ProfileContainer';
 import NotFound from '../components/NotFound';
 
 const routes = (