mirror of https://gitlab.com/ecentrics/concordia
Ezerous
7 years ago
9 changed files with 186 additions and 97 deletions
@ -0,0 +1,48 @@ |
|||
import { drizzleConnect } from 'drizzle-react' |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
|
|||
const contract = "Forum"; |
|||
const method = "hasUserSignedUp"; |
|||
|
|||
class AuthWrapperContainer extends Component { |
|||
constructor(props, context) { |
|||
super(props); |
|||
|
|||
this.contracts = context.drizzle.contracts; |
|||
|
|||
this.dataKey = this.contracts[contract].methods[method].cacheCall(...[this.props.accounts[0]]); |
|||
} |
|||
|
|||
render() { |
|||
// Contract is not yet intialized.
|
|||
if(!this.props.contracts[contract].initialized) |
|||
return (null); |
|||
|
|||
// If the cache key we received earlier isn't in the store yet; the initial value is still being fetched.
|
|||
if(!(this.dataKey in this.props.contracts[contract][method])) |
|||
return (null); |
|||
|
|||
let userHasSignedUp = this.props.contracts[contract][method][this.dataKey].value; |
|||
const authRender = this.props.authRender; |
|||
const guestRender = this.props.guestRender; |
|||
|
|||
if (userHasSignedUp) |
|||
return(<div>{authRender}</div>); |
|||
|
|||
return(<div>{guestRender}</div>); |
|||
} |
|||
} |
|||
|
|||
AuthWrapperContainer.contextTypes = { |
|||
drizzle: PropTypes.object |
|||
}; |
|||
|
|||
const mapStateToProps = state => { |
|||
return { |
|||
accounts: state.accounts, |
|||
contracts: state.contracts, |
|||
} |
|||
}; |
|||
|
|||
export default drizzleConnect(AuthWrapperContainer, mapStateToProps) |
|||
@ -1,69 +0,0 @@ |
|||
import { drizzleConnect } from 'drizzle-react' |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
|
|||
const contract = "Forum"; |
|||
const method = "hasUserSignedUp"; |
|||
|
|||
class Menu extends Component { |
|||
constructor(props, context) { |
|||
super(props); |
|||
|
|||
this.contracts = context.drizzle.contracts; |
|||
|
|||
// Get the contract ABI
|
|||
const abi = this.contracts[contract].abi; |
|||
|
|||
// Fetch initial value from chain and return cache key for reactive updates.
|
|||
let methodArgs = this.props.methodArgs ? this.props.methodArgs : []; |
|||
this.dataKey = this.contracts[contract].methods[method].cacheCall(...methodArgs); |
|||
|
|||
// Iterate over abi for correct function.
|
|||
for (let i = 0; i < abi.length; i++) { |
|||
if (abi[i].name === this.props.method) { |
|||
this.fnABI = abi[i]; |
|||
break |
|||
} |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
// Contract is not yet intialized.
|
|||
if(!this.props.contracts[contract].initialized) { |
|||
return ( |
|||
<span> </span> |
|||
) |
|||
} |
|||
|
|||
// If the cache key we received earlier isn't in the store yet; the initial value is still being fetched.
|
|||
if(!(this.dataKey in this.props.contracts[contract][method])) { |
|||
return ( |
|||
<span> </span> |
|||
) |
|||
} |
|||
|
|||
let displayData = this.props.contracts[contract][method][this.dataKey].value; |
|||
|
|||
if (displayData) { |
|||
return( |
|||
<span>User has signed up!</span> |
|||
) |
|||
} |
|||
|
|||
return( |
|||
<span>User doesn't exist!</span> |
|||
) |
|||
} |
|||
} |
|||
|
|||
Menu.contextTypes = { |
|||
drizzle: PropTypes.object |
|||
}; |
|||
|
|||
const mapStateToProps = state => { |
|||
return { |
|||
contracts: state.contracts |
|||
} |
|||
}; |
|||
|
|||
export default drizzleConnect(Menu, mapStateToProps) |
|||
@ -0,0 +1,103 @@ |
|||
import { drizzleConnect } from 'drizzle-react' |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import AuthWrapperContainer from './AuthWrapperContainer' |
|||
|
|||
const contract = "Forum"; |
|||
const signUpMethod = "signUp"; |
|||
const updateUsernameMethod ="updateUsername"; |
|||
|
|||
class UsernameFormContainer extends Component { |
|||
constructor(props, context) { |
|||
super(props); |
|||
|
|||
this.handleSignUp = this.handleSignUp.bind(this); |
|||
this.handleSignUpInputChange = this.handleSignUpInputChange.bind(this); |
|||
|
|||
this.handleUsernameUpdate = this.handleUsernameUpdate.bind(this); |
|||
this.handleUpdateUsernameInputChange = this.handleUpdateUsernameInputChange.bind(this); |
|||
|
|||
this.contracts = context.drizzle.contracts; |
|||
|
|||
// Get the contract ABI
|
|||
const abi = this.contracts[contract].abi; |
|||
|
|||
|
|||
this.inputs = {signUp:[], updateUsername:[]}; |
|||
let initialState = {signUp:{}, updateUsername:{}}; |
|||
|
|||
// Iterate over abi for correct function.
|
|||
for (let i = 0; i < abi.length; i++) { |
|||
if ((abi[i].name === signUpMethod)) { |
|||
this.inputs.signUp = abi[i].inputs; |
|||
|
|||
for (let i = 0; i < this.inputs.signUp.length; i++) { |
|||
initialState.signUp[this.inputs.signUp[i].name] = ''; |
|||
} |
|||
|
|||
} |
|||
else if ((abi[i].name === updateUsernameMethod)) { |
|||
this.inputs.updateUsername = abi[i].inputs; |
|||
|
|||
for (let i = 0; i < this.inputs.updateUsername.length; i++) { |
|||
initialState.updateUsername[this.inputs.updateUsername[i].name] = ''; |
|||
} |
|||
|
|||
} |
|||
} |
|||
console.dir(initialState); |
|||
this.state = initialState; |
|||
} |
|||
|
|||
handleSignUp() { |
|||
this.contracts[contract].methods[signUpMethod].cacheSend(...Object.values(this.state.signUp)); |
|||
} |
|||
|
|||
handleUsernameUpdate() { |
|||
this.contracts[contract].methods[updateUsernameMethod].cacheSend(...Object.values(this.state.updateUsername)); |
|||
} |
|||
|
|||
handleSignUpInputChange(event) { |
|||
this.setState({ signUp: { ...this.state.signUp, [event.target.name]: event.target.value} }); |
|||
} |
|||
|
|||
handleUpdateUsernameInputChange(event) { |
|||
this.setState({ updateUsername: { ...this.state.updateUsername, [event.target.name]: event.target.value} }); |
|||
} |
|||
|
|||
|
|||
render() { |
|||
let signUp = this.inputs.signUp[0].name; //username
|
|||
let updateUsername = this.inputs.updateUsername[0].name; //newUsername
|
|||
return ( |
|||
<AuthWrapperContainer |
|||
authRender={ |
|||
<form className="pure-form pure-form-stacked"> |
|||
<input key={updateUsername} name={updateUsername} type="text" value={this.state.updateUsername.newUsername} placeholder="Username" onChange={this.handleUpdateUsernameInputChange} /> |
|||
<button key="submit" className="pure-button" type="button" onClick={this.handleUsernameUpdate}>Update</button> |
|||
</form> |
|||
} |
|||
guestRender={ |
|||
<form className="pure-form pure-form-stacked"> |
|||
<input key={signUp} name={signUp} type="text" value={this.state.signUp.username} placeholder="Username" onChange={this.handleSignUpInputChange} /> |
|||
<button key="submit" className="pure-button" type="button" onClick={this.handleSignUp}>Sign Up</button> |
|||
</form> |
|||
} |
|||
/> |
|||
|
|||
|
|||
) |
|||
} |
|||
} |
|||
|
|||
UsernameFormContainer.contextTypes = { |
|||
drizzle: PropTypes.object |
|||
}; |
|||
|
|||
const mapStateToProps = state => { |
|||
return { |
|||
contracts: state.contracts |
|||
} |
|||
}; |
|||
|
|||
export default drizzleConnect(UsernameFormContainer, mapStateToProps) |
|||
Loading…
Reference in new issue