fixed draft bugs and editor

This commit is contained in:
u-e 2019-05-15 00:00:15 +03:00
parent b362a90d33
commit 2bbef31991
5 changed files with 68 additions and 49 deletions

View File

@ -37,6 +37,7 @@
"dsteem": "^0.10.1", "dsteem": "^0.10.1",
"intl": "^1.2.5", "intl": "^1.2.5",
"jsc-android": "^236355.1.1", "jsc-android": "^236355.1.1",
"lodash": "^4.17.11",
"moment": "^2.22.2", "moment": "^2.22.2",
"react": "^16.7.0", "react": "^16.7.0",
"react-intl": "^2.7.2", "react-intl": "^2.7.2",
@ -69,8 +70,8 @@
"remarkable": "^1.7.1", "remarkable": "^1.7.1",
"rn-placeholder": "^1.3.2", "rn-placeholder": "^1.3.2",
"speakingurl": "^14.0.1", "speakingurl": "^14.0.1",
"steemconnect": "^2.0.1", "stacktrace-parser": "0.1.4",
"stacktrace-parser": "0.1.4" "steemconnect": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",

View File

@ -97,6 +97,7 @@ class BasicHeaderView extends Component {
title, title,
} = this.props; } = this.props;
const { isInputVisible, datePickerValue } = this.state; const { isInputVisible, datePickerValue } = this.state;
return ( return (
<SafeAreaView style={styles.safeArea}> <SafeAreaView style={styles.safeArea}>
<View style={styles.container}> <View style={styles.container}>

View File

@ -43,9 +43,11 @@ export default class TagAreaView extends Component {
// Component Functions // Component Functions
_handleOnChange = (text, i) => { _handleOnChange = (text, i) => {
this.setState({ currentText: text.replace(/\s/g, '') }); this.setState({ currentText: text.replace(/\s/g, '') });
if (text.indexOf(' ') > 0 && text) { if (text.indexOf(' ') > 0 && text) {
this._handleTagAdded(); this._handleTagAdded();
} }
if (!text) { if (!text) {
this._handleTagRemove(i); this._handleTagRemove(i);
} }

View File

@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import { injectIntl } from 'react-intl'; import { injectIntl } from 'react-intl';
import { Alert, AsyncStorage } from 'react-native'; import { Alert, AsyncStorage } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker'; import ImagePicker from 'react-native-image-crop-picker';
import { get } from 'lodash';
// Services and Actions // Services and Actions
import { Buffer } from 'buffer'; import { Buffer } from 'buffer';
@ -122,6 +123,7 @@ class EditorContainer extends Component {
_getDraft = async (username, isReply) => { _getDraft = async (username, isReply) => {
if (isReply) { if (isReply) {
const draftReply = await AsyncStorage.getItem('temp-reply'); const draftReply = await AsyncStorage.getItem('temp-reply');
if (draftReply) { if (draftReply) {
this.setState({ this.setState({
draftPost: { body: draftReply }, draftPost: { body: draftReply },
@ -137,9 +139,6 @@ class EditorContainer extends Component {
tags: result.tags.split(','), tags: result.tags.split(','),
}, },
}); });
})
.catch(() => {
// alert(error);
}); });
} }
}; };
@ -223,7 +222,7 @@ class EditorContainer extends Component {
const { intl } = this.props; const { intl } = this.props;
this.setState({ isCameraOrPickerOpen: false }); this.setState({ isCameraOrPickerOpen: false });
if (error.code === 'E_PERMISSION_MISSING') { if (get(error, 'code') === 'E_PERMISSION_MISSING') {
Alert.alert( Alert.alert(
intl.formatMessage({ intl.formatMessage({
id: 'alert.permission_denied', id: 'alert.permission_denied',
@ -235,28 +234,30 @@ class EditorContainer extends Component {
} }
}; };
// Media select functions <- END ->
_saveDraftToDB = (fields) => { _saveDraftToDB = (fields) => {
const { isDraftSaved, draftId } = this.state; const { isDraftSaved, draftId } = this.state;
if (!isDraftSaved) { if (!isDraftSaved) {
const { currentAccount } = this.props; const { currentAccount } = this.props;
const username = currentAccount && currentAccount.name ? currentAccount.name : ''; const username = get(currentAccount, 'name', '');
let draftField;
this.setState({ isDraftSaving: true }); this.setState({ isDraftSaving: true });
const draftField = { if (fields) {
draftField = {
...fields, ...fields,
tags: fields.tags.join(' '), tags: fields.tags.join(' '),
username, username,
}; };
}
if (draftId) { if (draftId && draftField) {
updateDraft({ ...draftField, draftId }).then(() => { updateDraft({ ...draftField, draftId }).then(() => {
this.setState({ this.setState({
isDraftSaved: true, isDraftSaved: true,
}); });
}); });
} else { } else if (draftField) {
addDraft(draftField).then((response) => { addDraft(draftField).then((response) => {
this.setState({ this.setState({
isDraftSaved: true, isDraftSaved: true,
@ -267,6 +268,7 @@ class EditorContainer extends Component {
this.setState({ this.setState({
isDraftSaving: false, isDraftSaving: false,
isDraftSaved,
}); });
} }
}; };
@ -346,15 +348,6 @@ class EditorContainer extends Component {
0, 0,
) )
.then(() => { .then(() => {
// Alert.alert(
// intl.formatMessage({
// id: 'alert.success',
// }),
// intl.formatMessage({
// id: 'alert.success_shared',
// }),
// );
dispatch( dispatch(
toastNotification( toastNotification(
intl.formatMessage({ intl.formatMessage({
@ -488,8 +481,10 @@ class EditorContainer extends Component {
_handleSubmitSuccess = () => { _handleSubmitSuccess = () => {
const { navigation } = this.props; const { navigation } = this.props;
if (navigation) {
navigation.goBack(); navigation.goBack();
navigation.state.params.fetchPost(); navigation.state.params.fetchPost();
}
}; };
_handleOnBackPress = () => { _handleOnBackPress = () => {
@ -526,7 +521,7 @@ class EditorContainer extends Component {
}; };
_setScheduledPost = (data) => { _setScheduledPost = (data) => {
const { dispatch } = this.props; const { dispatch, intl } = this.props;
schedule( schedule(
data.author, data.author,
@ -542,10 +537,9 @@ class EditorContainer extends Component {
this.setState({ isPostSending: false }); this.setState({ isPostSending: false });
dispatch( dispatch(
toastNotification( toastNotification(
// intl.formatMessage({ intl.formatMessage({
// id: 'alert.copied', id: 'alert.success',
// }), }),
'Scheduled',
), ),
); );
}).catch(() => { }).catch(() => {
@ -553,6 +547,17 @@ class EditorContainer extends Component {
}); });
} }
_initialEditor = () => {
const { currentAccount: { name } } = this.props;
setDraftPost(
{ title: '', body: '', tags: '' },
name,
);
this.setState({ uploadedImage: null });
}
render() { render() {
const { isLoggedIn, isDarkTheme } = this.props; const { isLoggedIn, isDarkTheme } = this.props;
const { const {
@ -579,6 +584,7 @@ class EditorContainer extends Component {
handleOnBackPress={this._handleOnBackPress} handleOnBackPress={this._handleOnBackPress}
handleOnImagePicker={this._handleRoutingAction} handleOnImagePicker={this._handleRoutingAction}
handleOnSubmit={this._handleSubmit} handleOnSubmit={this._handleSubmit}
initialEditor={this._initialEditor}
isCameraOrPickerOpen={isCameraOrPickerOpen} isCameraOrPickerOpen={isCameraOrPickerOpen}
isDarkTheme={isDarkTheme} isDarkTheme={isDarkTheme}
isDraftSaved={isDraftSaved} isDraftSaved={isDraftSaved}

View File

@ -1,6 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { View } from 'react-native'; import { View } from 'react-native';
import { injectIntl } from 'react-intl'; import { injectIntl } from 'react-intl';
import { get } from 'lodash';
// Utils // Utils
import { getWordsCount } from '../../../utils/editor'; import { getWordsCount } from '../../../utils/editor';
@ -57,6 +58,8 @@ class EditorScreen extends Component {
// Component Functions // Component Functions
_initialFields = () => { _initialFields = () => {
const { initialEditor } = this.props;
this.setState({ this.setState({
fields: { fields: {
title: '', title: '',
@ -66,6 +69,8 @@ class EditorScreen extends Component {
}, },
isRemoveTag: true, isRemoveTag: true,
}); });
if (initialEditor) initialEditor();
}; };
_handleOnPressPreviewButton = () => { _handleOnPressPreviewButton = () => {
@ -115,24 +120,23 @@ class EditorScreen extends Component {
_handleIsFormValid = (bodyText) => { _handleIsFormValid = (bodyText) => {
const { fields } = this.state; const { fields } = this.state;
const { isReply } = this.props; const { isReply } = this.props;
let _isFormValid; let isFormValid;
if (isReply) { if (isReply) {
_isFormValid = fields && fields.body && fields.body.length > 0; isFormValid = get(fields, 'body').length > 0;
} else { } else {
_isFormValid = fields isFormValid = get(fields, 'title', '')
&& fields.title && (get(fields, 'body', '') || (bodyText && bodyText > 0))
&& fields.title.length > 0 && get(fields, 'tags', null);
&& ((fields.body && fields.body.length > 0 && fields.tags.length > 0)
|| (bodyText && bodyText.length > 0));
} }
this.setState({ isFormValid: _isFormValid }); this.setState({ isFormValid });
}; };
_handleFormUpdate = (componentID, content) => { _handleFormUpdate = (componentID, content) => {
const { handleFormChanged, isReply } = this.props; const { handleFormChanged } = this.props;
const fields = { ...this.state.fields }; const { fields: _fields } = this.state;
const fields = { ..._fields };
if (componentID === 'body') { if (componentID === 'body') {
fields.body = content; fields.body = content;
@ -140,20 +144,26 @@ class EditorScreen extends Component {
fields.title = content; fields.title = content;
} }
this.setState({ fields }); if ((get(fields, 'body', '').trim() !== get(_fields, 'body', '').trim()
|| get(fields, 'title', '').trim() !== get(_fields, 'title', '').trim()
|| get(fields, 'tags') !== get(_fields, 'tags'))) {
handleFormChanged(); handleFormChanged();
}
this.setState({ fields });
this._handleIsFormValid(); this._handleIsFormValid();
this._saveCurrentDraft(); this._saveCurrentDraft();
}; };
_handleOnTagAdded = (tags) => { _handleOnTagAdded = async (tags) => {
const { fields: _fields } = this.state;
const _tags = tags.filter(tag => tag && tag !== ' '); const _tags = tags.filter(tag => tag && tag !== ' ');
const fields = { ...this.state.fields };
fields.tags = _tags; const fields = { ..._fields, tags: [..._tags] };
this.setState({ fields, isRemoveTag: false }); await this.setState({ fields, isRemoveTag: false });
this._handleFormUpdate();
}; };
render() { render() {
@ -161,7 +171,6 @@ class EditorScreen extends Component {
fields, isPreviewActive, wordsCount, isFormValid, isRemoveTag, fields, isPreviewActive, wordsCount, isFormValid, isRemoveTag,
} = this.state; } = this.state;
const { const {
draftPost,
handleOnImagePicker, handleOnImagePicker,
intl, intl,
isDraftSaved, isDraftSaved,