enhanced tagArea

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

@@ -18,7 +18,8 @@ export default class TagAreaView extends Component {
     super(props);
     this.state = {
       currentText: '',
-      chips: [{}],
+      chips: [' '],
+      chipsCount: props.chipsCount || 5,
     };
   }
 
@@ -26,47 +27,48 @@ 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) {
-    //   this._handleTagAdded();
-    // }
+    if (text.indexOf(' ') > 0 && text) {
+      this._handleTagAdded();
+    }
 
     if (!text && i !== 0) {
       this._handleTagRemove(i);
     }
-
-    // if (onChange) {
-    //   this.props.onChange(chips);
-    // }
   };
 
-  _handleOnBlur = () => {
-    this._handleTagAdded();
+  _handleOnBlur = (i) => {
+    this._handleTagAdded(i);
   };
 
-  _handleTagAdded = () => {
-    const { currentText, chips } = this.state;
+  _handleTagAdded = (i) => {
+    const { currentText, chips, chipsCount } = this.state;
+    const { handleTagChanged } = this.props;
 
-    if (currentText && chips.length < 5) {
+    if (currentText && currentText.trim() && chips && chips.length < chipsCount) {
       this.setState({
         chips: [...chips, currentText.trim()],
+        currentText: '',
       });
+    }
 
-      this.props.onChange(chips);
+    if (handleTagChanged && chips.length < chipsCount + 1) {
+      handleTagChanged([...chips, currentText.trim()]);
     }
   };
 
   _handleTagRemove = (i) => {
     const { chips } = this.state;
+    const { handleTagChanged } = this.props;
 
     this.setState({
       chips: chips.filter((_, _i) => _i !== i),
     });
-    this.props.onChange(chips);
+
+    if (handleTagChanged) {
+      handleTagChanged(chips.filter((_, _i) => _i !== i));
+    }
   };
 
   render() {
@@ -90,7 +92,7 @@ export default class TagAreaView extends Component {
               autoFocus={i !== 0 && chips.length - 1 === i}
               multiline={false}
               handleOnChange={text => this._handleOnChange(text, i)}
-              handleOnBlur={() => this._handleOnBlur()}
+              handleOnBlur={() => this._handleOnBlur(i)}
               blurOnSubmit
               autoCapitalize="none"
               {...this.props}

src/screens/editor/container/editorContainer.js

@@ -7,7 +7,9 @@ import React, { Component } from 'react';
 // Constants
 
 // Utilities
-
+// import { postContent } from '../../providers/steem/dsteem';
+// import { getUserData, getAuthStatus } from '../../realm/realm';
+// import { decryptKey } from '../../utils/crypto';
 // Component
 import { EditorScreen } from '../screen/editorScreen';
 
@@ -27,6 +29,49 @@ class ExampleContainer extends Component {
 
   // Component Functions
 
+  // generatePermlink = () => {
+  //   let title;
+
+  //   title = this.state.title
+  //     .replace(/[^\w\s]/gi, '')
+  //     .replace(/\s\s+/g, '-')
+  //     .replace(/\s/g, '-')
+  //     .toLowerCase();
+  //   title = `${title}-id-${Math.random()
+  //     .toString(36)
+  //     .substr(2, 16)}`;
+
+  //   return title;
+  // };
+
+  // submitPost = async () => {
+  //   let userData;
+  //   let postingKey;
+
+  //   await getUserData().then((res) => {
+  //     userData = Array.from(res);
+  //     postingKey = decryptKey(userData[0].postingKey, 'pinCode');
+  //   });
+
+  //   post = {
+  //     body: this.state.body,
+  //     title: this.state.title,
+  //     author: userData[0].username,
+  //     permlink: this.generatePermlink(),
+  //     tags: this.state.tags,
+  //   };
+
+  //   console.log(post);
+
+  //   postContent(post, postingKey)
+  //     .then((result) => {
+  //       console.log(result);
+  //     })
+  //     .catch((error) => {
+  //       console.log(error);
+  //     });
+  // };
+
   render() {
     return <EditorScreen />;
   }

src/screens/editor/screen/editorScreen.js

@@ -26,6 +26,7 @@ export class EditorScreen extends Component {
       wordsCount: null,
       formFields: {},
       isFormValid: false,
+      tags: [],
     };
   }
 
@@ -77,6 +78,13 @@ export class EditorScreen extends Component {
     this._handleIsFormValid();
   };
 
+  _handleOnTagAdded = (tags) => {
+    this.setState({
+      tags,
+    });
+    console.log(tags);
+  };
+
   render() {
     const { isPreviewActive, wordsCount, isFormValid } = this.state;
 
@@ -95,7 +103,7 @@ export class EditorScreen extends Component {
           isFormValid={isFormValid}
         >
           <TitleArea componentID="title-area" />
-          <TagArea componentID="tag-area" />
+          <TagArea componentID="tag-area" handleTagChanged={this._handleOnTagAdded} />
           <TextArea handleOnTextChange={this._setWordsCount} componentID="text-area" />
         </PostForm>
       </View>