validation added

package-lock.json

@@ -7653,9 +7653,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.10",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
-      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
     },
     "lodash-es": {
       "version": "4.17.11",
@@ -8573,6 +8573,11 @@
         "tween-functions": "^1.0.1"
       },
       "dependencies": {
+        "lodash": {
+          "version": "4.17.10",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+          "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
+        },
         "react-native-keyboard-aware-scroll-view": {
           "version": "0.5.0",
           "resolved": "http://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.5.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "@esteemapp/react-native-tags": "^1.3.1",
     "crypto-js": "^3.1.9-1",
     "dsteem": "^0.10.1",
+    "lodash": "^4.17.11",
     "moment": "^2.22.2",
     "native-base": "^2.8.1",
     "react": "^16.5.0",

src/components/editorElements/tagArea/view/tagAreaView.js

@@ -26,6 +26,9 @@ export default class TagAreaView extends Component {
 
   // Component Functions
   _handleOnChange = (text, i) => {
+    const { onChange } = this.props;
+    const { chips } = this.state;
+
     this.setState({ currentText: text.trim() });
 
     // if (text.indexOf(' ') > 0 && text) {
@@ -35,6 +38,10 @@ export default class TagAreaView extends Component {
     if (!text && i !== 0) {
       this._handleTagRemove(i);
     }
+
+    // if (onChange) {
+    //   this.props.onChange(chips);
+    // }
   };
 
   _handleOnBlur = () => {
@@ -48,6 +55,8 @@ export default class TagAreaView extends Component {
       this.setState({
         chips: [...chips, currentText.trim()],
       });
+
+      this.props.onChange(chips);
     }
   };
 
@@ -57,6 +66,7 @@ export default class TagAreaView extends Component {
     this.setState({
       chips: chips.filter((_, _i) => _i !== i),
     });
+    this.props.onChange(chips);
   };
 
   render() {

src/components/editorElements/titleArea/view/titleAreaView.js

@@ -22,22 +22,32 @@ export default class TitleAreaView extends Component {
   // Component Life Cycles
 
   // Component Functions
+  _handleOnChange = (text) => {
+    const { onChange, handleIsValid, componentID } = this.props;
+    if (onChange) {
+      onChange(text);
+    }
+
+    if (handleIsValid) {
+      handleIsValid(componentID, !!(text && text.length));
+    }
+  };
 
   render() {
-    const { onChange, value, isPreviewActive } = this.props;
+    const { value, isPreviewActive } = this.props;
 
     return (
       <View style={globalStyles.containerHorizontal16}>
         <TextInput
           style={styles.textInput}
-          placeholderTextColor="c1c5c7"
+          placeholderTextColor="#c1c5c7"
           editable={!isPreviewActive}
           maxLength={250}
           placeholder="Title"
           multiline
           autoFocus
           numberOfLines={4}
-          onChangeText={text => onChange && onChange(text)}
+          onChangeText={text => this._handleOnChange(text)}
           value={value}
           {...this.props}
         />

src/components/editorHeader/view/editorHeaderStyles.js

@@ -36,7 +36,6 @@ export default EStyleSheet.create({
   },
   textButtonEnable: {
     color: '$primaryBlue',
-    fontWeight: 'bold',
   },
   textButtonWrapper: {
     justifyContent: 'center',

src/components/markdownEditor/view/markdownEditorView.js

@@ -27,13 +27,21 @@ export default class MarkdownEditorView extends Component {
   }
 
   changeText = (input) => {
-    const { handleOnTextChange } = this.props;
+    const {
+      onChange, handleOnTextChange, handleIsValid, componentID,
+    } = this.props;
 
     this.setState({ text: input });
 
-    if (handleOnTextChange) {
-      handleOnTextChange(input);
+    if (onChange) {
+      onChange(input);
     }
+
+    if (handleIsValid) {
+      handleIsValid(componentID, !!(input && input.length));
+    }
+
+    handleOnTextChange && handleOnTextChange(input);
   };
 
   _handleOnSelectionChange = (event) => {
@@ -115,9 +123,9 @@ export default class MarkdownEditorView extends Component {
         {!isPreviewActive ? (
           <TextInput
             multiline
-            onChangeText={this.changeText}
+            onChangeText={text => this.changeText(text)}
             onSelectionChange={this._handleOnSelectionChange}
-            placeHolder="What would you like to write about today?"
+            placeholder="What would you like to write about today?"
             placeholderTextColor="#c1c5c7"
             ref={textInput => (this.textInput = textInput)}
             selection={selection}

src/components/postForm/view/postFormView.js

@@ -1,6 +1,11 @@
 import React, { Component, Fragment } from 'react';
 
 class PostFormView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
   _handleOnSubmitEditing = (returnKeyType = null, inputElement = null) => {
     const { handleOnSubmit, isFormValid } = this.props;
 
@@ -12,6 +17,12 @@ class PostFormView extends Component {
     }
   };
 
+  _handleOnChange = (componentID, value, isValid = null) => {
+    const { handleFormUpdate } = this.props;
+
+    handleFormUpdate(componentID, value, !!isValid || !!value);
+  };
+
   render() {
     const { children, isFormValid, isPreviewActive } = this.props;
 
@@ -21,6 +32,7 @@ class PostFormView extends Component {
           if (child) {
             return React.cloneElement(child, {
               onSubmitEditing: item => this._handleOnSubmitEditing(child.props.returnKeyType, item),
+              onChange: value => this._handleOnChange(child.props.componentID, value),
               returnKeyType: isFormValid ? 'done' : 'next',
               isPreviewActive,
             });

src/screens/editor/screen/editorScreen.js

@@ -24,6 +24,8 @@ export class EditorScreen extends Component {
     this.state = {
       isPreviewActive: false,
       wordsCount: null,
+      formFields: {},
+      isFormValid: false,
     };
   }
 
@@ -36,8 +38,8 @@ export class EditorScreen extends Component {
     this.setState({ isPreviewActive: !isPreviewActive });
   };
 
-  _handleOnTextChange = (text) => {
-    const _wordsCount = getWordsCount(text);
+  _setWordsCount = (content) => {
+    const _wordsCount = getWordsCount(content);
     const { wordsCount } = this.state;
 
     if (_wordsCount !== wordsCount) {
@@ -47,8 +49,36 @@ export class EditorScreen extends Component {
 
   _handleOnSubmit = () => {};
 
+  _handleIsFormValid = () => {
+    const { formFields } = this.state;
+
+    this.setState({
+      isFormValid:
+        formFields['title-area']
+        && formFields['text-area']
+        && formFields['tag-area']
+        && formFields['title-area'].isValid
+        && formFields['text-area'].isValid
+        && formFields['tag-area'].isValid,
+    });
+  };
+
+  _handleFormUpdate = (componentID, content, isValid) => {
+    const { formFields } = this.state;
+    const newFormFields = formFields;
+
+    newFormFields[componentID] = {
+      content,
+      isValid,
+    };
+
+    this.setState({ formFields: newFormFields });
+
+    this._handleIsFormValid();
+  };
+
   render() {
-    const { isPreviewActive, wordsCount } = this.state;
+    const { isPreviewActive, wordsCount, isFormValid } = this.state;
 
     return (
       <View style={globalStyles.defaultContainer}>
@@ -56,16 +86,17 @@ export class EditorScreen extends Component {
           isPreviewActive={isPreviewActive}
           quickTitle={wordsCount > 0 && `${wordsCount} words`}
           handleOnPressPreviewButton={this._handleOnPressPreviewButton}
-          isFormValid
+          isFormValid={isFormValid}
         />
         <PostForm
+          handleFormUpdate={this._handleFormUpdate}
           handleOnSubmit={this._handleOnSubmit}
           isPreviewActive={isPreviewActive}
-          isFormValid
+          isFormValid={isFormValid}
         >
-          <TitleArea />
-          <TagArea />
-          <TextArea handleOnTextChange={this._handleOnTextChange} />
+          <TitleArea componentID="title-area" />
+          <TagArea componentID="tag-area" />
+          <TextArea handleOnTextChange={this._setWordsCount} componentID="text-area" />
         </PostForm>
       </View>
     );

src/utils/editor.js

@@ -1 +1 @@
-export const getWordsCount = text => (text ? text.replace(/^\s+|\s+$/g, '').split(/\s+/).length : 0);
+export const getWordsCount = text => (text && typeof text === 'string' ? text.replace(/^\s+|\s+$/g, '').split(/\s+/).length : 0);