added checcs for save draft

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

@@ -18,12 +18,21 @@ export default class TagAreaView extends Component {
     super(props);
     this.state = {
       currentText: '',
-      chips: [' '],
+      chips: [' ', props.draftChips],
       chipsCount: props.chipsCount || 5,
     };
   }
 
   // Component Life Cycles
+  componentWillReceiveProps(nextProps) {
+    const { draftChips } = this.props;
+
+    // if (nextProps.draftChips && nextProps.draftChips !== draftChips) {
+    //   nextProps.draftChips.forEach((chip, i) => {
+    //     this._handleTagAdded(i, chip);
+    //   });
+    // }
+  }
 
   // Component Functions
   _handleOnChange = (text, i) => {
@@ -42,19 +51,20 @@ export default class TagAreaView extends Component {
     this._handleTagAdded(i);
   };
 
-  _handleTagAdded = (i) => {
+  _handleTagAdded = (i = null, text = null) => {
     const { currentText, chips, chipsCount } = this.state;
     const { handleTagChanged } = this.props;
+    const _currentText = (currentText && currentText.trim()) || text;
 
-    if (currentText && currentText.trim() && chips && chips.length < chipsCount) {
+    if (_currentText && chips && chips.length < chipsCount) {
       this.setState({
-        chips: [...chips, currentText.trim()],
+        chips: [...chips, _currentText],
         currentText: '',
       });
     }
 
     if (handleTagChanged && chips.length < chipsCount + 1) {
-      handleTagChanged([...chips, currentText.trim()]);
+      handleTagChanged([...chips, _currentText]);
     }
   };
 
@@ -72,9 +82,9 @@ export default class TagAreaView extends Component {
   };
 
   render() {
-    const { isPreviewActive } = this.props;
+    const { isPreviewActive, draftChips } = this.props;
     const { chips } = this.state;
-
+    console.log(draftChips);
     return (
       <View style={globalStyles.containerHorizontal16}>
         <View style={styles.tagWrapper}>
@@ -94,6 +104,7 @@ export default class TagAreaView extends Component {
               handleOnChange={text => this._handleOnChange(text, i)}
               handleOnBlur={() => this._handleOnBlur(i)}
               blurOnSubmit
+              value={chip && chip}
               autoCapitalize="none"
               {...this.props}
             />

src/components/editorHeader/view/editorHeaderStyles.js

@@ -18,6 +18,9 @@ export default EStyleSheet.create({
     color: '$iconColor',
     marginLeft: 10,
   },
+  savedIcon: {
+    color: '#a1c982',
+  },
   closeIcon: {
     fontSize: 28,
     color: '$iconColor',

src/components/editorHeader/view/editorHeaderView.js

@@ -70,7 +70,10 @@ class EditorHeaderView extends Component {
       handleOnPressClose,
       isHasSearch,
       isPostSending,
-      handleOnPressSaveButton,
+      handleOnSaveButtonPress,
+      isDraftSaving,
+      isDraftSaved,
+      isLoggedIn,
     } = this.props;
     const { isInputVisible } = this.state;
     return (
@@ -84,13 +87,20 @@ class EditorHeaderView extends Component {
               onPress={() => (isModalHeader ? handleOnPressClose() : handleOnPressBackButton())}
             />
             {isHasIcons && (
-              <IconButton
-                iconStyle={styles.saveIcon}
-                iconType="FontAwesome"
-                name="save"
-                onPress={() => handleOnPressSaveButton && handleOnPressSaveButton()}
-              />
+              <View>
+                {!isDraftSaving ? (
+                  <IconButton
+                    iconStyle={[styles.saveIcon, isDraftSaved && styles.savedIcon]}
+                    iconType="FontAwesome"
+                    name="save"
+                    onPress={() => handleOnSaveButtonPress && handleOnSaveButtonPress()}
+                  />
+                ) : (
+                  <ActivityIndicator style={styles.textButtonWrapper} />
+                )}
+              </View>
             )}
+
             {!isInputVisible && (
               <Text style={[title && styles.title, quickTitle && styles.quickTitle]}>
                 {quickTitle || title}
@@ -158,7 +168,7 @@ class EditorHeaderView extends Component {
                 <TextButton
                   textStyle={[
                     styles.textButton,
-                    isFormValid ? styles.textButtonEnable : styles.textButtonDisable,
+                    isFormValid && isLoggedIn ? styles.textButtonEnable : styles.textButtonDisable,
                   ]}
                   onPress={isFormValid && this._handleOnPress}
                   style={styles.textButtonWrapper}

src/realm/realm.js

@@ -3,6 +3,7 @@ import Realm from 'realm';
 // CONSTANTS
 const USER_SCHEMA = 'user';
 const AUTH_SCHEMA = 'auth';
+const DRAFT_SCHEMA = 'draft';
 
 const userSchema = {
   name: USER_SCHEMA,
@@ -18,6 +19,16 @@ const userSchema = {
   },
 };
 
+const draftSchema = {
+  name: DRAFT_SCHEMA,
+  properties: {
+    title: { type: 'string' },
+    tags: { type: 'string' },
+    text: { type: 'string' },
+    username: { type: 'string' },
+  },
+};
+
 const authSchema = {
   name: AUTH_SCHEMA,
   properties: {
@@ -27,7 +38,7 @@ const authSchema = {
   },
 };
 
-const realm = new Realm({ path: 'esteem.realm', schema: [userSchema, authSchema] });
+const realm = new Realm({ path: 'esteem.realm', schema: [userSchema, authSchema, draftSchema] });
 
 // TODO: This is getting ALL user data, we should change this method with getUserDataWithUsername
 export const getUserData = () => new Promise((resolve, reject) => {
@@ -86,6 +97,39 @@ export const updateUserData = userData => new Promise((resolve, reject) => {
   }
 });
 
+export const setDraftPost = (form, username) => new Promise((resolve, reject) => {
+  try {
+    const draft = realm.objects(DRAFT_SCHEMA).filtered('username = $0', username);
+    realm.write(() => {
+      if (Array.from(draft).length > 0) {
+        draft[0].title = form.title;
+        draft[0].tags = form.tags;
+        draft[0].text = form.text;
+        resolve(true);
+      } else {
+        realm.create(DRAFT_SCHEMA, {
+          username,
+          title: form.title,
+          tags: form.tags,
+          text: form.text,
+        });
+        resolve(true);
+      }
+    });
+  } catch (error) {
+    reject(error);
+  }
+});
+
+export const getDraftPost = username => new Promise((resolve, reject) => {
+  try {
+    const draft = Array.from(realm.objects(DRAFT_SCHEMA).filtered('username = $0', username));
+    resolve(draft[0]);
+  } catch (error) {
+    reject(error);
+  }
+});
+
 // TODO: This method deleting ALL users. This should delete just a user.
 export const removeUserData = () => new Promise((resolve, reject) => {
   setAuthStatus({ isLoggedIn: false }).then(() => {

src/screens/editor/container/editorContainer.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 // Services and Actions
 import { postContent } from '../../../providers/steem/dsteem';
-import { getUserData } from '../../../realm/realm';
+import { getUserData, setDraftPost, getDraftPost } from '../../../realm/realm';
 import { getDigitPinCode } from '../../../providers/steem/auth';
 
 // Middleware
@@ -29,15 +29,59 @@ class ExampleContainer extends Component {
     super(props);
     this.state = {
       isPostSending: false,
+      isDraftSaving: false,
+      isDraftSaved: false,
+      draftPost: null,
     };
   }
 
   // Component Life Cycle Functions
 
   // Component Functions
+  async componentDidMount() {
+    const { currentAccount } = this.props;
+    const username = currentAccount && currentAccount.name ? currentAccount.name : '';
 
-  _handleOnPressSaveButton = () => {
-    alert('pressed me ! ');
+    await getDraftPost(username)
+      .then((result) => {
+        console.log(result);
+        this.setState({
+          draftPost: { text: result.text, title: result.title, tags: result.tags.split(',') },
+        });
+        console.log({ text: result.text, title: result.title, tags: result.tags.split(',') });
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
+
+  _handleOnSaveButtonPress = (form) => {
+    const { isDraftSaved } = this.state;
+    if (!isDraftSaved) {
+      const { currentAccount } = this.props;
+      const title = form.formFields['title-area'] ? form.formFields['title-area'].content : '';
+      const text = form.formFields['text-area'] ? form.formFields['text-area'].content : '';
+      const tags = form.tags ? form.tags.toString() : '';
+      const username = currentAccount && currentAccount.name ? currentAccount.name : '';
+      const formProperties = {
+        title,
+        tags,
+        text,
+      };
+
+      this.setState({ isDraftSaving: true });
+
+      setDraftPost(formProperties, username)
+        .then(() => {
+          this.setState({
+            isDraftSaving: false,
+            isDraftSaved: true,
+          });
+        })
+        .catch((error) => {
+          alert(error);
+        });
+    }
   };
 
   _submitPost = async (form) => {
@@ -81,14 +125,25 @@ class ExampleContainer extends Component {
     this._submitPost(form);
   };
 
+  _handleFormChanged = () => {
+    const { isDraftSaved } = this.state;
+    isDraftSaved && this.setState({ isDraftSaved: false });
+  };
+
   render() {
     const { isLoggedIn } = this.props;
-    const { isPostSending } = this.state;
+    const {
+      isPostSending, isDraftSaving, isDraftSaved, draftPost,
+    } = this.state;
 
     return (
       <EditorScreen
-        handleOnPressSaveButton={this._handleOnPressSaveButton}
+        handleOnSaveButtonPress={this._handleOnSaveButtonPress}
         isPostSending={isPostSending}
+        handleFormChanged={this._handleFormChanged}
+        isDraftSaving={isDraftSaving}
+        isDraftSaved={isDraftSaved}
+        draftPost={draftPost}
         isLoggedIn={isLoggedIn}
         handleOnSubmit={this._handleSubmit}
       />
@@ -98,6 +153,7 @@ class ExampleContainer extends Component {
 
 const mapStateToProps = state => ({
   isLoggedIn: state.application.isLoggedIn,
+  currentAccount: state.account.currentAccount,
 });
 
 export default connect(mapStateToProps)(ExampleContainer);

src/screens/editor/screen/editorScreen.js

@@ -48,6 +48,13 @@ export class EditorScreen extends Component {
     }
   };
 
+  _handleOnSaveButtonPress = () => {
+    const { handleOnSaveButtonPress } = this.props;
+    const { formFields, tags } = this.state;
+
+    handleOnSaveButtonPress({ formFields, tags });
+  };
+
   _handleOnSubmit = () => {
     const { handleOnSubmit } = this.props;
     const { formFields, tags } = this.state;
@@ -72,6 +79,7 @@ export class EditorScreen extends Component {
   };
 
   _handleFormUpdate = (componentID, content, isValid) => {
+    const { handleFormChanged } = this.props;
     const { formFields } = this.state;
     const newFormFields = formFields;
 
@@ -80,6 +88,8 @@ export class EditorScreen extends Component {
       isValid,
     };
 
+    handleFormChanged();
+
     this.setState({ formFields: newFormFields });
 
     this._handleIsFormValid();
@@ -90,14 +100,23 @@ export class EditorScreen extends Component {
   };
 
   render() {
-    const { isPreviewActive, wordsCount, isFormValid } = this.state;
-    const { isLoggedIn, isPostSending, handleOnPressSaveButton } = this.props;
+    const {
+      isPreviewActive, wordsCount, isFormValid, formFields,
+    } = this.state;
+    const {
+      isLoggedIn, isPostSending, isDraftSaving, isDraftSaved, draftPost,
+    } = this.props;
+    const title = (formFields['title-area'] && formFields['title-area'].content)
+      || (draftPost && draftPost.title);
+    const text = (formFields['text-area'] && formFields['text-area'].content) || (draftPost && draftPost.text);
 
     return (
       <View style={globalStyles.defaultContainer}>
         <EditorHeader
-          handleOnPressSaveButton={handleOnPressSaveButton}
+          handleOnSaveButtonPress={this._handleOnSaveButtonPress}
           isPostSending={isPostSending}
+          isDraftSaving={isDraftSaving}
+          isDraftSaved={isDraftSaved}
           isPreviewActive={isPreviewActive}
           quickTitle={wordsCount > 0 && `${wordsCount} words`}
           handleOnPressPreviewButton={this._handleOnPressPreviewButton}
@@ -112,9 +131,13 @@ export class EditorScreen extends Component {
           isPreviewActive={isPreviewActive}
           isFormValid={isFormValid}
         >
-          <TitleArea componentID="title-area" />
-          <TagArea componentID="tag-area" handleTagChanged={this._handleOnTagAdded} />
-          <TextArea handleOnTextChange={this._setWordsCount} componentID="text-area" />
+          <TitleArea value={title} componentID="title-area" />
+          <TagArea
+            draftChips={draftPost && draftPost.tags}
+            componentID="tag-area"
+            handleTagChanged={this._handleOnTagAdded}
+          />
+          <TextArea value={text} handleOnTextChange={this._setWordsCount} componentID="text-area" />
         </PostForm>
       </View>
     );