Init routing

app/package.json

@@ -7,14 +7,18 @@
     "url": "https://gitlab.com/Ezerous/Apella.git"
   },
   "dependencies": {
-    "@drizzle-utils/get-web3": "^0.1.4-alpha.0",
-    "@drizzle-utils/get-contract-instance": "^0.1.4-alpha.0",
     "@drizzle-utils/get-accounts": "0.1.4-alpha.0",
+    "@drizzle-utils/get-contract-instance": "^0.1.4-alpha.0",
+    "@drizzle-utils/get-web3": "^0.1.4-alpha.0",
+    "connected-react-router": "^6.3.1",
     "drizzle": "^1.3.3",
     "drizzle-react": "^1.2.0",
     "drizzle-react-components": "^1.2.1",
+    "history": "^4.7.2",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
+    "react-redux": "^6.0.0",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.5",
     "redux": "^4.0.1",
     "redux-saga": "^0.16.0"

app/src/components/NotFound.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import pageNotFound from '../resources/PageNotFound.jpg';
+
+const NotFound = () => {
+    return (
+        <div style={{textAlign: "center"}}>
+            <img src={pageNotFound} alt="Page not found!"/>
+        </div>
+    );
+};
+
+export default NotFound;

app/src/containers/AppContainer.js → app/src/containers/HomeContainer.js

@@ -1,4 +1,4 @@
-import AppComponent from "../components/AppComponent";
+import HomeComponent from "../components/HomeComponent";
 import { drizzleConnect } from "drizzle-react";
 
 const mapStateToProps = state => {
@@ -9,6 +9,6 @@ const mapStateToProps = state => {
   };
 };
 
-const AppContainer = drizzleConnect(AppComponent, mapStateToProps);
+const HomeContainer = drizzleConnect(HomeComponent, mapStateToProps);
 
-export default AppContainer;
+export default HomeContainer;

app/src/index.js

@@ -3,16 +3,23 @@ import { render } from "react-dom";
 import { DrizzleProvider } from "drizzle-react";
 import { LoadingContainer } from "drizzle-react-components";
 import drizzleOptions from "./config/drizzleOptions";
-import AppContainer from "./containers/AppContainer";
-import store from './redux/store';
+import { ConnectedRouter } from 'connected-react-router'
+import routerStore, {history} from './redux/routerStore';
+import drizzleStore from './redux/drizzleStore';
+import routes from './router/routes'
 
 import * as serviceWorker from "./utils/serviceWorker";
+import {Provider} from "react-redux";
 
 render(
-    <DrizzleProvider options={drizzleOptions} store={store}>
-        <LoadingContainer>
-            <AppContainer />
-        </LoadingContainer>
+    <DrizzleProvider options={drizzleOptions} store={drizzleStore}>
+        <Provider store={routerStore}>
+            <LoadingContainer>
+                <ConnectedRouter history={history}>
+                    { routes }
+                </ConnectedRouter>
+            </LoadingContainer>
+        </Provider>
     </DrizzleProvider>,
     document.getElementById('root')
 );

app/src/redux/store.js → app/src/redux/drizzleStore.js

@@ -1,28 +1,23 @@
 import { createStore, applyMiddleware, compose } from 'redux';
-import reducer from './reducers/reducer';
-import rootSaga from './sagas/rootSaga';
 import createSagaMiddleware from 'redux-saga';
 import { generateContractsInitialState } from 'drizzle';
 
+import drizzleReducer from './reducers/drizzleReducer';
+import rootSaga from './sagas/drizzleSaga';
 import drizzleOptions from '../config/drizzleOptions';
 
+const initialState = { contracts: generateContractsInitialState(drizzleOptions) };
+
 // Redux DevTools
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 const sagaMiddleware = createSagaMiddleware();
-
-const initialState = {
-    contracts: generateContractsInitialState(drizzleOptions)
-};
+const composedEnhancers = composeEnhancers(applyMiddleware(sagaMiddleware));
 
 const store = createStore(
-    reducer,
+    drizzleReducer,
     initialState,
-    composeEnhancers(
-        applyMiddleware(
-            sagaMiddleware
-        )
-    )
+    composedEnhancers
 );
 
 sagaMiddleware.run(rootSaga);

app/src/redux/reducers/reducer.js → app/src/redux/reducers/drizzleReducer.js

@@ -7,4 +7,4 @@ const reducer = combineReducers({
     ...drizzleReducers
 });
 
-export default reducer;
+export default reducer;

app/src/redux/reducers/routerReducer.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import { connectRouter } from 'connected-react-router'
+
+export default (history) => combineReducers({
+    router: connectRouter(history)
+})

app/src/redux/routerStore.js

@@ -0,0 +1,27 @@
+import { createBrowserHistory } from 'history'
+import { createStore, applyMiddleware, compose } from 'redux';
+import { routerMiddleware } from 'connected-react-router'
+
+import createRootReducer from './reducers/routerReducer';
+
+export const history = createBrowserHistory();
+
+const rootReducer = createRootReducer(history);
+
+const initialState = {};
+
+// Redux DevTools
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const routingMiddleware = routerMiddleware(history);
+
+
+const composedEnhancers = composeEnhancers(applyMiddleware(routingMiddleware));
+
+const routerStore = createStore(
+    rootReducer,
+    initialState,
+    composedEnhancers
+);
+
+export default routerStore;

app/src/router/routes.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
+import HomeContainer from '../containers/HomeContainer'
+import NotFound from '../components/NotFound'
+
+const routes = (
+    <div>
+        <Switch>
+            <Route exact path="/" component={HomeContainer} />
+            <Route component={NotFound} />
+        </Switch>
+    </div>
+);
+
+export default routes
+
+
+// const routes = (
+//     <div>
+//         <NavBar />
+//         <Switch>
+//             <Route exact path="/" component={Home} />
+//             <Route path="/signup" component={SignUp} />
+//             <Route component={NotFound} />
+//         </Switch>
+//     </div>
+// );