From 6d0553b83a67491ffa5396a5e3acd7b481892608 Mon Sep 17 00:00:00 2001
From: Apostolof <apotwohd@gmail.com>
Date: Thu, 5 Jul 2018 18:37:34 +0300
Subject: [PATCH] Add warning for taken username when signing up, Fix scroll on
 post preview, Add progress-bar in profile view

---
 src/components/NavBar.js                |  2 +-
 src/components/NewPost.js               | 49 +++++++++++------------
 src/components/Post.js                  |  8 ++--
 src/containers/ProfileContainer.js      | 11 +++++-
 src/containers/UsernameFormContainer.js | 52 ++++++++++++++++++++-----
 5 files changed, 81 insertions(+), 41 deletions(-)

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 {
                     ? <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>
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 {
                                     </strong></span>
                                 </div>
                                 <div className="post-content">
+                                    <div style={{display: this.state.previewEnabled ? "block" : "none"}}>
+                                        <ReactMarkdown source={this.state.postContentInput}
+                                            className="markdown-preview" />
+                                    </div>
                                     <Form className="topic-form">
-                                        {this.state.previewEnabled
-                                            ? <ReactMarkdown source={this.state.postContentInput}
-                                                className="markdown-preview" />
-                                            : [
-                                            <Form.Input key={"postSubjectInput"}
-                                                name={"postSubjectInput"}
-                                                error={this.state.postSubjectInputEmptySubmit}
-                                                type="text"
-                                                value={this.state.postSubjectInput}
-                                                placeholder="Subject"
-                                                id="postSubjectInput"
-                                                onChange={this.handleInputChange} />,
-                                            <TextArea key={"postContentInput"}
-                                                name={"postContentInput"}
-                                                className={this.state.postContentInputEmptySubmit ? "form-textarea-required" : ""}
-                                                value={this.state.postContentInput}
-                                                placeholder="Post"
-                                                id="postContentInput"
-                                                onChange={this.handleInputChange}
-                                                rows={4} autoHeight />
-                                            ]}
+                                        <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} />
+                                        <TextArea key={"postContentInput"}
+                                            style={{display: this.state.previewEnabled ? "none" : ""}}
+                                            name={"postContentInput"}
+                                            className={this.state.postContentInputEmptySubmit ? "form-textarea-required" : ""}
+                                            value={this.state.postContentInput}
+                                            placeholder="Post"
+                                            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);
     }
diff --git a/src/components/Post.js b/src/components/Post.js
index d6bbd90..9077e1a 100644
--- a/src/components/Post.js
+++ b/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/"
-                                        + this.props.blockchainData[0].returnData[4] + "/"
-                                        + this.props.postID)}}>
+                                    onClick={this.props.blockchainData[0].returnData
+                                        ? () => { this.context.router.push("/topic/"
+                                            + this.props.blockchainData[0].returnData[4] + "/"
+                                            + this.props.postID)}
+                                        : () => {}}>
                                     <Icon name='linkify' />
                                 </Button>
                             </Grid.Column>
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 {
                         </Form.Field>
                         <Message
                             error
-                            header='Data Incomplete'
-                            content='You need to provide a username to sign up for an account.'
+                            header={this.state.errorHeader}
+                            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
     }
 };