From 232960f5a0761f050ccf2f5952620953ea7e47d5 Mon Sep 17 00:00:00 2001 From: Ezerous Date: Fri, 4 May 2018 13:36:35 +0300 Subject: [PATCH] userSaga related improvements --- src/containers/AuthWrapperContainer.js | 48 ------------- src/containers/UsernameFormContainer.js | 93 +++++++------------------ src/layouts/home/Home.js | 26 ------- src/layouts/home/HomeContainer.js | 25 ++++++- src/userReducer.js | 6 +- src/userSaga.js | 11 +-- 6 files changed, 60 insertions(+), 149 deletions(-) delete mode 100644 src/containers/AuthWrapperContainer.js delete mode 100644 src/layouts/home/Home.js diff --git a/src/containers/AuthWrapperContainer.js b/src/containers/AuthWrapperContainer.js deleted file mode 100644 index ce2ad11..0000000 --- a/src/containers/AuthWrapperContainer.js +++ /dev/null @@ -1,48 +0,0 @@ -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(
{authRender}
); - - return(
{guestRender}
); - } -} - -AuthWrapperContainer.contextTypes = { - drizzle: PropTypes.object -}; - -const mapStateToProps = state => { - return { - accounts: state.accounts, - contracts: state.contracts, - } -}; - -export default drizzleConnect(AuthWrapperContainer, mapStateToProps) \ No newline at end of file diff --git a/src/containers/UsernameFormContainer.js b/src/containers/UsernameFormContainer.js index 8b299cb..9b9d59d 100644 --- a/src/containers/UsernameFormContainer.js +++ b/src/containers/UsernameFormContainer.js @@ -1,7 +1,6 @@ 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"; @@ -11,81 +10,42 @@ 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.handleInputChange = this.handleInputChange.bind(this); + this.handleSubmit = this.handleSubmit.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] = ''; - } - - } - } - this.state = initialState; - } - - handleSignUp() { - this.contracts[contract].methods[signUpMethod].cacheSend(...Object.values(this.state.signUp)); + this.state = {usernameInput:''}; } - handleUsernameUpdate() { - this.contracts[contract].methods[updateUsernameMethod].cacheSend(...Object.values(this.state.updateUsername)); + handleSubmit() { + this.setState({usernameInput:''}); + if(this.props.user.hasSignedUp) + this.contracts[contract].methods[updateUsernameMethod].cacheSend(...[this.state.usernameInput]); + else + this.contracts[contract].methods[signUpMethod].cacheSend(...[this.state.usernameInput]); } - 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} }); + handleInputChange(event) { + this.setState({[event.target.name]: event.target.value}); } - render() { - let signUp = this.inputs.signUp[0].name; //username - let updateUsername = this.inputs.updateUsername[0].name; //newUsername - return ( - - - - - } - guestRender={ -
- - -
- } - /> - + const hasSignedUp = this.props.user.hasSignedUp; + + if(hasSignedUp!==null) { + const buttonText = hasSignedUp ? "Update" : "Sign Up"; + const placeholderText = hasSignedUp ? this.props.user.username : "Username"; + + return( +
+ + +
+ ); + } - ) + return(null); } } @@ -95,7 +55,8 @@ UsernameFormContainer.contextTypes = { const mapStateToProps = state => { return { - contracts: state.contracts + contracts: state.contracts, + user: state.user } }; diff --git a/src/layouts/home/Home.js b/src/layouts/home/Home.js deleted file mode 100644 index 974deae..0000000 --- a/src/layouts/home/Home.js +++ /dev/null @@ -1,26 +0,0 @@ -import React, { Component } from 'react' -import { ContractData } from 'drizzle-react-components' -import UsernameFormContainer from '../../containers/UsernameFormContainer' - -class Home extends Component { - render() { - return ( -
-
-
-

Apella

-

-
-
-

Account

-

Username:

- -

-
-
-
- ) - } -} - -export default Home diff --git a/src/layouts/home/HomeContainer.js b/src/layouts/home/HomeContainer.js index 1eb73eb..44ed953 100644 --- a/src/layouts/home/HomeContainer.js +++ b/src/layouts/home/HomeContainer.js @@ -1,11 +1,34 @@ -import Home from './Home' import { drizzleConnect } from 'drizzle-react' +import React, { Component } from 'react' +import UsernameFormContainer from '../../containers/UsernameFormContainer' + +class Home extends Component { + render() { + return ( +
+
+
+

Apella

+

+
+
+

Account

+

Username: {this.props.user.username}

+ +

+
+
+
+ ) + } +} // May still need this even with data function to refresh component on updates for this contract. const mapStateToProps = state => { return { accounts: state.accounts, Forum: state.contracts.Forum, + user: state.user, drizzleStatus: state.drizzleStatus } }; diff --git a/src/userReducer.js b/src/userReducer.js index 17b893d..ea8c016 100644 --- a/src/userReducer.js +++ b/src/userReducer.js @@ -1,7 +1,7 @@ const initialState = { - username: "Guest", + username: "", address: "0x0", - hasSignedUp: false + hasSignedUp: null }; const userReducer = (state = initialState, action) => { @@ -14,7 +14,7 @@ const userReducer = (state = initialState, action) => { }; case 'USER_IS_GUEST': return { - username: "Guest", + username: "", address: action.address, hasSignedUp: false }; diff --git a/src/userSaga.js b/src/userSaga.js index 9fd562c..0ac00a3 100644 --- a/src/userSaga.js +++ b/src/userSaga.js @@ -39,23 +39,24 @@ function* updateUserData() { function* getUserData() { account = (yield select(accounts))[0]; forumContract.methods["hasUserSignedUp"].cacheCall(...[account]); - const txObject = yield call(forumContract.methods["hasUserSignedUp"], ...[account]); + const txObj1 = yield call(forumContract.methods["hasUserSignedUp"], ...[account]); try { - const callResult = yield call(txObject.call, {address:account}); + const callResult = yield call(txObj1.call, {address:account}); if(callResult) { - const username = yield call(forumContract.methods["getUsername"], ...[account]); + const txObj2 = yield call(forumContract.methods["getUsername"], ...[account]); + const username = yield call(txObj2.call, {address:account}); const dispatchArgs = { address: account, username: username }; - yield put({type: 'USER_HAS_SIGNED_UP', ...dispatchArgs}); //TODO: only dispatch if needed + yield put({type: 'USER_HAS_SIGNED_UP', ...dispatchArgs}); } else{ const dispatchArgs = { address: account, }; - yield put({type: 'USER_IS_GUEST', ...dispatchArgs}); //TODO: only dispatch if needed + yield put({type: 'USER_IS_GUEST', ...dispatchArgs}); } } catch (error) {