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 = (