Add warning for taken username when signing up, Fix scroll on post preview, Add progress-bar in profile view

src/components/NavBar.js

@@ -35,7 +35,7 @@ class NavBar extends Component {
                     ? <Menu.Item onClick={() => {this.handleItemClick("/profile")}}>
                         Profile
                     </Menu.Item>
-                    :<Menu.Menu position='right'>
+                    :<Menu.Menu position='right' style={{backgroundColor: '#00b5ad'}}>
                         <Menu.Item onClick={() => {this.handleItemClick("/signup")}}>
                             Sign Up
                         </Menu.Item>

src/components/NewPost.js

@@ -104,20 +104,22 @@ class NewPost extends Component {
                                     </strong></span>
                                 </div>
                                 <div className="post-content">
-                                    <Form className="topic-form">
+                                    <div style={{display: this.state.previewEnabled ? "block" : "none"}}>
-                                        {this.state.previewEnabled
+                                        <ReactMarkdown source={this.state.postContentInput}
-                                            ? <ReactMarkdown source={this.state.postContentInput}
                                             className="markdown-preview" />
-                                            : [
+                                    </div>
+                                    <Form className="topic-form">
                                         <Form.Input key={"postSubjectInput"}
+                                            style={{display: this.state.previewEnabled ? "none" : ""}}
                                             name={"postSubjectInput"}
                                             error={this.state.postSubjectInputEmptySubmit}
                                             type="text"
                                             value={this.state.postSubjectInput}
                                             placeholder="Subject"
                                             id="postSubjectInput"
-                                                onChange={this.handleInputChange} />,
+                                            onChange={this.handleInputChange} />
                                         <TextArea key={"postContentInput"}
+                                            style={{display: this.state.previewEnabled ? "none" : ""}}
                                             name={"postContentInput"}
                                             className={this.state.postContentInputEmptySubmit ? "form-textarea-required" : ""}
                                             value={this.state.postContentInput}
@@ -125,7 +127,6 @@ class NewPost extends Component {
                                             id="postContentInput"
                                             onChange={this.handleInputChange}
                                             rows={4} autoHeight />
-                                            ]}
                                         <br/><br/>
                                         <Button.Group>
                                             <Button key="submit"
@@ -159,12 +160,6 @@ class NewPost extends Component {
         );
     }
 
-    componentDidUpdate(prevProps, prevState){
-        if (!this.state.previewEnabled && prevState.previewEnabled){
-            this.newPostOuterRef.current.scrollIntoView(true);
-        }
-    }
-
     componentDidMount(){
         this.newPostOuterRef.current.scrollIntoView(true);
     }

src/components/Post.js

@@ -125,9 +125,11 @@ class Post extends Component {
                                     <Icon name='chevron down' />
                                 </Button>
                                 <Button icon size='mini'
-                                    onClick={() => { this.context.router.push("/topic/"
+                                    onClick={this.props.blockchainData[0].returnData
+                                        ? () => { this.context.router.push("/topic/"
                                             + this.props.blockchainData[0].returnData[4] + "/"
-                                        + this.props.postID)}}>
+                                            + this.props.postID)}
+                                        : () => {}}>
                                     <Icon name='linkify' />
                                 </Button>
                             </Grid.Column>

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());
+            }
         }
     }
 }

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;
         }
     }
 
@@ -63,6 +76,28 @@ class UsernameFormContainer extends Component {
         }
     }
 
+    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 {
                         </Form.Field>
                         <Message
                             error
-                            header='Data Incomplete'
+                            header={this.state.errorHeader}
-                            content='You need to provide a username to sign up for an account.'
+                            content={this.state.errorMessage}
                         />
                         <Button type='submit'>{buttonText}</Button>
                     </Form>
-                    <Dimmer active={this.state.signingUp} page>
+                    <Dimmer active={this.state.signingUp || this.checkingUsernameTaken} page>
                         <Header as='h2' inverted>
-                            <Loader size='large'>Magic elves are processing your noble request.</Loader>
+                            <Loader size='large'>Magic elfs are processing your nobel request.</Loader>
                         </Header>
                     </Dimmer>
                 </div>
@@ -109,7 +144,6 @@ UsernameFormContainer.contextTypes = {
 
 const mapStateToProps = state => {
     return {
-        contracts: state.contracts,
         user: state.user
     }
 };