Init sign up

app/package.json

@@ -13,7 +13,7 @@
     "connected-react-router": "^6.3.1",
     "drizzle": "^1.3.3",
     "history": "^4.7.2",
-    "ipfs": "^0.34.4",
+    "ipfs": "^0.33.0",
     "orbit-db": "^0.19.9",
     "prop-types": "^15.7.2",
     "react": "^16.8.1",

app/src/containers/SignUpContainer.js

@@ -2,8 +2,15 @@ import React, { Component } from 'react';
 
 import { Header } from 'semantic-ui-react';
 import {connect} from "react-redux";
+import UsernameFormContainer from './UsernameFormContainer';
 
 class SignUp extends Component {
+    componentDidUpdate(prevProps) {
+        if (this.props.user.hasSignedUp && !prevProps.user.hasSignedUp){
+            this.props.history.push("/");
+        }
+    }
+
     render() {
         return (
             this.props.user.hasSignedUp
@@ -21,7 +28,7 @@ class SignUp extends Component {
                         <p className="no-margin">
                             <strong>Account address:</strong> {this.props.user.address}
                         </p>
-                        UsernameFormContainer
+                        <UsernameFormContainer />
                     </div>
                 </div>)
         );
@@ -37,4 +44,3 @@ const mapStateToProps = state => {
 const SignUpContainer = connect(mapStateToProps)(SignUp);
 
 export default SignUpContainer;
-

app/src/containers/UsernameFormContainer.js

@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import { connect } from "react-redux";
+
+import { Button, Message, Form, Dimmer, Loader, Header } from 'semantic-ui-react';
+
+import { drizzle } from '../index';
+import { createDatabases } from '../orbit';
+/*import { updateUsername } from '../redux/actions/transactionsMonitorActions';*/
+
+const contract = "Forum";
+const checkUsernameTakenMethod = "isUserNameTaken";
+const signUpMethod = "signUp";
+
+class UsernameFormContainer extends Component {
+    constructor(props, context) {
+        super(props);
+
+        this.handleInputChange = this.handleInputChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.completeAction = this.completeAction.bind(this);
+        this.checkedUsernames = [];
+
+        this.state = {
+            usernameInput: '',
+            error: false,
+            errorHeader: "",
+            errorMessage: "",
+            signingUp: false
+        };
+    }
+
+    handleInputChange(e, { name, value }) {
+        this.setState({
+            [name]: value,
+            error: false
+        })
+        if (value !== '') {
+            if (this.checkedUsernames.length > 0) {
+                if (this.checkedUsernames.some(e => e.usernameChecked === value)){
+                    return;
+                }
+            }
+
+            drizzle.contracts[contract].methods[checkUsernameTakenMethod].cacheCall(value);
+        }
+    }
+
+    handleSubmit() {
+        if (this.state.usernameInput === ''){
+            this.setState({
+                error: true,
+                errorHeader: "Data Incomplete",
+                errorMessage: "You need to provide a username"
+            });
+        } else if (!this.state.error) {
+            this.completeAction();
+        }
+    }
+
+    async completeAction() {
+        if(this.props.user.hasSignedUp){
+            //TODO
+            /*this.props.store.dispatch(updateUsername(...[this.state.usernameInput], null));*/
+        } else {
+            this.setState({ signingUp: true });
+            const orbitdbInfo = await createDatabases();
+            this.stackId = drizzle.contracts[contract].methods[signUpMethod]
+                .cacheSend(...[this.state.usernameInput,
+                    orbitdbInfo.id,
+                    orbitdbInfo.topicsDB,
+                    orbitdbInfo.postsDB,
+                    orbitdbInfo.publicKey,
+                    orbitdbInfo.privateKey
+                ]);
+        }
+        /*this.setState({ usernameInput: '' });*/
+    }
+
+    componentDidUpdate() {
+        if (this.state.signingUp) {
+            var txHash = this.props.transactionStack[this.stackId];
+            if (txHash && this.props.transactions[txHash].status === "error") {
+                this.setState({signingUp: false});
+            }
+        } else {
+            var temp = Object.values(this.props.contracts[contract][checkUsernameTakenMethod]);
+            this.checkedUsernames = temp.map(checked => {return {
+                usernameChecked: checked.args[0],
+                isTaken: checked.value
+            }})
+    
+            if (this.checkedUsernames.length > 0){
+                this.checkedUsernames.forEach( checked => {
+                    if (checked.usernameChecked === this.state.usernameInput &&
+                    checked.isTaken && !this.state.error) {
+                        this.setState({
+                            error: true,
+                            errorHeader: "Data disapproved",
+                            errorMessage: "This username is already taken"
+                        });
+                        return
+                    }
+                })
+            }
+        }
+    }
+
+    render() {
+        const hasSignedUp = this.props.user.hasSignedUp;
+
+        if(hasSignedUp !== null) {
+            const buttonText = hasSignedUp ? "Update" : "Sign Up";
+            const placeholderText = hasSignedUp ? this.props.user.username : "Username";
+            var withError = this.state.error && {error: true};
+
+            return(
+                <div>
+                    <Form onSubmit={this.handleSubmit} {...withError}>
+                        <Form.Field required>
+                            <label>Username</label>
+                            <Form.Input
+                                placeholder={placeholderText}
+                                name='usernameInput'
+                                value={this.state.usernameInput}
+                                onChange={this.handleInputChange}
+                            />
+                        </Form.Field>
+                        <Message
+                            error
+                            header={this.state.errorHeader}
+                            content={this.state.errorMessage}
+                        />
+                        <Button type='submit'>{buttonText}</Button>
+                    </Form>
+                    <Dimmer active={this.state.signingUp} page>
+                        <Header as='h2' inverted>
+                            <Loader size='large'>Magic elfs are processing your nobel request.</Loader>
+                        </Header>
+                    </Dimmer>
+                </div>
+            );
+        }
+
+        return(null);
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        contracts: state.contracts,
+        transactions: state.transactions,
+        transactionStack: state.transactionStack,
+        user: state.user
+    }
+};
+
+export default connect(mapStateToProps)(UsernameFormContainer);

app/src/index.js

@@ -14,7 +14,7 @@ import drizzleOptions from "./config/drizzleOptions";
 
 initIPFS();
 
-new Drizzle(drizzleOptions, store);
+export const drizzle = new Drizzle(drizzleOptions, store);
 
 render(
     <Provider store={store}>

app/src/redux/store.js

@@ -1,7 +1,7 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import { createBrowserHistory } from 'history'
 import createSagaMiddleware from 'redux-saga';
-import {Drizzle, generateContractsInitialState} from 'drizzle';
+import {generateContractsInitialState} from 'drizzle';
 import {routerMiddleware} from 'connected-react-router';
 
 import rootSaga from './sagas/rootSaga';

app/src/router/routes.js

@@ -1,17 +1,17 @@
 import React from 'react'
-import { Route, Switch } from 'react-router-dom'
-import PrivateRoute from './PrivateRoute.js';
+import { Route, Redirect, Switch } from 'react-router-dom'
 import NavBarContainer from '../containers/NavBarContainer';
 import HomeContainer from '../containers/HomeContainer'
 import SignUpContainer from '../containers/SignUpContainer'
 import NotFound from '../components/NotFound'
-
+import {drizzle} from '../index'
 
 const routes = (
     <div>
         <NavBarContainer />
         <Switch>
-            <PrivateRoute exact path="/" component={HomeContainer} />
+            <Route exact path="/" component={HomeContainer} />
+            <Redirect from='/home' to="/" />
             <Route path="/signup" component={SignUpContainer} />
             <Route component={NotFound} />
         </Switch>