From b66b5c61d54ea506abc6ffb0fbb4220c5815d8f1 Mon Sep 17 00:00:00 2001 From: Apostolof Date: Sat, 23 Feb 2019 17:29:19 +0200 Subject: [PATCH] Init sign up --- app/package.json | 2 +- app/src/containers/SignUpContainer.js | 10 +- app/src/containers/UsernameFormContainer.js | 157 ++++++++++++++++++++ app/src/index.js | 2 +- app/src/redux/store.js | 2 +- app/src/router/routes.js | 8 +- 6 files changed, 172 insertions(+), 9 deletions(-) create mode 100644 app/src/containers/UsernameFormContainer.js diff --git a/app/package.json b/app/package.json index 61f6601..5703dc0 100644 --- a/app/package.json +++ b/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", diff --git a/app/src/containers/SignUpContainer.js b/app/src/containers/SignUpContainer.js index 13d4b66..838967e 100644 --- a/app/src/containers/SignUpContainer.js +++ b/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 {

Account address: {this.props.user.address}

- UsernameFormContainer + ) ); @@ -37,4 +44,3 @@ const mapStateToProps = state => { const SignUpContainer = connect(mapStateToProps)(SignUp); export default SignUpContainer; - diff --git a/app/src/containers/UsernameFormContainer.js b/app/src/containers/UsernameFormContainer.js new file mode 100644 index 0000000..cdee383 --- /dev/null +++ b/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( +
+
+ + + + + + + + +
+ Magic elfs are processing your nobel request. +
+ +
+ ); + } + + return(null); + } +} + +const mapStateToProps = state => { + return { + contracts: state.contracts, + transactions: state.transactions, + transactionStack: state.transactionStack, + user: state.user + } +}; + +export default connect(mapStateToProps)(UsernameFormContainer); diff --git a/app/src/index.js b/app/src/index.js index 45ee126..4567571 100644 --- a/app/src/index.js +++ b/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( diff --git a/app/src/redux/store.js b/app/src/redux/store.js index a64bb7d..b48ea0d 100644 --- a/app/src/redux/store.js +++ b/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'; diff --git a/app/src/router/routes.js b/app/src/router/routes.js index e121f3a..86b48fa 100644 --- a/app/src/router/routes.js +++ b/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 = (
- + +