Merge pull request singnet#28 from raamb/master

UX and bug fixes
ramongduraes · Jan 21, 2019 · 9216778 · 9216778
2 parents 7ad4921 + 323350c
commit 9216778
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 48 deletions.
diff --git a/dist/css/profile.css b/dist/css/profile.css
@@ -1,15 +1,12 @@
-.profile-page {
-	font-family: 'Roboto',sans-serif;
-}
 
 .ProfilegridWrapper {
 	display: grid;
 	height: 250px;
 	width: 100%;
 	grid-template-rows: 250px  1fr;
 	grid-template-columns: 5% 40% 5% 40%;
-	font-family: 'Roboto',sans-serif;
-	}
+}
+
 .profilegridspacer{
 
 	  width:100%;
@@ -62,13 +59,12 @@
 }
 
 .channel-info {
-	height: 485px;
-	overflow: auto;
-	border-radius: 5px;
-	border-top: 3px solid #0066ff;
-	padding: 15px 15px 35px;
-	margin-top: 30px;
-	box-shadow: 1px 1px 10px #e0dbdb;
+    height: 385px;
+    overflow: auto;
+    border-radius: 5px;
+    border-top: 3px solid #0066ff;
+    padding: 15px;
+    box-shadow: 1px 1px 10px #e0dbdb;
 }
 
 .channel-header {

diff --git a/dist/css/style.css b/dist/css/style.css
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="icon" href="/img/favicon.png" type="image/png"/><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700&subset=latin-ext,vietnamese" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"><link href="css/icomoon.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><link href="css/background.css" rel="stylesheet"><link rel="stylesheet" href="css/profile.css"/><title>SingularityNET Beta Dapp</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-107763881-5"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-107763881-5")</script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="react-root"></div><script type="text/javascript" src="bundle.41eafe65.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="icon" href="/img/favicon.png" type="image/png"/><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700&subset=latin-ext,vietnamese" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"><link href="css/icomoon.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><link href="css/background.css" rel="stylesheet"><link rel="stylesheet" href="css/profile.css"/><title>SingularityNET Beta Dapp</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-107763881-5"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-107763881-5")</script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="react-root"></div><script type="text/javascript" src="bundle.9802844f.js"></script></body></html>
diff --git a/scripts/serveDist.js b/scripts/serveDist.js
@@ -15,4 +15,4 @@ app.get('/bundle*', (req, res, next) => {
 
 app.use(express.static(paths.outPath));
 
-app.listen(PORT, () => { console.log('Alpha dapp running at http://localhost:' + PORT) });
+app.listen(PORT, () => { console.log('Beta DApp running at http://localhost:' + PORT) });
diff --git a/src/App.js b/src/App.js
@@ -46,14 +46,14 @@ export default class App extends React.Component {
                     </div>
                     :
                     <div className="col-xs-6 col-sm-4 col-md-6 col-lg-3 network-name"/>
-                  }
-                    <div className="col-xs-6 col-sm-8 col-md-6 col-lg-3 get-started-text">
-                        <Link to="/GetStarted"><span className="get-started-text">Get Started</span> </Link>
-                    </div>                        
+                  }                      
                   <div className="search-user">
+                    <div className="get-started">
+                        <Link to="/GetStarted"><span>Get Started</span> </Link>
+                    </div>                        
                       {
                         (typeof this.props.searchCallBack !== 'undefined')?
-                          <input className="search" placeholder={this.props.searchTerm === '' ? 'Search by Agent or Tags' : this.props.searchTerm} name="srch-term" id="srch-term" type="label" onClick={this.props.searchCallBack} />:<p></p>
+                          <input className="search" placeholder={this.props.searchTerm === '' ? 'Search by Agent or Tags' : this.props.searchTerm} name="srch-term" id="srch-term" type="label" onClick={this.props.searchCallBack} />:null
                       }                
                       <div className="user">
                           {(typeof web3 !== 'undefined')?

diff --git a/src/components/JobDetails.js b/src/components/JobDetails.js
@@ -409,7 +409,7 @@ export  class Jobdetails extends React.Component {
       //this.setState({serviceState:data})
       this.serviceState = data;
       this.setState({jobDetailsSliderOpen: true });
-      this.setState({enableVoting: true})
+      this.setState({enableVoting: false})
       this.setState({ocvalue:this.serviceState['price_in_agi']})      
       this.setState({valueTab:0})
       this.setState({startjobfundinvokeres:false})

diff --git a/src/components/Profile.js b/src/components/Profile.js
@@ -434,7 +434,7 @@ export class Profile extends Component {
                             <h3>Manage your Escrow account</h3>
                             <div className="col-xs-12 col-sm-12 col-md-6 col-lg-6 amount-type">
                                 <Tabs value={value} onChange={(event,value)=> this.handleChange(value)} indicatorColor='primary'>
-                                        <Tab label={<span style={{ fontSize: "13px" }}>Deposit&nbsp;<span>
+                                        <Tab label={<span style={{ fontSize: "13px"  }}>Deposit&nbsp;<span>
                                             <Tooltip title={<span style={{ fontSize: "13px", lineHeight: "18px"}}>
                                                 Deposit AGI tokens to the escrow account. You need to have funds in the escrow to create payment channels.</span>} >
                                                 <i className="fa fa-info-circle info-icon" aria-hidden="true"></i>
@@ -479,6 +479,9 @@ export class Profile extends Component {
                         <div>
                             <DAppModal open={this.state.openchaining} message={"Your transaction is being mined."} showProgress={true}/>
                         </div>
+                        <div className="manage-account">
+                        <h3>Channel Details</h3>
+                        </div>
                         <div className="col-xs-12 col-sm-16 col-md-16 col-lg-16 channel-info ">
                             <div className="row channel-header">
                                 <div className="col-sm-3 col-md-3 col-lg-2 hidden-xs">

diff --git a/src/components/Services.js b/src/components/Services.js
@@ -258,7 +258,7 @@ class SampleServices extends React.Component {
       agentsample = this.state.besttagresult
     }
 
-    const agents = agentsample.slice(this.state.offset, this.state.offset + 5).map((rown,index) =>
+    const agents = agentsample.slice(this.state.offset, this.state.offset + 15).map((rown,index) =>
       <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 media" key={index} id={rown[ "service_id"]} name={rown[ "display_name"].toUpperCase()}>
           <div className="col-sm-12 col-md-2 col-lg-2 agent-boxes-label">Agent Name</div>
           <div className="col-sm-12 col-md-2 col-lg-2 agent-name-align" id={rown[ "service_id"]} name={rown[ "display_name"]}>
@@ -282,7 +282,7 @@ class SampleServices extends React.Component {
               {(rown.hasOwnProperty('tags'))? rown["tags"].map((rowtag,rindex) =>
               <button key={rindex} className='btn btn-secondary mr-15'>{rowtag}</button>):null}
           </div>
-          <div className="col-sm-12 col-md-1 col-lg-1 agent-boxes-label">Health</div>
+          <div className="col-sm-12 col-md-1 col-lg-1 agent-boxes-label">Status</div>
           <div className="col-sm-12 col-md-1 col-lg-1 health-align">
               {(rown["is_available"])? 
               <span className="agent-health green"></span>: 
@@ -339,7 +339,7 @@ class SampleServices extends React.Component {
                         <div className="col-sm-1 col-md-1 col-lg-1 text-center">
                             <div className="toggle">
                                 <button onClick={this.handlehealthsort}>
-                                    <h3>Health</h3>
+                                    <h3>Status</h3>
                                     <i className="fa fa-sort sort-icon" aria-hidden="true"></i>
                                 </button>
                             </div>
@@ -357,7 +357,7 @@ class SampleServices extends React.Component {
                     <div className="col-xs-12 col-md-12 col-lg-12 pagination pagination-singularity text-right no-padding">
                         {arraylimit>5?
                         <MuiThemeProvider theme={theme}>
-                            <Pagination limit={5} offset={this.state.offset} total={arraylimit} onClick={(e, offset)=> this.handleClick(offset)} />
+                            <Pagination limit={15} offset={this.state.offset} total={arraylimit} onClick={(e, offset)=> this.handleClick(offset)} />
                         </MuiThemeProvider>
                         :null}
                     </div>

diff --git a/src/components/Vote.js b/src/components/Vote.js
@@ -10,10 +10,10 @@ export default class Vote extends React.Component {
 
       this.state = {
         upVote: false,
-        downVote: false
+        downVote: false,
       };
+      this.userVoted = false
       this.handleVote = this.handleVote.bind(this);
-      console.log(JSON.stringify(props))
     }
 
     updateVote(upVote, downVote)
@@ -24,21 +24,25 @@ export default class Vote extends React.Component {
 
     processError(err, upVote, downVote)
     {
+      this.userVoted = false
       console.log(err)
       this.updateVote(upVote, downVote)
     }
 
     handleVote(orgid,serviceid,upVote, downVote)
     {
+      this.userVoted = true
+      console.log("Changing upVote to " + upVote + " and downVote to " + downVote)
       const voteLikeOriginal = this.state.upVote
       const voteDislikeOriginal = this.state.downVote
 
       if(typeof upVote === 'undefined'){
-        this.updateVote(downVote ? false : this.state.upVote, downVote)
+        upVote = downVote ? false : this.state.upVote
       } 
       else if(typeof downVote === 'undefined') {
-        this.updateVote(upVote, upVote ? false : this.state.downVote)
+        downVote = upVote ? false : this.state.downVote
       }
+      this.updateVote(upVote, downVote)
 
       const urlfetchvote = getMarketplaceURL(this.props.chainId) + 'user-vote'
       console.log("Message " + this.props.userAddress + orgid + upVote + serviceid + (!upVote))
@@ -74,6 +78,14 @@ export default class Vote extends React.Component {
       console.log(response)
     }
 
+    isUpVote() {
+      return this.userVoted ? this.state.upVote : this.props.serviceState["up_vote"]
+    }
+
+    isDownVote() {
+      return this.userVoted ? this.state.downVote : this.props.serviceState["down_vote"]
+    }
+
     render()
     {
         return(
@@ -83,12 +95,12 @@ export default class Vote extends React.Component {
                 <h3>Vote</h3>
                 <div className="col-xs-6 col-sm-6 col-md-6 mtb-20 mobile-mtb-7">
                     <div className="thumbsup-icon vote-like">
-                        <span name="upVote" className={this.state.upVote ? "icon-like" : "icon-like-disabled"} onClick={()=>this.handleVote(this.props.serviceState["org_id"],this.props.serviceState["service_id"],!this.state.upVote, undefined)}/>
+                        <span name="upVote" className={ this.isUpVote() ? "icon-like" : "icon-like-disabled"} onClick={()=>this.handleVote(this.props.serviceState["org_id"],this.props.serviceState["service_id"],!this.isUpVote(), undefined)}/>
                     </div>
                 </div>
                 <div className="col-xs-6 col-sm-6 col-md-6 mtb-20 border-left-1">
                     <div className="thumbsdown-icon">
-                      <span name="downVote" className={this.state.downVote ? "icon-dislike-enabled" : "icon-dislike"} onClick={()=>this.handleVote(this.props.serviceState["org_id"],this.props.serviceState["service_id"],undefined, !this.state.downVote)}/>
+                      <span name="downVote" className={this.isDownVote() ? "icon-dislike-enabled" : "icon-dislike"} onClick={()=>this.handleVote(this.props.serviceState["org_id"],this.props.serviceState["service_id"],undefined, !this.isDownVote())}/>
                     </div>
                 </div>
               </div> :

diff --git a/src/components/service/ExampleService.js b/src/components/service/ExampleService.js
@@ -12,10 +12,10 @@ export default class ExampleService extends React.Component {
         this.state = {
             serviceName: undefined,
             methodName: undefined,
-            response: undefined,
             a: 0,
             b: 0
         };
+        this.response = undefined
         this.isComplete = false
         this.serviceMethods = []
         this.allServices = []
@@ -31,9 +31,9 @@ export default class ExampleService extends React.Component {
         else {
             if (typeof nextProps.response !== 'undefined') {
                 if (typeof nextProps.response === 'string') {
-                    this.setState({response:nextProps.response}); 
+                    this.response=nextProps.response; 
                 } else {
-                    this.setState({response: nextProps.response.value});
+                    this.response=nextProps.response.value;
                 }
             }
         }
@@ -148,7 +148,7 @@ export default class ExampleService extends React.Component {
     renderComplete() {
         return(
         <div>
-            <p style={{fontSize: "13px"}}>Response from service is {this.state.response} </p> 
+            <p style={{fontSize: "13px"}}>Response from service is {this.response} </p> 
         </div>
         );
     }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="icon" href="/img/favicon.png" type="image/png"/><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700&subset=latin-ext,vietnamese" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"><link href="css/icomoon.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><link href="css/background.css" rel="stylesheet"><link rel="stylesheet" href="css/profile.css"/><title>SingularityNET Beta Dapp</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-107763881-5"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer\|\|[],gtag("js",new Date),gtag("config","UA-107763881-5")</script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="react-root"></div><script type="text/javascript" src="bundle.41eafe65.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="icon" href="/img/favicon.png" type="image/png"/><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700&subset=latin-ext,vietnamese" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"><link href="css/icomoon.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><link href="css/background.css" rel="stylesheet"><link rel="stylesheet" href="css/profile.css"/><title>SingularityNET Beta Dapp</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-107763881-5"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer\|\|[],gtag("js",new Date),gtag("config","UA-107763881-5")</script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="react-root"></div><script type="text/javascript" src="bundle.9802844f.js"></script></body></html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,4 +15,4 @@ app.get('/bundle*', (req, res, next) => {

		app.use(express.static(paths.outPath));

		app.listen(PORT, () => { console.log('Alpha dapp running at http://localhost:' + PORT) });
		app.listen(PORT, () => { console.log('Beta DApp running at http://localhost:' + PORT) });