From e8e5c9a95dfb7a0f36ff2222238922de1e08bb20 Mon Sep 17 00:00:00 2001 From: ue Date: Wed, 4 Sep 2019 22:17:39 +0300 Subject: [PATCH 01/16] created screen and header --- .../avatarHeader/avatarHeaderStyles.js | 31 ++++++++++++++ .../avatarHeader/avatarHeaderView.js | 38 +++++++++++++++++ src/components/avatarHeader/index.js | 3 ++ .../basicHeader/view/basicHeaderView.js | 2 +- .../profileSummary/view/profileSummaryView.js | 16 +++++++- src/constants/routeNames.js | 1 + src/containers/index.js | 3 +- src/containers/profileEditContainer.js | 39 ++++++++++++++++++ src/navigation/routes.js | 19 ++++++--- src/screens/index.js | 4 +- .../profile/container/profileContainer.js | 11 ++++- src/screens/profile/screen/profileScreen.js | 8 ++-- .../profileEdit/screen/profileEditScreen.js | 41 +++++++++++++++++++ src/screens/settings/screen/settingsScreen.js | 18 ++++---- 14 files changed, 210 insertions(+), 24 deletions(-) create mode 100644 src/components/avatarHeader/avatarHeaderStyles.js create mode 100644 src/components/avatarHeader/avatarHeaderView.js create mode 100644 src/components/avatarHeader/index.js create mode 100644 src/containers/profileEditContainer.js create mode 100644 src/screens/profileEdit/screen/profileEditScreen.js diff --git a/src/components/avatarHeader/avatarHeaderStyles.js b/src/components/avatarHeader/avatarHeaderStyles.js new file mode 100644 index 000000000..d7f8ac8ac --- /dev/null +++ b/src/components/avatarHeader/avatarHeaderStyles.js @@ -0,0 +1,31 @@ +import EStyleSheet from 'react-native-extended-stylesheet'; + +export default EStyleSheet.create({ + headerContainer: { + height: 100, + flexDirection: 'row', + padding: 21, + }, + backIcon: { + color: '$white', + }, + wrapper: { + marginLeft: 16, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + textWrapper: { + marginLeft: 16, + }, + name: { + color: '$white', + fontSize: 14, + fontWeight: 'bold', + }, + username: { + color: '$white', + fontSize: 12, + marginTop: 4, + }, +}); diff --git a/src/components/avatarHeader/avatarHeaderView.js b/src/components/avatarHeader/avatarHeaderView.js new file mode 100644 index 000000000..e9268599f --- /dev/null +++ b/src/components/avatarHeader/avatarHeaderView.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { withNavigation } from 'react-navigation'; +import { View, Text } from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; + +import { UserAvatar } from '../userAvatar'; +import { IconButton } from '../iconButton'; + +// Styles +import styles from './avatarHeaderStyles'; + +const TooltipView = ({ username, name, reputation, navigation }) => ( + + + navigation.goBack()} + size={25} + /> + + + + {name} + {`@${username} (${reputation})`} + + + + +); + +export default withNavigation(TooltipView); diff --git a/src/components/avatarHeader/index.js b/src/components/avatarHeader/index.js new file mode 100644 index 000000000..6ea71cf70 --- /dev/null +++ b/src/components/avatarHeader/index.js @@ -0,0 +1,3 @@ +import AvatarHeader from './avatarHeaderView'; + +export { AvatarHeader }; diff --git a/src/components/basicHeader/view/basicHeaderView.js b/src/components/basicHeader/view/basicHeaderView.js index 1e310b9c9..c50f73f6f 100644 --- a/src/components/basicHeader/view/basicHeaderView.js +++ b/src/components/basicHeader/view/basicHeaderView.js @@ -100,7 +100,7 @@ class BasicHeaderView extends Component { (isModalHeader ? handleOnPressClose() : handleOnPressBackButton())} disabled={disabled} /> diff --git a/src/components/profileSummary/view/profileSummaryView.js b/src/components/profileSummary/view/profileSummaryView.js index 6c74fb091..da9e087d5 100644 --- a/src/components/profileSummary/view/profileSummaryView.js +++ b/src/components/profileSummary/view/profileSummaryView.js @@ -67,6 +67,7 @@ class ProfileSummaryView extends PureComponent { handleFollowUnfollowUser, handleOnFavoritePress, handleOnFollowsPress, + handleOnPressProfileEdit, handleUIChange, hoursRC, hoursVP, @@ -184,7 +185,7 @@ class ProfileSummaryView extends PureComponent { - {isLoggedIn && !isOwnProfile && ( + {isLoggedIn && !isOwnProfile ? ( )} + ) : ( + isOwnProfile && ( + + + + ) )} diff --git a/src/constants/routeNames.js b/src/constants/routeNames.js index 1fedf0c9e..da28952de 100644 --- a/src/constants/routeNames.js +++ b/src/constants/routeNames.js @@ -24,6 +24,7 @@ export default { PROMOTE: `Promote${SCREEN_SUFFIX}`, FREE_ESTM: `FreeEstm${SCREEN_SUFFIX}`, REBLOGS: `Reblogs${SCREEN_SUFFIX}`, + PROFILE_EDIT: `ProfileEdit${SCREEN_SUFFIX}`, }, DRAWER: { MAIN: `Main${DRAWER_SUFFIX}`, diff --git a/src/containers/index.js b/src/containers/index.js index 5d8cd281b..5ddb563c3 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -1,4 +1,5 @@ import PointsContainer from './pointsContainer'; import TransferContainer from './transferContainer'; +import ProfileEditContainer from './profileEditContainer'; -export { PointsContainer, TransferContainer }; +export { PointsContainer, TransferContainer, ProfileEditContainer }; diff --git a/src/containers/profileEditContainer.js b/src/containers/profileEditContainer.js new file mode 100644 index 000000000..42acd8270 --- /dev/null +++ b/src/containers/profileEditContainer.js @@ -0,0 +1,39 @@ +import { Component } from 'react'; +import { connect } from 'react-redux'; + +// import ROUTES from '../constants/routeNames'; + +class ProfileEditContainer extends Component { + /* Props + * ------------------------------------------------ + * @prop { type } name - Description.... + */ + + constructor(props) { + super(props); + this.state = {}; + } + + // Component Life Cycles + + // Component Functions + + _handleOnSave = () => {}; + + render() { + const { children, currentAccount } = this.props; + + return ( + children && + children({ + currentAccount, + }) + ); + } +} + +const mapStateToProps = state => ({ + currentAccount: state.account.currentAccount, +}); + +export default connect(mapStateToProps)(ProfileEditContainer); diff --git a/src/navigation/routes.js b/src/navigation/routes.js index 026349ec2..dd148c3b8 100644 --- a/src/navigation/routes.js +++ b/src/navigation/routes.js @@ -9,6 +9,8 @@ import { default as ROUTES } from '../constants/routeNames'; // Screens import { Bookmarks, + Boost, + BoostPost, Drafts, Editor, Follows, @@ -16,15 +18,14 @@ import { PinCode, Post, Profile, + ProfileEdit, + Promote, + Reblogs, + SearchResult, Settings, SteemConnect, - Voters, - SearchResult, Transfer, - Boost, - Promote, - BoostPost, - Reblogs, + Voters, } from '../screens'; // Components @@ -55,6 +56,12 @@ const stackNavigatior = createStackNavigator( header: () => null, }, }, + [ROUTES.SCREENS.PROFILE_EDIT]: { + screen: ProfileEdit, + navigationOptions: { + header: () => null, + }, + }, [ROUTES.SCREENS.POST]: { screen: Post, navigationOptions: { diff --git a/src/screens/index.js b/src/screens/index.js index c1821be36..c0ea9b5e9 100755 --- a/src/screens/index.js +++ b/src/screens/index.js @@ -19,6 +19,7 @@ import Promote from './promote/screen/promoteScreen'; import SteemConnect from './steem-connect/steemConnect'; import Transfer from './transfer'; import Reblogs from './reblogs'; +import ProfileEdit from './profileEdit/screen/profileEditScreen'; export { Bookmarks, @@ -35,11 +36,12 @@ export { Points, Post, Profile, + ProfileEdit, Promote, + Reblogs, SearchResult, Settings, SteemConnect, Transfer, Voters, - Reblogs, }; diff --git a/src/screens/profile/container/profileContainer.js b/src/screens/profile/container/profileContainer.js index 79e6c4e5c..8c10db167 100644 --- a/src/screens/profile/container/profileContainer.js +++ b/src/screens/profile/container/profileContainer.js @@ -343,6 +343,12 @@ class ProfileContainer extends Component { this.setState({ forceLoadPost: value }); }; + _handleOnPressProfileEdit = () => { + const { navigation } = this.props; + + navigation.navigate(ROUTES.SCREENS.PROFILE_EDIT); + }; + render() { const { avatar, @@ -368,16 +374,19 @@ class ProfileContainer extends Component { about={get(user, 'about.profile')} activePage={activePage} avatar={avatar} + changeForceLoadPostState={this._changeForceLoadPostState} comments={comments} currency={currency} error={error} follows={follows} + forceLoadPost={forceLoadPost} getReplies={() => this._getReplies(username)} handleFollowUnfollowUser={this._handleFollowUnfollowUser} handleMuteUnmuteUser={this._handleMuteUnmuteUser} handleOnBackPress={this._handleOnBackPress} handleOnFavoritePress={this._handleOnFavoritePress} handleOnFollowsPress={this._handleFollowsPress} + handleOnPressProfileEdit={this._handleOnPressProfileEdit} isDarkTheme={isDarkTheme} isFavorite={isFavorite} isFollowing={isFollowing} @@ -389,8 +398,6 @@ class ProfileContainer extends Component { selectedQuickProfile={selectedQuickProfile} selectedUser={user} username={username} - forceLoadPost={forceLoadPost} - changeForceLoadPostState={this._changeForceLoadPostState} /> ); } diff --git a/src/screens/profile/screen/profileScreen.js b/src/screens/profile/screen/profileScreen.js index edc7740d4..09c18203d 100644 --- a/src/screens/profile/screen/profileScreen.js +++ b/src/screens/profile/screen/profileScreen.js @@ -62,15 +62,19 @@ class ProfileScreen extends PureComponent { render() { const { about, + activePage, + changeForceLoadPostState, comments, currency, follows, + forceLoadPost, getReplies, handleFollowUnfollowUser, handleMuteUnmuteUser, handleOnBackPress, handleOnFavoritePress, handleOnFollowsPress, + handleOnPressProfileEdit, intl, isDarkTheme, isFavorite, @@ -83,9 +87,6 @@ class ProfileScreen extends PureComponent { selectedQuickProfile, selectedUser, username, - activePage, - forceLoadPost, - changeForceLoadPostState, } = this.props; const { @@ -175,6 +176,7 @@ class ProfileScreen extends PureComponent { location={location} percentRC={resourceCredits} percentVP={votingPower} + handleOnPressProfileEdit={handleOnPressProfileEdit} /> )} diff --git a/src/screens/profileEdit/screen/profileEditScreen.js b/src/screens/profileEdit/screen/profileEditScreen.js new file mode 100644 index 000000000..2a5218ca6 --- /dev/null +++ b/src/screens/profileEdit/screen/profileEditScreen.js @@ -0,0 +1,41 @@ +import React, { PureComponent, Fragment } from 'react'; +import { injectIntl } from 'react-intl'; +import get from 'lodash/get'; + +import { ProfileEditContainer } from '../../../containers'; + +import AvatarHeader from '../../../components/avatarHeader/avatarHeaderView'; + +class ProfileEditScreen extends PureComponent { + /* Props + * ------------------------------------------------ + * @prop { type } name - Description.... + */ + + constructor(props) { + super(props); + this.state = {}; + } + + // Component Life Cycles + + // Component Functions + + render() { + return ( + + {({ currentAccount }) => ( + + + + )} + + ); + } +} + +export default injectIntl(ProfileEditScreen); diff --git a/src/screens/settings/screen/settingsScreen.js b/src/screens/settings/screen/settingsScreen.js index 58a801611..895cdf8c7 100644 --- a/src/screens/settings/screen/settingsScreen.js +++ b/src/screens/settings/screen/settingsScreen.js @@ -84,15 +84,6 @@ class SettingsScreen extends PureComponent { })} titleStyle={styles.cardTitle} /> - + {!!isLoggedIn && ( Date: Thu, 5 Sep 2019 23:35:42 +0300 Subject: [PATCH 02/16] wip on profile edit form fields --- .../avatarHeader/avatarHeaderStyles.js | 15 ++++++++ .../avatarHeader/avatarHeaderView.js | 14 +++++-- .../formInput/view/formInputStyles.js | 3 +- .../formInput/view/formInputView.js | 18 ++++----- src/components/index.js | 4 +- .../profileEditForm/profileEditFormStyles.js | 14 +++++++ .../profileEditForm/profileEditFormView.js | 38 +++++++++++++++++++ .../textInput/view/textInputView.js | 4 +- .../userAvatar/view/userAvatarView.js | 4 +- src/screens/login/screen/loginScreen.js | 2 +- src/screens/login/screen/loginStyles.js | 5 +++ .../profileEdit/screen/profileEditScreen.js | 10 +++++ 12 files changed, 110 insertions(+), 21 deletions(-) create mode 100644 src/components/profileEditForm/profileEditFormStyles.js create mode 100644 src/components/profileEditForm/profileEditFormView.js diff --git a/src/components/avatarHeader/avatarHeaderStyles.js b/src/components/avatarHeader/avatarHeaderStyles.js index d7f8ac8ac..1840141d8 100644 --- a/src/components/avatarHeader/avatarHeaderStyles.js +++ b/src/components/avatarHeader/avatarHeaderStyles.js @@ -28,4 +28,19 @@ export default EStyleSheet.create({ fontSize: 12, marginTop: 4, }, + addIcon: { + color: '$white', + textAlign: 'center', + }, + addButton: { + backgroundColor: '$iconColor', + width: 20, + height: 20, + borderRadius: 20 / 2, + borderColor: '$white', + borderWidth: 1, + position: 'absolute', + bottom: 0, + left: 45, + }, }); diff --git a/src/components/avatarHeader/avatarHeaderView.js b/src/components/avatarHeader/avatarHeaderView.js index e9268599f..d3eb1673f 100644 --- a/src/components/avatarHeader/avatarHeaderView.js +++ b/src/components/avatarHeader/avatarHeaderView.js @@ -9,7 +9,7 @@ import { IconButton } from '../iconButton'; // Styles import styles from './avatarHeaderStyles'; -const TooltipView = ({ username, name, reputation, navigation }) => ( +const AvatarHeader = ({ username, name, reputation, navigation, avatarUrl }) => ( ( size={25} /> - + + alert('upload')} + size={15} + /> {name} {`@${username} (${reputation})`} @@ -35,4 +43,4 @@ const TooltipView = ({ username, name, reputation, navigation }) => ( ); -export default withNavigation(TooltipView); +export default withNavigation(AvatarHeader); diff --git a/src/components/formInput/view/formInputStyles.js b/src/components/formInput/view/formInputStyles.js index 0783a4745..c595c6686 100644 --- a/src/components/formInput/view/formInputStyles.js +++ b/src/components/formInput/view/formInputStyles.js @@ -4,8 +4,7 @@ export default EStyleSheet.create({ wrapper: { borderTopLeftRadius: 8, borderTopRightRadius: 8, - marginHorizontal: 30, - marginVertical: 10, + marginTop: 16, flexDirection: 'row', backgroundColor: '$primaryGray', height: 60, diff --git a/src/components/formInput/view/formInputView.js b/src/components/formInput/view/formInputView.js index 15df144ec..d511ce610 100644 --- a/src/components/formInput/view/formInputView.js +++ b/src/components/formInput/view/formInputView.js @@ -30,17 +30,10 @@ class FormInputView extends Component { value: '', inputBorderColor: '#c1c5c7', isValid: true, - formInputWidth: '99%', }; } // Component Life Cycles - componentWillMount() { - setTimeout(() => { - this.setState({ formInputWidth: '100%' }); - }, 100); - } - componentWillReceiveProps(nextProps) { const { isValid } = this.props; @@ -65,7 +58,7 @@ class FormInputView extends Component { }; render() { - const { inputBorderColor, isValid, value, formInputWidth } = this.state; + const { inputBorderColor, isValid, value } = this.state; const { placeholder, type, @@ -75,6 +68,8 @@ class FormInputView extends Component { rightIconName, secureTextEntry, iconType, + wrapperStyle, + height, } = this.props; return ( {isFirstImage && value && value.length > 2 ? ( @@ -97,19 +93,21 @@ class FormInputView extends Component { /> ) : ( - + rightIconName && ( + + ) )} this._handleOnFocus()} autoCapitalize="none" secureTextEntry={secureTextEntry} + height={height} placeholder={placeholder} editable={isEditable || true} textContentType={type} onChangeText={val => this._handleOnChange(val)} value={value} - style={{ width: formInputWidth }} /> diff --git a/src/components/index.js b/src/components/index.js index cf074dd38..e2e1f7ee7 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -10,6 +10,7 @@ import { TextInput } from './textInput'; import ScaleSlider from './scaleSlider/scaleSliderView'; import UserListItem from './basicUIElements/view/userListItem/userListItem'; import PostButton from './postButton/postButtonView'; +import ProfileEditForm from './profileEditForm/profileEditFormView'; export { CircularButton, @@ -20,10 +21,11 @@ export { Modal, NumericKeyboard, PinAnimatedInput, + PostButton, + ProfileEditForm, ScaleSlider, SideMenu, TextButton, TextInput, UserListItem, - PostButton, }; diff --git a/src/components/profileEditForm/profileEditFormStyles.js b/src/components/profileEditForm/profileEditFormStyles.js new file mode 100644 index 000000000..dd5fb8acd --- /dev/null +++ b/src/components/profileEditForm/profileEditFormStyles.js @@ -0,0 +1,14 @@ +import EStyleSheet from 'react-native-extended-stylesheet'; + +export default EStyleSheet.create({ + container: { + paddingHorizontal: 32, + paddingVertical: 16, + backgroundColor: '$primaryBackgroundColor', + flex: 1, + }, + formStyle: { + backgroundColor: '$white', + height: 30, + }, +}); diff --git a/src/components/profileEditForm/profileEditFormView.js b/src/components/profileEditForm/profileEditFormView.js new file mode 100644 index 000000000..9f968d9a9 --- /dev/null +++ b/src/components/profileEditForm/profileEditFormView.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { withNavigation } from 'react-navigation'; +import { View, Text, Platform } from 'react-native'; +import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; + +// Components +import { FormInput } from '../formInput'; + +// Styles +import styles from './profileEditFormStyles'; + +const ProfileEditFormView = ({ avatarUrl, coverUrl, name, about, location, website }) => ( + + + Profile picture URL + alert('changed')} + placeholder="profile picture url" + isEditable + type="username" + isFirstImage + value="sex" + /> + + +); + +export default withNavigation(ProfileEditFormView); + +// placeholder={intl.formatMessage({ +// id: 'login.username', +// })} diff --git a/src/components/textInput/view/textInputView.js b/src/components/textInput/view/textInputView.js index 97c571e19..09f19b977 100644 --- a/src/components/textInput/view/textInputView.js +++ b/src/components/textInput/view/textInputView.js @@ -5,9 +5,9 @@ import { connect } from 'react-redux'; // Styles import styles from './textInputStyles'; -const TextInputView = ({ isDarkTheme, innerRef, ...props }) => ( +const TextInputView = ({ isDarkTheme, innerRef, height, ...props }) => ( this.setState({ keyboardIsOpen: true })} onKeyboardWillHide={() => this.setState({ keyboardIsOpen: false })} enableAutoAutomaticScroll={Platform.OS === 'ios'} - contentContainerStyle={{ flexGrow: 1 }} + contentContainerStyle={styles.formWrapper} > + )} From d1b52d262361a5f6d84685a2a360e29243a65f3d Mon Sep 17 00:00:00 2001 From: ue Date: Sat, 7 Sep 2019 14:49:04 +0300 Subject: [PATCH 03/16] created profile edit ui --- .../formInput/view/formInputView.js | 2 +- .../profileEditForm/profileEditFormStyles.js | 32 +++++ .../profileEditForm/profileEditFormView.js | 130 ++++++++++++++++-- src/containers/profileEditContainer.js | 4 +- .../profileEdit/screen/profileEditScreen.js | 15 +- 5 files changed, 159 insertions(+), 24 deletions(-) diff --git a/src/components/formInput/view/formInputView.js b/src/components/formInput/view/formInputView.js index d511ce610..9a2bb2b02 100644 --- a/src/components/formInput/view/formInputView.js +++ b/src/components/formInput/view/formInputView.js @@ -27,7 +27,7 @@ class FormInputView extends Component { super(props); this.state = { - value: '', + value: props.value || '', inputBorderColor: '#c1c5c7', isValid: true, }; diff --git a/src/components/profileEditForm/profileEditFormStyles.js b/src/components/profileEditForm/profileEditFormStyles.js index dd5fb8acd..7a3c0b210 100644 --- a/src/components/profileEditForm/profileEditFormStyles.js +++ b/src/components/profileEditForm/profileEditFormStyles.js @@ -10,5 +10,37 @@ export default EStyleSheet.create({ formStyle: { backgroundColor: '$white', height: 30, + marginTop: 8, + }, + label: { + fontSize: 14, + color: '$primaryDarkText', + fontWeight: '500', + }, + formItem: { + marginBottom: 24, + }, + coverImg: { + borderRadius: 5, + height: 60, + marginBottom: 12, + alignSelf: 'stretch', + backgroundColor: '#296CC0', + }, + coverImageWrapper: {}, + addIcon: { + color: '$white', + textAlign: 'center', + }, + addButton: { + backgroundColor: '$iconColor', + width: 20, + height: 20, + borderRadius: 20 / 2, + borderColor: '$white', + borderWidth: 1, + position: 'absolute', + bottom: 0, + right: 10, }, }); diff --git a/src/components/profileEditForm/profileEditFormView.js b/src/components/profileEditForm/profileEditFormView.js index 9f968d9a9..0b6f35d77 100644 --- a/src/components/profileEditForm/profileEditFormView.js +++ b/src/components/profileEditForm/profileEditFormView.js @@ -1,32 +1,132 @@ import React from 'react'; import { withNavigation } from 'react-navigation'; -import { View, Text, Platform } from 'react-native'; +import { View, TouchableOpacity, Image, Text, Platform } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; +// Images +import LIGHT_COVER_IMAGE from '../../assets/default_cover_image.png'; +import DARK_COVER_IMAGE from '../../assets/dark_cover_image.png'; + // Components import { FormInput } from '../formInput'; - +import { IconButton } from '../iconButton'; // Styles import styles from './profileEditFormStyles'; -const ProfileEditFormView = ({ avatarUrl, coverUrl, name, about, location, website }) => ( +const ProfileEditFormView = ({ + avatarUrl, + coverUrl, + name, + about, + location, + website, + isDarkTheme, +}) => ( - Profile picture URL - alert('changed')} - placeholder="profile picture url" - isEditable - type="username" - isFirstImage - value="sex" - /> + + Profile picture URL + alert('changed')} + placeholder="profile picture url" + isEditable + type="text" + value={avatarUrl} + /> + + + + Cover image URL + alert('changed')} + placeholder="Cover image URL" + isEditable + type="text" + value={coverUrl} + /> + + + alert('upload')}> + + + alert('upload')} + size={15} + /> + + + + Display Name + alert('changed')} + placeholder="Display name" + isEditable + type="text" + value={name} + /> + + + + About + alert('changed')} + placeholder="About" + isEditable + type="text" + value={about} + /> + + + + Location + alert('changed')} + placeholder="Location" + isEditable + type="text" + value={location} + /> + + + + Website + alert('changed')} + placeholder="Website" + isEditable + type="text" + value={website} + /> + ); diff --git a/src/containers/profileEditContainer.js b/src/containers/profileEditContainer.js index 42acd8270..401347dbf 100644 --- a/src/containers/profileEditContainer.js +++ b/src/containers/profileEditContainer.js @@ -21,12 +21,13 @@ class ProfileEditContainer extends Component { _handleOnSave = () => {}; render() { - const { children, currentAccount } = this.props; + const { children, currentAccount, isDarkTheme } = this.props; return ( children && children({ currentAccount, + isDarkTheme, }) ); } @@ -34,6 +35,7 @@ class ProfileEditContainer extends Component { const mapStateToProps = state => ({ currentAccount: state.account.currentAccount, + isDarkTheme: state.application.isDarkTheme, }); export default connect(mapStateToProps)(ProfileEditContainer); diff --git a/src/screens/profileEdit/screen/profileEditScreen.js b/src/screens/profileEdit/screen/profileEditScreen.js index c81c52c4b..4318dcd27 100644 --- a/src/screens/profileEdit/screen/profileEditScreen.js +++ b/src/screens/profileEdit/screen/profileEditScreen.js @@ -25,21 +25,22 @@ class ProfileEditScreen extends PureComponent { render() { return ( - {({ currentAccount }) => ( + {({ currentAccount, isDarkTheme }) => ( )} From 702921e16a94fb0147a766e78489504b73fc134a Mon Sep 17 00:00:00 2001 From: ue Date: Sat, 7 Sep 2019 15:20:16 +0300 Subject: [PATCH 04/16] updated styles --- .../formInput/view/formInputStyles.js | 1 - .../formInput/view/formInputView.js | 2 ++ .../profileEditForm/profileEditFormStyles.js | 23 ++++++++++++++++ .../profileEditForm/profileEditFormView.js | 26 ++++++++++++++----- 4 files changed, 45 insertions(+), 7 deletions(-) diff --git a/src/components/formInput/view/formInputStyles.js b/src/components/formInput/view/formInputStyles.js index c595c6686..a82adbd9f 100644 --- a/src/components/formInput/view/formInputStyles.js +++ b/src/components/formInput/view/formInputStyles.js @@ -20,7 +20,6 @@ export default EStyleSheet.create({ textInput: { flex: 0.7, flexDirection: 'row', - justifyContent: 'center', }, icon: { flex: 0.15, diff --git a/src/components/formInput/view/formInputView.js b/src/components/formInput/view/formInputView.js index 9a2bb2b02..12fe06fa8 100644 --- a/src/components/formInput/view/formInputView.js +++ b/src/components/formInput/view/formInputView.js @@ -70,6 +70,7 @@ class FormInputView extends Component { iconType, wrapperStyle, height, + inputStyle, } = this.props; return ( this._handleOnFocus()} autoCapitalize="none" secureTextEntry={secureTextEntry} diff --git a/src/components/profileEditForm/profileEditFormStyles.js b/src/components/profileEditForm/profileEditFormStyles.js index 7a3c0b210..996a5ec52 100644 --- a/src/components/profileEditForm/profileEditFormStyles.js +++ b/src/components/profileEditForm/profileEditFormStyles.js @@ -43,4 +43,27 @@ export default EStyleSheet.create({ bottom: 0, right: 10, }, + + saveButton: { + backgroundColor: '$primaryBlue', + width: 55, + height: 55, + borderRadius: 55 / 2, + position: 'absolute', + top: -25, + right: 10, + zIndex: 999, + borderWidth: 2, + borderColor: '$white', + }, + saveIcon: { + color: '$white', + textAlign: 'center', + }, + + input: { + fontSize: 14, + color: '$primaryDarkText', + alignSelf: 'flex-start', + }, }); diff --git a/src/components/profileEditForm/profileEditFormView.js b/src/components/profileEditForm/profileEditFormView.js index 0b6f35d77..0531092ee 100644 --- a/src/components/profileEditForm/profileEditFormView.js +++ b/src/components/profileEditForm/profileEditFormView.js @@ -23,6 +23,14 @@ const ProfileEditFormView = ({ isDarkTheme, }) => ( + alert('upload')} + size={30} + /> alert('changed')} + onChange={value => console.log('changed')} placeholder="profile picture url" isEditable type="text" value={avatarUrl} + inputStyle={styles.input} /> @@ -47,11 +56,12 @@ const ProfileEditFormView = ({ wrapperStyle={styles.formStyle} isValid height={30} - onChange={value => alert('changed')} + onChange={value => console.log('changed')} placeholder="Cover image URL" isEditable type="text" value={coverUrl} + inputStyle={styles.input} /> @@ -78,11 +88,12 @@ const ProfileEditFormView = ({ wrapperStyle={styles.formStyle} isValid height={30} - onChange={value => alert('changed')} + onChange={value => console.log('changed')} placeholder="Display name" isEditable type="text" value={name} + inputStyle={styles.input} /> @@ -92,11 +103,12 @@ const ProfileEditFormView = ({ wrapperStyle={styles.formStyle} isValid height={30} - onChange={value => alert('changed')} + onChange={value => console.log('changed')} placeholder="About" isEditable type="text" value={about} + inputStyle={styles.input} /> @@ -106,11 +118,12 @@ const ProfileEditFormView = ({ wrapperStyle={styles.formStyle} isValid height={30} - onChange={value => alert('changed')} + onChange={value => console.log('changed')} placeholder="Location" isEditable type="text" value={location} + inputStyle={styles.input} /> @@ -120,11 +133,12 @@ const ProfileEditFormView = ({ wrapperStyle={styles.formStyle} isValid height={30} - onChange={value => alert('changed')} + onChange={value => console.log('changed')} placeholder="Website" isEditable type="text" value={website} + inputStyle={styles.input} /> From b6e30d656ad63b06247718035a7175f59b1771d0 Mon Sep 17 00:00:00 2001 From: ue Date: Sun, 8 Sep 2019 00:20:15 +0300 Subject: [PATCH 05/16] refactored and updated edit screen --- .../profileEditForm/profileEditFormView.js | 85 ++++++------------- src/config/locales/en-US.json | 8 +- src/containers/profileEditContainer.js | 28 ++++++ .../profileEdit/screen/profileEditScreen.js | 5 +- 4 files changed, 63 insertions(+), 63 deletions(-) diff --git a/src/components/profileEditForm/profileEditFormView.js b/src/components/profileEditForm/profileEditFormView.js index 0531092ee..f87eaf515 100644 --- a/src/components/profileEditForm/profileEditFormView.js +++ b/src/components/profileEditForm/profileEditFormView.js @@ -2,6 +2,7 @@ import React from 'react'; import { withNavigation } from 'react-navigation'; import { View, TouchableOpacity, Image, Text, Platform } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; +import { injectIntl } from 'react-intl'; // Images import LIGHT_COVER_IMAGE from '../../assets/default_cover_image.png'; @@ -13,15 +14,7 @@ import { IconButton } from '../iconButton'; // Styles import styles from './profileEditFormStyles'; -const ProfileEditFormView = ({ - avatarUrl, - coverUrl, - name, - about, - location, - website, - isDarkTheme, -}) => ( +const ProfileEditFormView = ({ avatarUrl, coverUrl, isDarkTheme, formData, intl, ...props }) => ( - - Profile picture URL - console.log('changed')} - placeholder="profile picture url" - isEditable - type="text" - value={avatarUrl} - inputStyle={styles.input} - /> - - - - Cover image URL - console.log('changed')} - placeholder="Cover image URL" - isEditable - type="text" - value={coverUrl} - inputStyle={styles.input} - /> - - alert('upload')}> - - Display Name - console.log('changed')} - placeholder="Display name" - isEditable - type="text" - value={name} - inputStyle={styles.input} - /> - - + {formData.map(item => ( + + + {intl.formatMessage({ + id: `profile.edit.${item.label}`, + })} + + console.log(value, item.valueKey)} + placeholder={item.placeholder} + isEditable + type={item.type} + value={props[item.valueKey]} + inputStyle={styles.input} + /> + + ))} + {/* About - + */} ); -export default withNavigation(ProfileEditFormView); - -// placeholder={intl.formatMessage({ -// id: 'login.username', -// })} +export default injectIntl(withNavigation(ProfileEditFormView)); diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 90de92aec..0c66bb808 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -97,7 +97,13 @@ "days": "days", "day": "day", "steem_dollars": "Steem Dollars", - "savings": "Savings" + "savings": "Savings", + "edit": { + "display_name": "Display Name", + "about": "About", + "location": "location", + "website": "Website" + } }, "settings": { "settings": "Settings", diff --git a/src/containers/profileEditContainer.js b/src/containers/profileEditContainer.js index 401347dbf..f57bbbe00 100644 --- a/src/containers/profileEditContainer.js +++ b/src/containers/profileEditContainer.js @@ -3,6 +3,33 @@ import { connect } from 'react-redux'; // import ROUTES from '../constants/routeNames'; +const FORM_DATA = [ + { + valueKey: 'name', + type: 'text', + label: 'display_name', + placeholder: '', + }, + { + valueKey: 'about', + type: 'text', + label: 'about', + placeholder: '', + }, + { + valueKey: 'location', + type: 'text', + label: 'location', + placeholder: '', + }, + { + valueKey: 'website', + type: 'text', + label: 'website', + placeholder: '', + }, +]; + class ProfileEditContainer extends Component { /* Props * ------------------------------------------------ @@ -28,6 +55,7 @@ class ProfileEditContainer extends Component { children({ currentAccount, isDarkTheme, + formData: FORM_DATA, }) ); } diff --git a/src/screens/profileEdit/screen/profileEditScreen.js b/src/screens/profileEdit/screen/profileEditScreen.js index 4318dcd27..a4cba13fe 100644 --- a/src/screens/profileEdit/screen/profileEditScreen.js +++ b/src/screens/profileEdit/screen/profileEditScreen.js @@ -25,7 +25,7 @@ class ProfileEditScreen extends PureComponent { render() { return ( - {({ currentAccount, isDarkTheme }) => ( + {({ currentAccount, isDarkTheme, formData }) => ( Date: Sun, 8 Sep 2019 14:52:16 +0300 Subject: [PATCH 06/16] created image upload --- .../avatarHeader/avatarHeaderView.js | 19 +++- .../formInput/view/formInputView.js | 20 ++-- .../profileEditForm/profileEditFormStyles.js | 2 + .../profileEditForm/profileEditFormView.js | 63 +++-------- .../userAvatar/view/userAvatarView.js | 4 +- src/config/locales/en-US.json | 2 +- src/containers/profileEditContainer.js | 105 +++++++++++++++++- src/providers/esteem/esteem.js | 9 +- .../editor/container/editorContainer.js | 31 ++---- .../profileEdit/screen/profileEditScreen.js | 67 +++++++++-- 10 files changed, 219 insertions(+), 103 deletions(-) diff --git a/src/components/avatarHeader/avatarHeaderView.js b/src/components/avatarHeader/avatarHeaderView.js index d3eb1673f..a3640e8d8 100644 --- a/src/components/avatarHeader/avatarHeaderView.js +++ b/src/components/avatarHeader/avatarHeaderView.js @@ -9,7 +9,14 @@ import { IconButton } from '../iconButton'; // Styles import styles from './avatarHeaderStyles'; -const AvatarHeader = ({ username, name, reputation, navigation, avatarUrl }) => ( +const AvatarHeader = ({ + username, + name, + reputation, + navigation, + avatarUrl, + showImageUploadActions, +}) => ( size={25} /> - + alert('upload')} + onPress={() => showImageUploadActions()} size={15} /> diff --git a/src/components/formInput/view/formInputView.js b/src/components/formInput/view/formInputView.js index 12fe06fa8..3b22aeaa4 100644 --- a/src/components/formInput/view/formInputView.js +++ b/src/components/formInput/view/formInputView.js @@ -1,12 +1,11 @@ import React, { Component } from 'react'; import { View } from 'react-native'; import FastImage from 'react-native-fast-image'; -import { Icon } from '../../icon'; - -// Constants // Components import { TextInput } from '../../textInput'; +import { Icon } from '../../icon'; + // Styles import styles from './formInputStyles'; @@ -19,16 +18,13 @@ class FormInputView extends Component { * @prop { boolean } isEditable - Can permission edit. * @prop { boolean } isValid - This delegate input valit or not. * @prop { boolean } secureTextEntry - For hiding password value. - * - * - * */ constructor(props) { super(props); this.state = { value: props.value || '', - inputBorderColor: '#c1c5c7', + inputBorderColor: '#e7e7e7', isValid: true, }; } @@ -47,14 +43,11 @@ class FormInputView extends Component { const { onChange } = this.props; this.setState({ value }); - onChange && onChange(value); + if (onChange) onChange(value); }; _handleOnFocus = () => { - const { inputBorderColor } = this.state; - if (inputBorderColor !== '#357ce6') { - this.setState({ inputBorderColor: '#357ce6' }); - } + this.setState({ inputBorderColor: '#357ce6' }); }; render() { @@ -101,7 +94,8 @@ class FormInputView extends Component { this._handleOnFocus()} + onFocus={() => this.setState({ inputBorderColor: '#357ce6' })} + onBlur={() => this.setState({ inputBorderColor: '#e7e7e7' })} autoCapitalize="none" secureTextEntry={secureTextEntry} height={height} diff --git a/src/components/profileEditForm/profileEditFormStyles.js b/src/components/profileEditForm/profileEditFormStyles.js index 996a5ec52..53a092327 100644 --- a/src/components/profileEditForm/profileEditFormStyles.js +++ b/src/components/profileEditForm/profileEditFormStyles.js @@ -65,5 +65,7 @@ export default EStyleSheet.create({ fontSize: 14, color: '$primaryDarkText', alignSelf: 'flex-start', + width: '100%', + height: 30, }, }); diff --git a/src/components/profileEditForm/profileEditFormView.js b/src/components/profileEditForm/profileEditFormView.js index f87eaf515..5f0407bac 100644 --- a/src/components/profileEditForm/profileEditFormView.js +++ b/src/components/profileEditForm/profileEditFormView.js @@ -14,21 +14,29 @@ import { IconButton } from '../iconButton'; // Styles import styles from './profileEditFormStyles'; -const ProfileEditFormView = ({ avatarUrl, coverUrl, isDarkTheme, formData, intl, ...props }) => ( +const ProfileEditFormView = ({ + coverUrl, + isDarkTheme, + formData, + intl, + handleOnItemChange, + showImageUploadActions, + ...props +}) => ( alert('upload')} + onPress={() => alert('asd')} size={30} /> - alert('upload')}> + alert('upload')} + onPress={showImageUploadActions} size={15} /> @@ -56,7 +64,7 @@ const ProfileEditFormView = ({ avatarUrl, coverUrl, isDarkTheme, formData, intl, wrapperStyle={styles.formStyle} isValid height={30} - onChange={value => console.log(value, item.valueKey)} + onChange={value => handleOnItemChange(value, item.valueKey)} placeholder={item.placeholder} isEditable type={item.type} @@ -65,51 +73,6 @@ const ProfileEditFormView = ({ avatarUrl, coverUrl, isDarkTheme, formData, intl, /> ))} - {/* - - About - console.log('changed')} - placeholder="About" - isEditable - type="text" - value={about} - inputStyle={styles.input} - /> - - - - Location - console.log('changed')} - placeholder="Location" - isEditable - type="text" - value={location} - inputStyle={styles.input} - /> - - - - Website - console.log('changed')} - placeholder="Website" - isEditable - type="text" - value={website} - inputStyle={styles.input} - /> - */} ); diff --git a/src/components/userAvatar/view/userAvatarView.js b/src/components/userAvatar/view/userAvatarView.js index 1e7e62f51..d7c48f7a2 100644 --- a/src/components/userAvatar/view/userAvatarView.js +++ b/src/components/userAvatar/view/userAvatarView.js @@ -46,8 +46,8 @@ class UserAvatarView extends Component { const imageSize = size === 'xl' ? 'large' : 'small'; let _size; const _avatar = username - ? { uri: `https://steemitimages.com/u/${username}/avatar/${imageSize}` } - : avatarUrl || DEFAULT_IMAGE; + ? { uri: avatarUrl || `https://steemitimages.com/u/${username}/avatar/${imageSize}` } + : DEFAULT_IMAGE; if (!disableSize) { _size = 32; diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 0c66bb808..3fc9222c8 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -101,7 +101,7 @@ "edit": { "display_name": "Display Name", "about": "About", - "location": "location", + "location": "Location", "website": "Website" } }, diff --git a/src/containers/profileEditContainer.js b/src/containers/profileEditContainer.js index f57bbbe00..f20786628 100644 --- a/src/containers/profileEditContainer.js +++ b/src/containers/profileEditContainer.js @@ -1,6 +1,11 @@ import { Component } from 'react'; +import { Alert } from 'react-native'; import { connect } from 'react-redux'; +import { injectIntl } from 'react-intl'; +import ImagePicker from 'react-native-image-crop-picker'; +import get from 'lodash/get'; +import { uploadImage } from '../providers/esteem/esteem'; // import ROUTES from '../constants/routeNames'; const FORM_DATA = [ @@ -38,7 +43,15 @@ class ProfileEditContainer extends Component { constructor(props) { super(props); - this.state = {}; + this.state = { + isUploading: false, + about: get(props.currentAccount, 'about.profile.about'), + name: get(props.currentAccount, 'about.profile.name'), + location: get(props.currentAccount, 'about.profile.location'), + website: get(props.currentAccount, 'about.profile.website'), + coverUrl: get(props.currentAccount, 'about.profile.cover_image'), + avatarUrl: get(props.currentAccount, 'avatar'), + }; } // Component Life Cycles @@ -47,8 +60,87 @@ class ProfileEditContainer extends Component { _handleOnSave = () => {}; + _handleOnItemChange = (val, item) => { + console.log(val, item); + }; + + _uploadImage = (media, action) => { + const { intl } = this.props; + uploadImage(media) + .then(res => { + if (res.data && res.data.url) { + this.setState({ [action]: res.data.url, isUploading: false }); + } + }) + .catch(error => { + if (error) { + Alert.alert( + intl.formatMessage({ + id: 'alert.fail', + }), + error.message || error.toString(), + ); + } + this.setState({ isUploading: false }); + }); + }; + + _handleMediaAction = (type, uploadAction) => { + if (type === 'camera') { + this._handleOpenCamera(uploadAction); + } else if (type === 'image') { + this._handleOpenImagePicker(uploadAction); + } + }; + + _handleOpenImagePicker = action => { + ImagePicker.openPicker({ + includeBase64: true, + }) + .then(image => { + this._handleMediaOnSelected(image, action); + }) + .catch(e => { + this._handleMediaOnSelectFailure(e); + }); + }; + + _handleOpenCamera = action => { + ImagePicker.openCamera({ + includeBase64: true, + }) + .then(image => { + this._handleMediaOnSelected(image, action); + }) + .catch(e => { + this._handleMediaOnSelectFailure(e); + }); + }; + + _handleMediaOnSelected = (media, action) => { + this.setState({ isUploading: true }, () => { + this._uploadImage(media, action); + }); + }; + + _handleMediaOnSelectFailure = error => { + const { intl } = this.props; + + if (get(error, 'code') === 'E_PERMISSION_MISSING') { + Alert.alert( + intl.formatMessage({ + id: 'alert.permission_denied', + }), + intl.formatMessage({ + id: 'alert.permission_text', + }), + ); + } + }; + render() { const { children, currentAccount, isDarkTheme } = this.props; + const { isUploading, name, location, website, about, coverUrl, avatarUrl } = this.state; return ( children && @@ -56,6 +148,15 @@ class ProfileEditContainer extends Component { currentAccount, isDarkTheme, formData: FORM_DATA, + isUploading, + handleMediaAction: this._handleMediaAction, + handleOnItemChange: this._handleOnItemChange, + name, + location, + website, + about, + coverUrl, + avatarUrl, }) ); } @@ -66,4 +167,4 @@ const mapStateToProps = state => ({ isDarkTheme: state.application.isDarkTheme, }); -export default connect(mapStateToProps)(ProfileEditContainer); +export default connect(mapStateToProps)(injectIntl(ProfileEditContainer)); diff --git a/src/providers/esteem/esteem.js b/src/providers/esteem/esteem.js index e8e049903..5ff899b34 100644 --- a/src/providers/esteem/esteem.js +++ b/src/providers/esteem/esteem.js @@ -300,7 +300,14 @@ export const getImages = username => api.get(`api/images/${username}`).then(resp export const addMyImage = (user, url) => api.post('/image', { username: user, image_url: url }); -export const uploadImage = file => { +export const uploadImage = media => { + const file = { + uri: media.path, + type: media.mime, + name: media.filename || `IMG_${Math.random()}.JPG`, + size: media.size, + }; + const fData = new FormData(); fData.append('postimage', file); diff --git a/src/screens/editor/container/editorContainer.js b/src/screens/editor/container/editorContainer.js index 4a61e5a1c..3db98c28b 100644 --- a/src/screens/editor/container/editorContainer.js +++ b/src/screens/editor/container/editorContainer.js @@ -42,7 +42,6 @@ class EditorContainer extends Component { autoFocusText: false, draftId: null, draftPost: null, - isCameraOrPickerOpen: false, isDraftSaved: false, isDraftSaving: false, isEdit: false, @@ -141,8 +140,6 @@ class EditorContainer extends Component { }; _handleRoutingAction = routingAction => { - this.setState({ isCameraOrPickerOpen: true }); - if (routingAction === 'camera') { this._handleOpenCamera(); } else if (routingAction === 'image') { @@ -175,7 +172,7 @@ class EditorContainer extends Component { }; _handleMediaOnSelected = media => { - this.setState({ isCameraOrPickerOpen: false, isUploading: true }, () => { + this.setState({ isUploading: true }, () => { this._uploadImage(media); }); // For new image api @@ -189,33 +186,27 @@ class EditorContainer extends Component { _uploadImage = media => { const { intl } = this.props; - const file = { - uri: media.path, - type: media.mime, - name: media.filename || `IMG_${Math.random()}.JPG`, - size: media.size, - }; - - uploadImage(file) + uploadImage(media) .then(res => { if (res.data && res.data.url) { this.setState({ uploadedImage: res.data, isUploading: false }); } }) .catch(error => { - Alert.alert( - intl.formatMessage({ - id: 'alert.fail', - }), - error.message || error.toString(), - ); + if (error) { + Alert.alert( + intl.formatMessage({ + id: 'alert.fail', + }), + error.message || error.toString(), + ); + } this.setState({ isUploading: false }); }); }; _handleMediaOnSelectFailure = error => { const { intl } = this.props; - this.setState({ isCameraOrPickerOpen: false }); if (get(error, 'code') === 'E_PERMISSION_MISSING') { Alert.alert( @@ -567,7 +558,6 @@ class EditorContainer extends Component { const { autoFocusText, draftPost, - isCameraOrPickerOpen, isDraftSaved, isDraftSaving, isEdit, @@ -589,7 +579,6 @@ class EditorContainer extends Component { handleOnImagePicker={this._handleRoutingAction} handleOnSubmit={this._handleSubmit} initialEditor={this._initialEditor} - isCameraOrPickerOpen={isCameraOrPickerOpen} isDarkTheme={isDarkTheme} isDraftSaved={isDraftSaved} isDraftSaving={isDraftSaving} diff --git a/src/screens/profileEdit/screen/profileEditScreen.js b/src/screens/profileEdit/screen/profileEditScreen.js index a4cba13fe..a42ceb087 100644 --- a/src/screens/profileEdit/screen/profileEditScreen.js +++ b/src/screens/profileEdit/screen/profileEditScreen.js @@ -1,6 +1,7 @@ import React, { PureComponent, Fragment } from 'react'; import { injectIntl } from 'react-intl'; import get from 'lodash/get'; +import ActionSheet from 'react-native-actionsheet'; import { ProfileEditContainer } from '../../../containers'; @@ -15,33 +16,79 @@ class ProfileEditScreen extends PureComponent { constructor(props) { super(props); - this.state = {}; + this.state = { + selectedUploadAction: '', + }; + + this.galleryRef = React.createRef(); } // Component Life Cycles // Component Functions + _showImageUploadActions = async action => { + await this.setState({ selectedUploadAction: action }); + this.galleryRef.current.show(); + }; render() { + const { intl } = this.props; + const { selectedUploadAction } = this.state; + return ( - {({ currentAccount, isDarkTheme, formData }) => ( + {({ + currentAccount, + isDarkTheme, + formData, + handleOnItemChange, + handleMediaAction, + name, + location, + website, + about, + avatarUrl, + coverUrl, + }) => ( this._showImageUploadActions('avatarUrl')} /> this._showImageUploadActions('coverUrl')} + handleOnItemChange={handleOnItemChange} + /> + { + handleMediaAction( + index === 0 ? 'image' : index === 1 && 'camera', + selectedUploadAction, + ); + }} /> )} From 2b003fa90cecfea6665ed5b8b49cd4dae08df09c Mon Sep 17 00:00:00 2001 From: ue Date: Mon, 9 Sep 2019 00:08:43 +0300 Subject: [PATCH 07/16] created profile upload without sc for now --- .../iconButton/view/iconButtonView.js | 37 +++++----- .../profileEditForm/profileEditFormView.js | 6 +- .../userAvatar/view/userAvatarView.js | 26 +++++-- src/containers/profileEditContainer.js | 68 +++++++++++++++---- src/providers/steem/dsteem.js | 64 +++++++++++++++-- src/screens/home/screen/homeScreen.js | 4 +- .../profileEdit/screen/profileEditScreen.js | 4 ++ 7 files changed, 167 insertions(+), 42 deletions(-) diff --git a/src/components/iconButton/view/iconButtonView.js b/src/components/iconButton/view/iconButtonView.js index c70415827..b93f7a70a 100644 --- a/src/components/iconButton/view/iconButtonView.js +++ b/src/components/iconButton/view/iconButtonView.js @@ -1,5 +1,5 @@ import React, { Fragment } from 'react'; -import { TouchableHighlight } from 'react-native'; +import { TouchableHighlight, ActivityIndicator } from 'react-native'; import { Icon } from '../../icon'; import styles from './iconButtonStyles'; @@ -22,28 +22,33 @@ const IconButton = ({ onPress, size, style, + isLoading, }) => ( onPress && onPress()} + onPress={() => !isLoading && onPress && onPress()} underlayColor={backgroundColor || 'white'} disabled={disabled} > - + {!isLoading ? ( + + ) : ( + + )} ); diff --git a/src/components/profileEditForm/profileEditFormView.js b/src/components/profileEditForm/profileEditFormView.js index 5f0407bac..7dbb5e83a 100644 --- a/src/components/profileEditForm/profileEditFormView.js +++ b/src/components/profileEditForm/profileEditFormView.js @@ -15,12 +15,15 @@ import { IconButton } from '../iconButton'; import styles from './profileEditFormStyles'; const ProfileEditFormView = ({ + avatarUrl, coverUrl, isDarkTheme, formData, intl, handleOnItemChange, showImageUploadActions, + isLoading, + handleOnSubmit, ...props }) => ( @@ -29,8 +32,9 @@ const ProfileEditFormView = ({ style={styles.saveButton} iconType="MaterialIcons" name="save" - onPress={() => alert('asd')} + onPress={handleOnSubmit} size={30} + isLoading={isLoading} /> { - const { dispatch, currentUsername } = this.props; + const { + dispatch, + currentUsername: { name }, + } = this.props; - const routeName = currentUsername === username ? ROUTES.TABBAR.PROFILE : ROUTES.SCREENS.PROFILE; + const routeName = name === username ? ROUTES.TABBAR.PROFILE : ROUTES.SCREENS.PROFILE; const navigateAction = NavigationActions.navigate({ routeName, @@ -42,11 +45,24 @@ class UserAvatarView extends Component { }; render() { - const { username, size, style, disableSize, noAction, avatarUrl } = this.props; + const { + username, + size, + style, + disableSize, + noAction, + avatarUrl, + currentUsername: { name, avatar }, + } = this.props; const imageSize = size === 'xl' ? 'large' : 'small'; let _size; const _avatar = username - ? { uri: avatarUrl || `https://steemitimages.com/u/${username}/avatar/${imageSize}` } + ? { + uri: + avatarUrl || name === username + ? avatar + : `https://steemitimages.com/u/${username}/avatar/${imageSize}`, + } : DEFAULT_IMAGE; if (!disableSize) { @@ -73,7 +89,7 @@ class UserAvatarView extends Component { } const mapStateToProps = state => ({ - currentUsername: state.account.currentAccount.name, + currentUsername: state.account.currentAccount, }); export default connect(mapStateToProps)(UserAvatarView); diff --git a/src/containers/profileEditContainer.js b/src/containers/profileEditContainer.js index f20786628..008e2bc37 100644 --- a/src/containers/profileEditContainer.js +++ b/src/containers/profileEditContainer.js @@ -4,8 +4,14 @@ import { connect } from 'react-redux'; import { injectIntl } from 'react-intl'; import ImagePicker from 'react-native-image-crop-picker'; import get from 'lodash/get'; +import { withNavigation } from 'react-navigation'; import { uploadImage } from '../providers/esteem/esteem'; + +import { profileUpdate, getUser } from '../providers/steem/dsteem'; +import { getUserDataWithUsername } from '../realm/realm'; +import { updateCurrentAccount } from '../redux/actions/accountAction'; + // import ROUTES from '../constants/routeNames'; const FORM_DATA = [ @@ -44,7 +50,7 @@ class ProfileEditContainer extends Component { constructor(props) { super(props); this.state = { - isUploading: false, + isLoading: false, about: get(props.currentAccount, 'about.profile.about'), name: get(props.currentAccount, 'about.profile.name'), location: get(props.currentAccount, 'about.profile.location'), @@ -61,15 +67,17 @@ class ProfileEditContainer extends Component { _handleOnSave = () => {}; _handleOnItemChange = (val, item) => { - console.log(val, item); + this.setState({ [item]: val }); }; _uploadImage = (media, action) => { const { intl } = this.props; + + this.setState({ isLoading: true }); uploadImage(media) .then(res => { if (res.data && res.data.url) { - this.setState({ [action]: res.data.url, isUploading: false }); + this.setState({ [action]: res.data.url, isLoading: false }); } }) .catch(error => { @@ -81,7 +89,7 @@ class ProfileEditContainer extends Component { error.message || error.toString(), ); } - this.setState({ isUploading: false }); + this.setState({ isLoading: false }); }); }; @@ -118,7 +126,7 @@ class ProfileEditContainer extends Component { }; _handleMediaOnSelected = (media, action) => { - this.setState({ isUploading: true }, () => { + this.setState({ isLoading: true }, () => { this._uploadImage(media, action); }); }; @@ -138,25 +146,58 @@ class ProfileEditContainer extends Component { } }; + _handleOnSubmit = async () => { + const { currentAccount, pinCode, dispatch, navigation } = this.props; + const { name, location, website, about, coverUrl, avatarUrl } = this.state; + + await this.setState({ isLoading: true }); + + const params = { + profile_image: avatarUrl, + cover_image: coverUrl, + name, + website, + about, + location, + }; + + await profileUpdate(params, pinCode, currentAccount) + .then(async () => { + const _currentAccount = { ...currentAccount }; + _currentAccount.about.profile = { ...params }; + _currentAccount.display_name = name; + + dispatch(updateCurrentAccount(_currentAccount)); + + navigation.goBack(); + }) + .catch(error => { + Alert.alert(error); + }); + + this.setState({ isLoading: false }); + }; + render() { const { children, currentAccount, isDarkTheme } = this.props; - const { isUploading, name, location, website, about, coverUrl, avatarUrl } = this.state; + const { isLoading, name, location, website, about, coverUrl, avatarUrl } = this.state; return ( children && children({ + about, + avatarUrl, + coverUrl, currentAccount, - isDarkTheme, formData: FORM_DATA, - isUploading, handleMediaAction: this._handleMediaAction, handleOnItemChange: this._handleOnItemChange, - name, + handleOnSubmit: this._handleOnSubmit, + isDarkTheme, + isLoading, location, + name, website, - about, - coverUrl, - avatarUrl, }) ); } @@ -165,6 +206,7 @@ class ProfileEditContainer extends Component { const mapStateToProps = state => ({ currentAccount: state.account.currentAccount, isDarkTheme: state.application.isDarkTheme, + pinCode: state.application.pin, }); -export default connect(mapStateToProps)(injectIntl(ProfileEditContainer)); +export default connect(mapStateToProps)(injectIntl(withNavigation(ProfileEditContainer))); diff --git a/src/providers/steem/dsteem.js b/src/providers/steem/dsteem.js index 80521035a..62579b7ff 100644 --- a/src/providers/steem/dsteem.js +++ b/src/providers/steem/dsteem.js @@ -1,3 +1,4 @@ +/* eslint-disable camelcase */ import { Client, PrivateKey } from 'dsteem'; import steemConnect from 'steemconnect'; import Config from 'react-native-config'; @@ -231,7 +232,7 @@ export const ignoreUser = async (currentAccount, pin, data) => { const key = getAnyPrivateKey(currentAccount.local, digitPinCode); if (currentAccount.local.authType === AUTH_TYPE.STEEM_CONNECT) { - const token = decryptKey(currentAccount.local.accessToken, digitPinCode); + const token = decryptKey(get(currentAccount, 'local.accessToken'), digitPinCode); const api = steemConnect.Initialize({ accessToken: token, }); @@ -373,7 +374,7 @@ export const deleteComment = (currentAccount, pin, permlink) => { const key = getAnyPrivateKey(currentAccount.local, digitPinCode); if (currentAccount.local.authType === AUTH_TYPE.STEEM_CONNECT) { - const token = decryptKey(currentAccount.local.accessToken, digitPinCode); + const token = decryptKey(get(currentAccount, 'local.accessToken'), digitPinCode); const api = steemConnect.Initialize({ accessToken: token, }); @@ -453,7 +454,7 @@ const _vote = async (currentAccount, pin, author, permlink, weight) => { const key = getAnyPrivateKey(currentAccount.local, digitPinCode); if (currentAccount.local.authType === AUTH_TYPE.STEEM_CONNECT) { - const token = decryptKey(currentAccount.local.accessToken, digitPinCode); + const token = decryptKey(get(currentAccount, 'local.accessToken'), digitPinCode); const api = steemConnect.Initialize({ accessToken: token, }); @@ -797,7 +798,7 @@ export const unfollowUser = async (currentAccount, pin, data) => { const key = getAnyPrivateKey(currentAccount.local, digitPinCode); if (currentAccount.local.authType === AUTH_TYPE.STEEM_CONNECT) { - const token = decryptKey(currentAccount.local.accessToken, digitPinCode); + const token = decryptKey(get(currentAccount, 'local.accessToken'), digitPinCode); const api = steemConnect.Initialize({ accessToken: token, }); @@ -1163,6 +1164,61 @@ export const boost = (currentAccount, pinCode, point, permlink, author) => { return Promise.reject(new Error('Something went wrong!')); }; +export const profileUpdate = async (params, pin, currentAccount) => { + const digitPinCode = getDigitPinCode(pin); + const key = getActiveKey(get(currentAccount, 'local'), digitPinCode); + + if (get(currentAccount, 'local.authType') === AUTH_TYPE.STEEM_CONNECT) { + // TODO: will do it + const token = decryptKey(get(currentAccount, 'local.accessToken'), digitPinCode); + const api = steemConnect.Initialize({ + accessToken: token, + }); + + const _params = { + account: get(currentAccount, 'name'), + memo_key: get(currentAccount, 'memo_key'), + json_metadata: jsonStringify({ profile: params }), + }; + + const opArray = [['account_update', _params]]; + + return api.broadcast(opArray).then(resp => resp.result); + } + + if (key) { + const opArray = [ + [ + 'account_update', + { + account: get(currentAccount, 'name'), + memo_key: get(currentAccount, 'memo_key'), + json_metadata: jsonStringify({ profile: params }), + }, + ], + ]; + + const privateKey = PrivateKey.fromString(key); + + return new Promise((resolve, reject) => { + client.broadcast + .sendOperations(opArray, privateKey) + .then(result => { + resolve(result); + }) + .catch(error => { + if (get(error, 'jse_info.code') === 4030100) { + error.message = + 'We noticed that your device has incorrect date or time. Please fix Date & Time or Set Automatically and try again.'; + } + reject(error); + }); + }); + } + + return Promise.reject(new Error('You dont have permission!')); +}; + // HELPERS const getAnyPrivateKey = (local, pin) => { diff --git a/src/screens/home/screen/homeScreen.js b/src/screens/home/screen/homeScreen.js index ebc439670..9a8de3b46 100644 --- a/src/screens/home/screen/homeScreen.js +++ b/src/screens/home/screen/homeScreen.js @@ -23,8 +23,6 @@ class HomeScreen extends PureComponent { render() { const { currentAccount, intl, isLoggedIn } = this.props; - let tag; - return (
@@ -50,7 +48,7 @@ class HomeScreen extends PureComponent { diff --git a/src/screens/profileEdit/screen/profileEditScreen.js b/src/screens/profileEdit/screen/profileEditScreen.js index a42ceb087..91c6d308d 100644 --- a/src/screens/profileEdit/screen/profileEditScreen.js +++ b/src/screens/profileEdit/screen/profileEditScreen.js @@ -49,6 +49,8 @@ class ProfileEditScreen extends PureComponent { about, avatarUrl, coverUrl, + isLoading, + handleOnSubmit, }) => ( this._showImageUploadActions('coverUrl')} handleOnItemChange={handleOnItemChange} + isLoading={isLoading} + handleOnSubmit={handleOnSubmit} /> Date: Mon, 9 Sep 2019 00:30:37 +0300 Subject: [PATCH 08/16] updated profile edit --- src/containers/profileEditContainer.js | 4 ++-- src/screens/profile/container/profileContainer.js | 9 +++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/containers/profileEditContainer.js b/src/containers/profileEditContainer.js index 008e2bc37..b81729ce9 100644 --- a/src/containers/profileEditContainer.js +++ b/src/containers/profileEditContainer.js @@ -8,8 +8,7 @@ import { withNavigation } from 'react-navigation'; import { uploadImage } from '../providers/esteem/esteem'; -import { profileUpdate, getUser } from '../providers/steem/dsteem'; -import { getUserDataWithUsername } from '../realm/realm'; +import { profileUpdate } from '../providers/steem/dsteem'; import { updateCurrentAccount } from '../redux/actions/accountAction'; // import ROUTES from '../constants/routeNames'; @@ -169,6 +168,7 @@ class ProfileEditContainer extends Component { dispatch(updateCurrentAccount(_currentAccount)); + navigation.state.params.fetchUser(); navigation.goBack(); }) .catch(error => { diff --git a/src/screens/profile/container/profileContainer.js b/src/screens/profile/container/profileContainer.js index 8c10db167..52c14c1c8 100644 --- a/src/screens/profile/container/profileContainer.js +++ b/src/screens/profile/container/profileContainer.js @@ -344,9 +344,14 @@ class ProfileContainer extends Component { }; _handleOnPressProfileEdit = () => { - const { navigation } = this.props; + const { navigation, currentAccount } = this.props; - navigation.navigate(ROUTES.SCREENS.PROFILE_EDIT); + navigation.navigate({ + routeName: ROUTES.SCREENS.PROFILE_EDIT, + params: { + fetchUser: () => this.setState({ user: currentAccount }), + }, + }); }; render() { From 8a404d60f4734ca281e8a7bc0b25230d45036c6c Mon Sep 17 00:00:00 2001 From: ue Date: Mon, 9 Sep 2019 22:07:00 +0300 Subject: [PATCH 09/16] updated avatar preview issues --- .../header/container/headerContainer.js | 25 +++++-------------- src/components/header/view/headerView.js | 5 ++-- .../userAvatar/view/userAvatarView.js | 5 ++-- src/containers/profileEditContainer.js | 3 +-- .../container/applicationContainer.js | 7 ------ 5 files changed, 13 insertions(+), 32 deletions(-) diff --git a/src/components/header/container/headerContainer.js b/src/components/header/container/headerContainer.js index f15bf207a..6a8871cac 100644 --- a/src/components/header/container/headerContainer.js +++ b/src/components/header/container/headerContainer.js @@ -1,12 +1,7 @@ import React, { PureComponent } from 'react'; import { withNavigation } from 'react-navigation'; import { connect } from 'react-redux'; - -// Services and Actions - -// Middleware - -// Constants +import { get, has } from 'lodash'; // Component import HeaderView from '../view/headerView'; @@ -30,7 +25,7 @@ class HeaderContainer extends PureComponent { _handleOpenDrawer = () => { const { navigation } = this.props; - if (navigation && navigation.openDrawer && typeof navigation.openDrawer === 'function') { + if (has(navigation, 'openDrawer') && typeof get(navigation, 'openDrawer') === 'function') { navigation.openDrawer(); } }; @@ -52,19 +47,11 @@ class HeaderContainer extends PureComponent { isLoginDone, isDarkTheme, } = this.props; - let displayName; - let username; - let reputation; + const _user = isReverse && selectedUser ? selectedUser : currentAccount; - if (isReverse && selectedUser) { - displayName = selectedUser.display_name; - username = selectedUser.name; - reputation = selectedUser.reputation; - } else if (!isReverse) { - displayName = currentAccount.display_name; - username = currentAccount.name; - reputation = currentAccount.reputation; - } + const displayName = get(_user, 'display_name'); + const username = get(_user, 'name'); + const reputation = get(_user, 'reputation'); return ( { - const _currentAccount = { ...currentAccount }; + const _currentAccount = { ...currentAccount, display_name: name, avatar: avatarUrl }; _currentAccount.about.profile = { ...params }; - _currentAccount.display_name = name; dispatch(updateCurrentAccount(_currentAccount)); diff --git a/src/screens/application/container/applicationContainer.js b/src/screens/application/container/applicationContainer.js index 7801ccc0d..12a0688ec 100644 --- a/src/screens/application/container/applicationContainer.js +++ b/src/screens/application/container/applicationContainer.js @@ -487,13 +487,6 @@ class ApplicationContainer extends Component { const isExistUser = await getExistUser(); realmObject[0].name = currentUsername; - dispatch( - updateCurrentAccount({ - name: realmObject[0].username, - avatar: realmObject[0].avatar, - authType: realmObject[0].authType, - }), - ); // If in dev mode pin code does not show if ((!isExistUser || !pinCode) && _isPinCodeOpen) { dispatch(openPinCodeModal()); From 92e5f88936c4c01d679ea508514d9fb99774d7e5 Mon Sep 17 00:00:00 2001 From: ue Date: Mon, 9 Sep 2019 23:03:11 +0300 Subject: [PATCH 10/16] added alert for steemconnect --- src/containers/profileEditContainer.js | 2 +- src/providers/steem/dsteem.js | 16 +--------------- 2 files changed, 2 insertions(+), 16 deletions(-) diff --git a/src/containers/profileEditContainer.js b/src/containers/profileEditContainer.js index 9ea301b89..835a20eb3 100644 --- a/src/containers/profileEditContainer.js +++ b/src/containers/profileEditContainer.js @@ -171,7 +171,7 @@ class ProfileEditContainer extends Component { navigation.goBack(); }) .catch(error => { - Alert.alert(error); + Alert.alert(get(error, 'message')); }); this.setState({ isLoading: false }); diff --git a/src/providers/steem/dsteem.js b/src/providers/steem/dsteem.js index 62579b7ff..c71464136 100644 --- a/src/providers/steem/dsteem.js +++ b/src/providers/steem/dsteem.js @@ -1169,21 +1169,7 @@ export const profileUpdate = async (params, pin, currentAccount) => { const key = getActiveKey(get(currentAccount, 'local'), digitPinCode); if (get(currentAccount, 'local.authType') === AUTH_TYPE.STEEM_CONNECT) { - // TODO: will do it - const token = decryptKey(get(currentAccount, 'local.accessToken'), digitPinCode); - const api = steemConnect.Initialize({ - accessToken: token, - }); - - const _params = { - account: get(currentAccount, 'name'), - memo_key: get(currentAccount, 'memo_key'), - json_metadata: jsonStringify({ profile: params }), - }; - - const opArray = [['account_update', _params]]; - - return api.broadcast(opArray).then(resp => resp.result); + return Promise.reject(new Error('Steem connect profile update not implemented yet.')); } if (key) { From 21894227f576b2556cfa3035c0000949ec44b1f2 Mon Sep 17 00:00:00 2001 From: ue Date: Tue, 10 Sep 2019 21:43:48 +0300 Subject: [PATCH 11/16] added again for steemconnect logic --- src/providers/steem/dsteem.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/providers/steem/dsteem.js b/src/providers/steem/dsteem.js index c71464136..6570745fa 100644 --- a/src/providers/steem/dsteem.js +++ b/src/providers/steem/dsteem.js @@ -1169,7 +1169,20 @@ export const profileUpdate = async (params, pin, currentAccount) => { const key = getActiveKey(get(currentAccount, 'local'), digitPinCode); if (get(currentAccount, 'local.authType') === AUTH_TYPE.STEEM_CONNECT) { - return Promise.reject(new Error('Steem connect profile update not implemented yet.')); + const token = decryptKey(get(currentAccount, 'local.accessToken'), digitPinCode); + const api = steemConnect.Initialize({ + accessToken: token, + }); + + const _params = { + account: get(currentAccount, 'name'), + memo_key: get(currentAccount, 'memo_key'), + json_metadata: jsonStringify(params), + }; + + const opArray = [['account_update', _params]]; + + return api.broadcast(opArray).then(resp => resp.result); } if (key) { From a603e2dc6d38705f67e39e27b8953063c97024d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?u=C4=9Fur=20erdal?= Date: Wed, 11 Sep 2019 23:16:12 +0300 Subject: [PATCH 12/16] Update src/components/avatarHeader/avatarHeaderView.js Co-Authored-By: Mustafa Buyukcelebi --- src/components/avatarHeader/avatarHeaderView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/avatarHeader/avatarHeaderView.js b/src/components/avatarHeader/avatarHeaderView.js index a3640e8d8..1dd60c6b7 100644 --- a/src/components/avatarHeader/avatarHeaderView.js +++ b/src/components/avatarHeader/avatarHeaderView.js @@ -44,7 +44,7 @@ const AvatarHeader = ({ style={styles.addButton} iconType="MaterialCommunityIcons" name="plus" - onPress={() => showImageUploadActions()} + onPress={showImageUploadActions} size={15} /> From efc0e062cd146485037e3ed58ea0ebc22754feae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?u=C4=9Fur=20erdal?= Date: Wed, 11 Sep 2019 23:16:41 +0300 Subject: [PATCH 13/16] Update src/components/formInput/view/formInputView.js Co-Authored-By: Mustafa Buyukcelebi --- src/components/formInput/view/formInputView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/formInput/view/formInputView.js b/src/components/formInput/view/formInputView.js index 3b22aeaa4..c86cc9a5c 100644 --- a/src/components/formInput/view/formInputView.js +++ b/src/components/formInput/view/formInputView.js @@ -102,7 +102,7 @@ class FormInputView extends Component { placeholder={placeholder} editable={isEditable || true} textContentType={type} - onChangeText={val => this._handleOnChange(val)} + onChangeText={this._handleOnChange} value={value} /> From cd0de5dcceef72ba87eb940209983127c30f99d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?u=C4=9Fur=20erdal?= Date: Wed, 11 Sep 2019 23:19:06 +0300 Subject: [PATCH 14/16] Update src/components/avatarHeader/avatarHeaderView.js Co-Authored-By: Mustafa Buyukcelebi --- src/components/avatarHeader/avatarHeaderView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/avatarHeader/avatarHeaderView.js b/src/components/avatarHeader/avatarHeaderView.js index 1dd60c6b7..dd817387c 100644 --- a/src/components/avatarHeader/avatarHeaderView.js +++ b/src/components/avatarHeader/avatarHeaderView.js @@ -28,7 +28,7 @@ const AvatarHeader = ({ iconStyle={styles.backIcon} iconType="MaterialIcons" name="arrow-back" - onPress={() => navigation.goBack()} + onPress={navigation.goBack} size={25} /> From 08c9305df2a6dfdabce6814625ca7f49b96825b5 Mon Sep 17 00:00:00 2001 From: ue Date: Thu, 12 Sep 2019 23:08:35 +0300 Subject: [PATCH 15/16] updated profile edit regarding code review --- src/components/avatarHeader/avatarHeaderView.js | 2 +- src/constants/steemConnectOptions.js | 2 +- src/containers/profileEditContainer.js | 11 +++++++---- src/providers/steem/dsteem.js | 2 +- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/avatarHeader/avatarHeaderView.js b/src/components/avatarHeader/avatarHeaderView.js index a3640e8d8..b877e4338 100644 --- a/src/components/avatarHeader/avatarHeaderView.js +++ b/src/components/avatarHeader/avatarHeaderView.js @@ -48,7 +48,7 @@ const AvatarHeader = ({ size={15} /> - {name} + {!!name && {name}} {`@${username} (${reputation})`} diff --git a/src/constants/steemConnectOptions.js b/src/constants/steemConnectOptions.js index eea132c16..4a06ae128 100644 --- a/src/constants/steemConnectOptions.js +++ b/src/constants/steemConnectOptions.js @@ -3,5 +3,5 @@ export const steemConnectOptions = { client_id: 'esteemapp', redirect_uri: 'http://127.0.0.1:3415/', scope: - 'vote,comment,delete_comment,comment_options,custom_json,claim_reward_balance,account_update,offline,account_update2', + 'vote,comment,delete_comment,comment_options,custom_json,claim_reward_balance,account_update,offline', }; diff --git a/src/containers/profileEditContainer.js b/src/containers/profileEditContainer.js index 835a20eb3..e8be93e0a 100644 --- a/src/containers/profileEditContainer.js +++ b/src/containers/profileEditContainer.js @@ -63,8 +63,6 @@ class ProfileEditContainer extends Component { // Component Functions - _handleOnSave = () => {}; - _handleOnItemChange = (val, item) => { this.setState({ [item]: val }); }; @@ -146,7 +144,7 @@ class ProfileEditContainer extends Component { }; _handleOnSubmit = async () => { - const { currentAccount, pinCode, dispatch, navigation } = this.props; + const { currentAccount, pinCode, dispatch, navigation, intl } = this.props; const { name, location, website, about, coverUrl, avatarUrl } = this.state; await this.setState({ isLoading: true }); @@ -171,7 +169,12 @@ class ProfileEditContainer extends Component { navigation.goBack(); }) .catch(error => { - Alert.alert(get(error, 'message')); + Alert.alert( + intl.formatMessage({ + id: 'alert.fail', + }), + get(error, 'message', error.toString()), + ); }); this.setState({ isLoading: false }); diff --git a/src/providers/steem/dsteem.js b/src/providers/steem/dsteem.js index 0abfa72b8..f8985ff47 100644 --- a/src/providers/steem/dsteem.js +++ b/src/providers/steem/dsteem.js @@ -233,7 +233,7 @@ export const ignoreUser = async (currentAccount, pin, data) => { if (currentAccount.local.authType === AUTH_TYPE.STEEM_CONNECT) { const token = decryptKey(currentAccount.local.accessToken, digitPinCode); - const api = new Steemconnect.Client({ + const api = new steemconnect.Client({ accessToken: token, }); From f7d10da0021e0393c12f59e3f2737ad8aa92d29f Mon Sep 17 00:00:00 2001 From: ue Date: Sun, 15 Sep 2019 12:00:41 +0300 Subject: [PATCH 16/16] created a utils for resizing images --- src/components/profileEditForm/profileEditFormView.js | 6 +++++- src/components/profileSummary/view/profileSummaryView.js | 3 ++- src/utils/image.js | 9 +++++++++ 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/profileEditForm/profileEditFormView.js b/src/components/profileEditForm/profileEditFormView.js index 189b2ae3b..6a713dfc9 100644 --- a/src/components/profileEditForm/profileEditFormView.js +++ b/src/components/profileEditForm/profileEditFormView.js @@ -11,6 +11,10 @@ import DARK_COVER_IMAGE from '../../assets/dark_cover_image.png'; // Components import { FormInput } from '../formInput'; import { IconButton } from '../iconButton'; + +// Utils +import { getResizedImage } from '../../utils/image'; + // Styles import styles from './profileEditFormStyles'; @@ -43,7 +47,7 @@ const ProfileEditFormView = ({ diff --git a/src/components/profileSummary/view/profileSummaryView.js b/src/components/profileSummary/view/profileSummaryView.js index da9e087d5..1fe029f11 100644 --- a/src/components/profileSummary/view/profileSummaryView.js +++ b/src/components/profileSummary/view/profileSummaryView.js @@ -21,6 +21,7 @@ import { DropdownButton } from '../../dropdownButton'; // Utils import { makeCountFriendly } from '../../../utils/formatter'; +import { getResizedImage } from '../../../utils/image'; // Styles import styles from './profileSummaryStyles'; @@ -95,7 +96,7 @@ class ProfileSummaryView extends PureComponent { const isColumn = rowLength && DEVICE_WIDTH / rowLength <= 7.3; const followButtonIcon = !isFollowing ? 'account-plus' : 'account-minus'; - const coverImageUrl = `https://steemitimages.com/400x0/${coverImage}`; + const coverImageUrl = getResizedImage(coverImage, 400); dropdownOpions.push(!isMuted ? 'MUTE' : 'UNMUTE'); diff --git a/src/utils/image.js b/src/utils/image.js index 3bc1b7d85..009f2d8e6 100644 --- a/src/utils/image.js +++ b/src/utils/image.js @@ -63,3 +63,12 @@ export const catchDraftImage = body => { } return null; }; + +export const getResizedImage = (url, size) => { + if (!url) return ''; + const _size = size || 400; + + if (url.includes('img.esteem')) return `https://img.esteem.ws/${_size}x0/${url}`; + + return `https://steemitimages.com/${size}x0/${url}`; +};