diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index b7b50f2..05ec682 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -35,7 +35,7 @@ class NavBar extends Component {
?
{this.handleItemClick("/profile")}}>
Profile
- :
+ :
{this.handleItemClick("/signup")}}>
Sign Up
diff --git a/src/components/NewPost.js b/src/components/NewPost.js
index 1945a8f..c96e123 100644
--- a/src/components/NewPost.js
+++ b/src/components/NewPost.js
@@ -104,28 +104,29 @@ class NewPost extends Component {
+
+
+
,
-
- ]}
+
+
diff --git a/src/containers/ProfileContainer.js b/src/containers/ProfileContainer.js
index d0ada67..0e13c8f 100644
--- a/src/containers/ProfileContainer.js
+++ b/src/containers/ProfileContainer.js
@@ -9,12 +9,18 @@ import ProfileInformation from '../components/ProfileInformation';
import TopicList from '../components/TopicList';
import PostList from '../components/PostList';
import LoadingSpinner from '../components/LoadingSpinner';
-import { setNavBarTitle } from '../redux/actions/userInterfaceActions';
+import {
+ showProgressBar,
+ hideProgressBar,
+ setNavBarTitle
+} from '../redux/actions/userInterfaceActions';
class Profile extends Component {
constructor(props, context) {
super(props);
+ this.props.store.dispatch(showProgressBar());
+
this.propsToView = this.propsToView.bind(this);
this.drizzle = context.drizzle;
@@ -126,6 +132,9 @@ class Profile extends Component {
componentDidUpdate(){
if (this.username){
this.props.store.dispatch(setNavBarTitle(this.username));
+ if (this.topicIDs && this.postIDs){
+ this.props.store.dispatch(hideProgressBar());
+ }
}
}
}
diff --git a/src/containers/UsernameFormContainer.js b/src/containers/UsernameFormContainer.js
index 5d2a233..a25cc0c 100644
--- a/src/containers/UsernameFormContainer.js
+++ b/src/containers/UsernameFormContainer.js
@@ -8,6 +8,7 @@ import { createDatabases } from './../util/orbit';
import { updateUsername } from '../redux/actions/transactionsMonitorActions';
const contract = "Forum";
+const checkUsernameTakenMethod = "isUserNameTaken";
const signUpMethod = "signUp";
class UsernameFormContainer extends Component {
@@ -18,11 +19,14 @@ class UsernameFormContainer extends Component {
this.handleSubmit = this.handleSubmit.bind(this);
this.completeAction = this.completeAction.bind(this);
- this.contracts = context.drizzle.contracts;
+ this.drizzle = context.drizzle;
+ this.contracts = this.drizzle.contracts;
this.state = {
usernameInput: '',
error: false,
+ errorHeader: "",
+ errorMessage: "",
signingUp: false
};
}
@@ -33,9 +37,18 @@ class UsernameFormContainer extends Component {
handleSubmit() {
if (this.state.usernameInput === ''){
- this.setState({ error: true });
+ this.setState({
+ error: true,
+ errorHeader: "Data Incomplete",
+ errorMessage: "You need to provide a username"
+ });
} else {
- this.completeAction();
+ this.checkUsernameTakenDataKey = this.contracts[contract].methods[checkUsernameTakenMethod]
+ .cacheCall(this.state.usernameInput);
+ this.setState({
+ error: false
+ });
+ this.checkingUsernameTaken = true;
}
}
@@ -57,12 +70,34 @@ class UsernameFormContainer extends Component {
this.setState({ usernameInput: '' });
}
- componentWillReceiveProps(nextProps){
+ componentWillReceiveProps(nextProps) {
if (this.state.signingUp && nextProps.user.hasSignedUp){
this.props.signedUp();
}
}
+ componentWillUpdate() {
+ if (this.checkingUsernameTaken){
+ let dataFetched = this.drizzle.store.getState()
+ .contracts[contract][checkUsernameTakenMethod][this.checkUsernameTakenDataKey];
+ if (dataFetched){
+ this.checkingUsernameTaken = false;
+ if (dataFetched.value){
+ this.setState({
+ error: true,
+ errorHeader: "Data disapproved",
+ errorMessage: "This username is already taken"
+ });
+ } else {
+ this.setState({
+ error: false
+ });
+ this.completeAction();
+ }
+ }
+ }
+ }
+
render() {
const hasSignedUp = this.props.user.hasSignedUp;
@@ -85,14 +120,14 @@ class UsernameFormContainer extends Component {
-
+
- Magic elves are processing your noble request.
+ Magic elfs are processing your nobel request.
@@ -109,7 +144,6 @@ UsernameFormContainer.contextTypes = {
const mapStateToProps = state => {
return {
- contracts: state.contracts,
user: state.user
}
};