add contract page

embark-ui/src/actions/index.js

@@ -146,21 +146,25 @@ export function receiveContractProfileError() {
 }
 
 export function fetchContract(contractName) {
+  console.dir("== fetchContract");
+  console.dir(contractName);
   return {
     type: FETCH_CONTRACT,
     contractName
   };
 }
 
-export function receiveContract(contractName, contract) {
+export function receiveContract(contract) {
+  console.dir("== receiveContract");
+  console.dir(contract);
   return {
     type: RECEIVE_CONTRACT,
-    contractName,
     contract
   };
 }
 
 export function receiveContractError() {
+  console.dir("== receiveContractError");
   return {
     type: RECEIVE_CONTRACT_ERROR
   };

embark-ui/src/api/index.js

@@ -66,6 +66,8 @@ export function webSocketBlockHeader() {
 }
 
 export function fetchContract(contractName) {
+  console.dir("api: fetchContract");
+  console.dir(contractName);
   return axios.get('http://localhost:8000/embark-api/contract/' + contractName);
 }
 

embark-ui/src/components/Contract.js

@@ -13,13 +13,11 @@ const Contract = ({contract}) => (
         </tr>
       </thead>
       <tbody>
-        return (
-          <tr>
-            <td>{contract.name}</td>
-            <td>{contract.address}</td>
-            <td>{contract.deploy}</td>
-          </tr>
-        )
+        <tr>
+          <td>{contract.name || contract.className}</td>
+          <td>{contract.address || contract.deployedAddress}}</td>
+          <td>{contract.deploy.toString()}</td>
+        </tr>
       </tbody>
     </table>
   </React.Fragment>

embark-ui/src/containers/ContractContainer.js

@@ -1,37 +1,46 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { compose } from 'redux';
 import { fetchContract } from '../actions';
 import Contract from '../components/Contract';
+import { withRouter } from 'react-router'
 
 class ContractContainer extends Component {
   componentWillMount() {
     console.dir("----");
     console.dir(this.props);
-    console.dir(this.state);
-    this.props.fetchContract(this.props.contractName);
+    //console.dir(this.state);
+    //console.dir(this.props.match.params.contractName);
+    //console.dir(this.props.match.params.contractName);
+    //console.dir(this.props.fetchContract.toString());
+    this.props.fetchContract(this.props.match.params.contractName);
   }
 
   render() {
-    //const { contract } = this.props;
-    //if (!contracts.data) {
-    //  return (
-    //    <h1>
-    //      <i>Loading contracts...</i>
-    //    </h1>
-    //  )
-    //}
+    console.dir("||======>");
+    console.dir(this.props);
+    console.dir("||======>");
+    const { contract } = this.props;
+    if (!contract.data) {
+      return (
+        <h1>
+          <i>Loading contract...</i>
+        </h1>
+      )
+    }
 
-    //if (contracts.error) {
-    //  return (
-    //    <h1>
-    //      <i>Error API...</i>
-    //    </h1>
-    //  )
-    //}
+    if (contract.error) {
+      return (
+        <h1>
+          <i>Error API...</i>
+        </h1>
+      )
+    }
+
+    console.dir(contract);
 
     return (
-      //<Contract contract={contract} />
-      <div>hello</div>
+      <Contract contract={contract.data} />
     );
   }
 };
@@ -42,10 +51,11 @@ function mapStateToProps(state) {
   return { contract: state.contract }
 }
 
-export default connect(
-  mapStateToProps,
-  {
-    fetchContract
-  },
+export default compose(
+  connect(
+    mapStateToProps,
+    { fetchContract }
+  ),
+  withRouter
 )(ContractContainer)
 

embark-ui/src/reducers/contractReducer.js

@@ -1,6 +1,8 @@
 import {RECEIVE_CONTRACT, RECEIVE_CONTRACT_ERROR} from "../actions";
 
 export default function contract(state = {}, action) {
+  console.dir("** reducer");
+  console.dir(arguments);
   switch (action.type) {
     case RECEIVE_CONTRACT:
       return Object.assign({}, state, {data: action.contract.data});

embark-ui/src/reducers/index.js

@@ -5,6 +5,7 @@ import blocksReducer from './blocksReducer';
 import transactionsReducer from './transactionsReducer';
 import commandsReducer from './commandsReducer';
 import contractsReducer from './contractsReducer';
+import contractReducer from './contractReducer';
 
 const rootReducer = combineReducers({
   accounts: accountsReducer,
@@ -12,7 +13,8 @@ const rootReducer = combineReducers({
   blocks: blocksReducer,
   transactions: transactionsReducer,
   commands: commandsReducer,
-  contracts: contractsReducer
+  contracts: contractsReducer,
+  contract: contractReducer
 });
 
 export default rootReducer;

embark-ui/src/sagas/index.js

@@ -125,15 +125,19 @@ export default function *root() {
 }
 
 export function *fetchContract(action) {
+  console.dir("** fetchContract");
+  console.dir(action);
   try {
-    const contract = yield call(api.fetchContract);
+    const contract = yield call(api.fetchContract, action.contractName);
     yield put(actions.receiveContract(contract));
   } catch (e) {
+    console.dir(e);
     yield put(actions.receiveContractError());
   }
 }
 
 export function *watchFetchContract() {
+  console.dir("** watchFetchContract");
   yield takeEvery(actions.FETCH_CONTRACT, fetchContract);
 }