Initial attempt

.gitignore

@@ -4,6 +4,9 @@
 /node_modules
 package-lock.json
 
+# Yarn
+yarn.lock
+
 # Testing
 /coverage
 
@@ -11,6 +14,11 @@ package-lock.json
 /build
 /src/build
 
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
 # Misc
 .DS_Store
 .env.local
@@ -18,9 +26,5 @@ package-lock.json
 .env.test.local
 .env.production.local
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
 # Jetbrains
 .idea

contracts/Forum.sol

@@ -1,4 +1,4 @@
-pragma solidity ^0.4.17;
+pragma solidity ^0.4.21;
 
 contract Forum {
 
@@ -13,10 +13,15 @@ contract Forum {
     mapping (address => User) users;
     mapping (string => address) userAddresses;
 
+    event UserSignedUp(
+        string userName
+    );
+
     function signUp(string userName) public returns (bool) {  // Also allows user to update his name - TODO: his previous name will appear as taken
         require(!isUserNameTaken(userName));
         users[msg.sender] = User(userName, new uint[](0), new uint[](0));
         userAddresses[userName] = msg.sender;
+        emit UserSignedUp(userName);
         return true;
     }
 

contracts/Migrations.sol

@@ -1,4 +1,4 @@
-pragma solidity ^0.4.19;
+pragma solidity ^0.4.21;
 
 contract Migrations {
   address public owner;

package.json

@@ -10,6 +10,9 @@
     "truffle-contract": "^3.0.4"
   },
   "dependencies": {
+    "drizzle": "^1.1.4",
+    "drizzle-react": "^1.1.1",
+    "drizzle-react-components": "^1.1.0",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
     "react-scripts": "1.1.1",
@@ -18,6 +21,7 @@
     "react-router-redux": "^4.0.8",
     "redux": "^3.7.2",
     "redux-auth-wrapper": "1.1.0",
+    "redux-saga": "0.16.0",
     "redux-thunk": "^2.2.0"
   },
   "scripts": {

src/index.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route, IndexRoute, browserHistory } from 'react-router'
-import { Provider } from 'react-redux'
+import { DrizzleProvider } from 'drizzle-react'
 import { syncHistoryWithStore } from 'react-router-redux'
 import { UserIsAuthenticated, UserIsNotAuthenticated } from './util/wrappers.js'
-import getWeb3 from "./util/web3/getWeb3";
 
 // Layouts
 import App from './App'
-import Home from './layouts/home/Home'
+import HomeContainer from './layouts/home/HomeContainer'
 import Dashboard from './layouts/dashboard/Dashboard'
 import SignUp from './user/layouts/signup/SignUp'
 import Profile from './user/layouts/profile/Profile'
-
+import {LoadingContainer} from 'drizzle-react-components'
 
 import './index.css';   //???
+
 // Redux Store
 import store from './store'
+import drizzleOptions from './util/drizzle/drizzleOptions'
 
 // ServiceWorker
 import registerServiceWorker from './registerServiceWorker';
@@ -24,28 +25,19 @@ import registerServiceWorker from './registerServiceWorker';
 // Initialize react-router-redux.
 const history = syncHistoryWithStore(browserHistory, store);
 
-// Initialize web3 and set in Redux.
-getWeb3
-    .then(results => {
-        console.log('Web3 initialized!')
-    })
-    .catch(() => {
-        console.log('Error in web3 initialization.')
-    });
-
-
-
 ReactDOM.render((
-        <Provider store={store}>
+        <DrizzleProvider options={drizzleOptions} store={store}>
+            <LoadingContainer>
                 <Router history={history}>
                     <Route path="/" component={App}>
-                    <IndexRoute component={Home} />
+                        <IndexRoute component={HomeContainer} />
                             <Route path="dashboard" component={UserIsAuthenticated(Dashboard)} />
                             <Route path="signup" component={UserIsNotAuthenticated(SignUp)} />
                             <Route path="profile" component={UserIsAuthenticated(Profile)} />
                     </Route>
                 </Router>
-        </Provider>
+            </LoadingContainer>
+        </DrizzleProvider>
     ),
     document.getElementById('root')
 );

src/layouts/home/HomeContainer.js

@@ -0,0 +1,14 @@
+import Home from './Home'
+import { drizzleConnect } from 'drizzle-react'
+
+// May still need this even with data function to refresh component on updates for this contract.
+const mapStateToProps = state => {
+  return {
+    Forum: state.contracts.Forum,
+    drizzleStatus: state.drizzleStatus
+  }
+};
+
+const HomeContainer = drizzleConnect(Home, mapStateToProps);
+
+export default HomeContainer

src/reducer.js

@@ -1,12 +1,12 @@
 import { combineReducers } from 'redux'
 import { routerReducer } from 'react-router-redux'
 import userReducer from './user/userReducer'
-import web3Reducer from './util/web3/web3Reducer'
+import { drizzleReducers } from 'drizzle'
 
 const reducer = combineReducers({
   routing: routerReducer,
   user: userReducer,
-  web3: web3Reducer
+  ...drizzleReducers
 });
 
 export default reducer

src/store.js

@@ -3,20 +3,32 @@ import { createStore, applyMiddleware, compose } from 'redux'
 import thunkMiddleware from 'redux-thunk'
 import {routerMiddleware} from 'react-router-redux'
 import reducer from './reducer'
+import rootSaga from './util/drizzle/rootSaga'
+import createSagaMiddleware from 'redux-saga'
+import {generateContractsInitialState} from 'drizzle'
+import drizzleOptions from './util/drizzle/drizzleOptions'
 
 // Redux DevTools (see also https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup)
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 const routingMiddleware = routerMiddleware(browserHistory);
+const sagaMiddleware = createSagaMiddleware();
+
+const initialState = {
+    contracts: generateContractsInitialState(drizzleOptions)
+};
 
 const store = createStore(
     reducer,
+    initialState,
     composeEnhancers(
     applyMiddleware(
         thunkMiddleware,
-      routingMiddleware
+        routingMiddleware,
+        sagaMiddleware
     )
   )
 );
 
+sagaMiddleware.run(rootSaga);
 export default store

src/util/drizzle/drizzleOptions.js

@@ -0,0 +1,18 @@
+import Forum from './../../build/contracts/Forum.json'
+
+const drizzleOptions = {
+  web3: {
+    fallback: {
+      type: 'ws',
+      url: 'ws://127.0.0.1:8545'
+    }
+  },
+  contracts: [
+    Forum
+  ],
+  events: {
+    Forum: ['UserSignedUp']
+  }
+};
+
+export default drizzleOptions

src/util/drizzle/rootSaga.js

@@ -0,0 +1,8 @@
+import { all, fork } from 'redux-saga/effects'
+import { drizzleSagas } from 'drizzle'
+
+export default function* root() {
+  yield all(
+    drizzleSagas.map(saga => fork(saga))
+  )
+}

src/util/web3/getWeb3.js

@@ -1,51 +0,0 @@
-import store from '../../store'
-import Web3 from 'web3'
-
-export const WEB3_INITIALIZED = 'WEB3_INITIALIZED';
-function web3Initialized(results) {
-    return {
-        type: WEB3_INITIALIZED,
-        payload: results
-    }
-}
-
-let getWeb3 = new Promise(function(resolve, reject) {
-    // Wait for loading completion to avoid race conditions with web3 injection timing.
-    window.addEventListener('load', function(dispatch) {
-        var results;
-        var web3 = window.web3;
-
-        // Checking if Web3 has been injected by the browser (Mist/MetaMask)
-        if (typeof web3 !== 'undefined') {
-            // Use Mist/MetaMask's provider.
-            web3 = new Web3(web3.currentProvider);
-
-            results = {
-                web3Instance: web3
-            };
-
-            console.log('Injected web3 detected.');
-
-            resolve(store.dispatch(web3Initialized(results)))
-        } else {
-
-            // Fallback to localhost if no web3 injection.
-
-            var provider = new Web3.providers.HttpProvider('http://localhost:8545');
-
-            web3 = new Web3(provider);
-
-            results = {
-                web3Instance: web3
-            };
-
-            console.log('No web3 instance injected, using Local web3.');
-
-            resolve(store.dispatch(web3Initialized(results)))
-        }
-
-        // TODO: Error checking.
-    })
-});
-
-export default getWeb3

src/util/web3/web3Reducer.js

@@ -1,16 +0,0 @@
-const initialState = {
-  web3Instance: null
-};
-
-const web3Reducer = (state = initialState, action) => {
-  if (action.type === 'WEB3_INITIALIZED')
-  {
-    return Object.assign({}, state, {
-      web3Instance: action.payload.web3Instance
-    })
-  }
-
-  return state
-};
-
-export default web3Reducer