userSaga related improvements

src/containers/AuthWrapperContainer.js

@@ -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(<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)

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 (
-            <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>
-                }
-            />
-
+        const hasSignedUp = this.props.user.hasSignedUp;
+
+        if(hasSignedUp!==null) {
+            const buttonText = hasSignedUp ? "Update" : "Sign Up";
+            const placeholderText = hasSignedUp ? this.props.user.username : "Username";
+
+            return(
+                <form className="pure-form pure-form-stacked">
+                    <input key={"usernameInput"} name={"usernameInput"} type="text" value={this.state.usernameInput} placeholder={placeholderText} onChange={this.handleInputChange} />
+                    <button key="submit" className="pure-button" type="button" onClick={this.handleSubmit}>{buttonText}</button>
+                </form>
+            );
+        }
 
-        )
+        return(null);
     }
 }
 
@@ -95,7 +55,8 @@ UsernameFormContainer.contextTypes = {
 
 const mapStateToProps = state => {
     return {
-        contracts: state.contracts
+        contracts: state.contracts,
+        user: state.user
     }
 };
 

src/layouts/home/Home.js

@@ -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 (
-      <main className="container">
-        <div className="pure-g">
-          <div className="pure-u-1-1 header">
-            <h1>Apella</h1>
-            <br/><br/>
-          </div>
-          <div className="pure-u-1-1">
-            <h2>Account</h2>
-            <p><strong>Username</strong>: <ContractData contract="Forum" method="getUsername" methodArgs={[this.props.accounts[0]]}/></p>
-            <UsernameFormContainer/>
-            <br/><br/>
-          </div>
-        </div>
-      </main>
-    )
-  }
-}
-
-export default Home

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 (
+            <main className="container">
+                <div className="pure-g">
+                    <div className="pure-u-1-1 header">
+                        <h1>Apella</h1>
+                        <br/><br/>
+                    </div>
+                    <div className="pure-u-1-1">
+                        <h2>Account</h2>
+                        <p><strong>Username</strong>: {this.props.user.username}</p>
+                        <UsernameFormContainer/>
+                        <br/><br/>
+                    </div>
+                </div>
+            </main>
+        )
+    }
+}
 
 // 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
   }
 };

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
             };

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) {