Loading proposals, and reorganized code

app/components/proposal-manager/proposal-manager.js

@@ -2,11 +2,11 @@ import EmbarkJS from 'Embark/EmbarkJS';
 import ERC20Token from 'Embark/contracts/ERC20Token';
 import ProposalCuration from 'Embark/contracts/ProposalCuration';
 import SNT from 'Embark/contracts/SNT';
-import React, { Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Form, FormGroup, FormControl, HelpBlock, Button, Alert } from 'react-bootstrap';
 import web3 from "Embark/web3"
 
-class ProposalManager extends React.Component {
+class ProposalManager extends Component {
 
     constructor(props) {
         super(props);
@@ -51,25 +51,34 @@ class ProposalManager extends React.Component {
             "description": this.state.description
         };
 
-        let hexDescription = web3.utils.toHex(JSON.stringify(description));
+        EmbarkJS.Storage.saveText(JSON.stringify(description))
+            .then(async (hash) => {
+                let hexHash = web3.utils.toHex(hash);
 
-        let receipt = await SNT.methods.approve(
+                let receipt = await SNT.methods.approve(
                             ProposalCuration.options.address, 
                             this.state.submitPrice)
                         .send({from: web3.eth.defaultAccount, gasLimit: 1000000});
 
-        console.log(receipt);
+                console.log(receipt);
 
-        receipt = await ProposalCuration.methods.submitProposal(
-            "0x00",
-            "0x0000000000000000000000000000000000000000", 
-            0, 
-            "0x00", 
-            hexDescription
-            )
-            .send({from: web3.eth.defaultAccount, gasLimit: 1000000});
-        
-        console.log(receipt);
+                receipt = await ProposalCuration.methods.submitProposal(
+                "0x00",
+                "0x0000000000000000000000000000000000000000", 
+                0, 
+                "0x00", 
+                hexHash
+                )
+                .send({from: web3.eth.defaultAccount, gasLimit: 1000000});
+
+                console.log(receipt);
+                })
+            .catch((err) => {
+                if(err){
+                    // TODO show error
+                    console.log("Storage saveText Error => " + err.message);
+                }
+            });
     }
     
 

app/components/voting-dapp/paginator.js

@@ -1,37 +1,25 @@
 import web3 from "Embark/web3"
 import EmbarkJS from 'Embark/EmbarkJS';
-import React from 'react';
+import React, {Fragment} from 'react';
 import {Button} from 'react-bootstrap';
 
-class Paginator extends React.Component {
-
-    constructor(props) {
-      super(props);
-      this.state = {
-
-      };
+const Paginator = props => {
+    let ln = Math.ceil(props.total / props.recordsByPage);
+    let btnArray = []
+    for(let i = 1; i <= ln; i++){
+        btnArray.push(<Button 
+                            bsStyle="link" 
+                            className={i == props.pageNum ? 'current' : ''} 
+                            onClick={(e) => props.pageHandler(e, i)}>{i}</Button>)
     }
 
-    render(){
-        let ln = Math.ceil(this.props.total / this.props.recordsByPage);
-        let btnArray = []
-        for(let i = 1; i <= ln; i++){
-            btnArray.push(<Button bsStyle="link" className={i == this.props.pageNum ? 'current' : ''} onClick={(e) => this.props.pageHandler(e, i)}>{i}</Button>)
-        }
-
-        return <div>
-            <Button bsStyle="link" onClick={(e) => this.props.pageHandler(e, 1)}>&lt;</Button>
-            {
-                btnArray.map((component, index) => (
-                <React.Fragment key={index}>
+    return <div>{
+            btnArray.map((component, index) => (
+                <Fragment key={index}>
                     { component }
-                </React.Fragment>
-                ))
-            }
-            <Button bsStyle="link" onClick={(e) => this.props.pageHandler(e, ln)}>&gt;</Button>
-        </div>;
-    }
-
-}
+                </Fragment>
+            ))
+        }</div>;
+};
 
 export default Paginator;

app/components/voting-dapp/proposal-container.js

@@ -1,52 +1,65 @@
 import web3 from "Embark/web3"
 import EmbarkJS from 'Embark/EmbarkJS';
-import React from 'react';
-
+import React, {Component, Fragment} from 'react';
 import ProposalForm from './proposal-form';
 import Proposal from './proposal';
 import ProposalList from './proposal-list';
 import Paginator from './paginator';
+import ProposalManager from 'Embark/contracts/ProposalManager';
+import ProposalCuration from 'Embark/contracts/ProposalCuration';
 
-const pageLength = 10;
-class ProposalContainer extends React.Component {
+const pageLength = 4;
+class ProposalContainer extends Component {
 
     constructor(props) {
       super(props);
       this.state = {
           proposals: [],
-          total: 10,  // TODO get total
+          total: 0,
           page: 1
       };
+      window['ProposalCuration'] = ProposalCuration;
     }
 
     componentDidMount(){
-        this.getProposalsOnPage(this.state.page);
+        __embarkContext.execWhenReady(async () => {
+            ProposalManager.options.address = await ProposalCuration.methods.proposalManager().call();
+            await this.getTotalProposals();
+            await this.getProposalsOnPage(this.state.page);
+        });
     }
 
-    getProposalsOnPage(pageNum){
-        this.fetchProposals((pageNum - 1) * pageLength, pageLength, _p => this.setState({proposals: _p, page: pageNum}));
+    async getTotalProposals(){
+        let proposalCount = await ProposalManager.methods.getProposalCount().call();
+        this.setState({
+            total: parseInt(proposalCount)
+        });
+   }
+
+    async getProposalsOnPage(pageNum){
+        this.fetchProposals((pageNum - 1) * pageLength, pageLength, 
+            _p => {
+                this.setState({
+                    proposals: _p, 
+                    page: pageNum
+                });
+            });
     }
 
-    fetchProposals(from, qty, cb){
-
-        console.log("Loading %s records starting from record %s", qty, from);
-
-        // TODO: populate proposals
-        let proposalList = [
-            {
-                description: "QmZ4hQ5jKUqtHEXhXDVSz81JexMoDmVfiypECFQZZibyrS",
-                approved: true
-            }
-        ]
-
+    async fetchProposals(from, qty, cb){
+        let proposalList = [];
+        for(let i = from; i < from + qty && i < this.state.total; i++){
+            let res = await ProposalCuration.methods.proposals(i).call();
+            proposalList.push(res);
+        }
         cb(proposalList);
     }
 
     render(){
-        return <React.Fragment>
+        return <Fragment>
             <ProposalList proposals={this.state.proposals} />
             <Paginator total={this.state.total} recordsByPage={pageLength} page={this.state.page} pageHandler={(e, pageNum) => this.getProposalsOnPage(pageNum) } />
-            </React.Fragment>;
+            </Fragment>;
     }
 
 }

app/components/voting-dapp/proposal-form.js

@@ -12,8 +12,6 @@ class ProposalForm extends React.Component {
 
     handleClick(e){
         e.preventDefault();
-
-        
     }
 
     render(){

app/components/voting-dapp/proposal-list.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import Proposal from './proposal';
 
 const ProposalList = props =>
-  <React.Fragment>
+  <Fragment>
     {props.proposals.map((u, i) => (
       <Proposal key={i} data={u} />
     ))}
-  </React.Fragment>
+  </Fragment>
 
 export default ProposalList;

app/components/voting-dapp/proposal.js

@@ -17,25 +17,35 @@ class Proposal extends React.Component {
       };
     }
 
+    componentDidUpdate(prevProps, prevState, snapshot){
+        if(prevProps.data.description !== this.props.data.description)
+            this.getProposalData();
+    }
+
     componentDidMount(){
         __embarkContext.execWhenReady(() => {
-            EmbarkJS.Storage.get(this.props.data.description)
-                .then((content) => {
-                    let jsonObj = JSON.parse(content);
-                    this.setState({
-                        url: jsonObj.url,
-                        title: jsonObj.title,
-                        description: jsonObj.description
-                    })
-                })
-                .catch((err) => {
-                    if(err){
-                        console.log("Storage get Error => " + err.message);
-                    }
-                });
+            this.getProposalData();
         });
     }
 
+    getProposalData(){
+        let hash = web3.utils.toAscii(this.props.data.description);
+        EmbarkJS.Storage.get(hash)
+            .then((content) => {
+                let jsonObj = JSON.parse(content);
+                this.setState({
+                    url: jsonObj.url,
+                    title: jsonObj.title,
+                    description: jsonObj.description
+                })
+            })
+            .catch((err) => {
+                if(err){
+                    console.log("Storage get Error => " + err.message);
+                }
+            });
+    }
+
     render(){
         return (<div>
             {

app/components/voting-dapp/status-bar.js

@@ -1,9 +1,9 @@
 import web3 from "Embark/web3"
 import EmbarkJS from 'Embark/EmbarkJS';
-import React from 'react';
+import React, {Component} from 'react';
 import SNT from 'Embark/contracts/SNT'; // TODO change this to SNT
 
-class StatusBar extends React.Component {
+class StatusBar extends Component {
 
     constructor(props) {
       super(props);

app/components/voting-dapp/voting-dapp.js

@@ -1,27 +1,14 @@
 import web3 from "Embark/web3"
 import EmbarkJS from 'Embark/EmbarkJS';
 import React from 'react';
-
 import ProposalForm from './proposal-form';
 import ProposalContainer from './proposal-container';
 import StatusBar from './status-bar';
 
-class VotingDapp extends React.Component {
-
-    constructor(props) {
-      super(props);
-      this.state = {
-          
-      };
-    }
-
-    render(){
-        return <div>
-            <StatusBar {...this.props} />
-            <ProposalContainer />
-        </div>;
-    }
-
-}
+const VotingDapp = props =>
+    <div>
+        <StatusBar {...props} />
+        <ProposalContainer />
+    </div>;
 
 export default VotingDapp;

app/dapp.js

@@ -45,15 +45,15 @@ class App extends React.Component {
           <Tab eventKey={0} title="VotingDapp">
               <VotingDapp />
           </Tab>
+          <Tab eventKey={3} title="ProposalManager">
+            <ProposalManager />
+          </Tab>
           <Tab eventKey={1} title="TestToken">
               <TestTokenUI />
           </Tab>
           <Tab eventKey={2} title="ERC20Token">
               <ERC20TokenUI />
           </Tab>
-          <Tab eventKey={3} title="ProposalManager">
-            <ProposalManager />
-          </Tab>
         </Tabs>
       </div>);
   }

contracts/democracy/ProposalManager.sol

@@ -130,6 +130,13 @@ contract ProposalManager is Controlled {
         return uint8(proposals[_proposalId].result);
     } 
 
+    function getProposalCount() 
+        external
+        view 
+        returns (uint256){
+        return proposals.length;
+    }
+
     function getProposal(uint _proposalId)
         external
         view