created profile edit ui

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,
     };

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,
   },
 });

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,
+}) => (
   <View style={styles.container}>
     <KeyboardAwareScrollView
       enableAutoAutomaticScroll={Platform.OS === 'ios'}
       contentContainerStyle={{ flexGrow: 1 }}
     >
-      <Text>Profile picture URL</Text>
-      <FormInput
-        wrapperStyle={styles.formStyle}
-        isValid
-        height={30}
-        onChange={value => alert('changed')}
-        placeholder="profile picture url"
-        isEditable
-        type="username"
-        isFirstImage
-        value="sex"
-      />
+      <View style={styles.formItem}>
+        <Text style={styles.label}>Profile picture URL</Text>
+        <FormInput
+          wrapperStyle={styles.formStyle}
+          isValid
+          height={30}
+          onChange={value => alert('changed')}
+          placeholder="profile picture url"
+          isEditable
+          type="text"
+          value={avatarUrl}
+        />
+      </View>
+
+      <View style={styles.formItem}>
+        <Text style={styles.label}>Cover image URL</Text>
+        <FormInput
+          wrapperStyle={styles.formStyle}
+          isValid
+          height={30}
+          onChange={value => alert('changed')}
+          placeholder="Cover image URL"
+          isEditable
+          type="text"
+          value={coverUrl}
+        />
+      </View>
+
+      <TouchableOpacity style={styles.coverImgWrapper} onPress={() => alert('upload')}>
+        <Image
+          style={styles.coverImg}
+          source={{ uri: `https://steemitimages.com/400x0/${coverUrl}` }}
+          defaultSource={isDarkTheme ? DARK_COVER_IMAGE : LIGHT_COVER_IMAGE}
+        />
+
+        <IconButton
+          iconStyle={styles.addIcon}
+          style={styles.addButton}
+          iconType="MaterialCommunityIcons"
+          name="plus"
+          onPress={() => alert('upload')}
+          size={15}
+        />
+      </TouchableOpacity>
+
+      <View style={styles.formItem}>
+        <Text style={styles.label}>Display Name</Text>
+        <FormInput
+          wrapperStyle={styles.formStyle}
+          isValid
+          height={30}
+          onChange={value => alert('changed')}
+          placeholder="Display name"
+          isEditable
+          type="text"
+          value={name}
+        />
+      </View>
+
+      <View style={styles.formItem}>
+        <Text style={styles.label}>About</Text>
+        <FormInput
+          wrapperStyle={styles.formStyle}
+          isValid
+          height={30}
+          onChange={value => alert('changed')}
+          placeholder="About"
+          isEditable
+          type="text"
+          value={about}
+        />
+      </View>
+
+      <View style={styles.formItem}>
+        <Text style={styles.label}>Location</Text>
+        <FormInput
+          wrapperStyle={styles.formStyle}
+          isValid
+          height={30}
+          onChange={value => alert('changed')}
+          placeholder="Location"
+          isEditable
+          type="text"
+          value={location}
+        />
+      </View>
+
+      <View style={styles.formItem}>
+        <Text style={styles.label}>Website</Text>
+        <FormInput
+          wrapperStyle={styles.formStyle}
+          isValid
+          height={30}
+          onChange={value => alert('changed')}
+          placeholder="Website"
+          isEditable
+          type="text"
+          value={website}
+        />
+      </View>
     </KeyboardAwareScrollView>
   </View>
 );

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);

src/screens/profileEdit/screen/profileEditScreen.js

@@ -25,21 +25,22 @@ class ProfileEditScreen extends PureComponent {
   render() {
     return (
       <ProfileEditContainer>
-        {({ currentAccount }) => (
+        {({ currentAccount, isDarkTheme }) => (
           <Fragment>
             <AvatarHeader
               username={get(currentAccount, 'name')}
               name={get(currentAccount, 'about.profile.name')}
               reputation={get(currentAccount, 'reputation')}
-              avatarUrl={null}
+              avatarUrl={get(currentAccount, 'avatar')}
             />
             <ProfileEditForm
+              isDarkTheme={isDarkTheme}
               about={get(currentAccount, 'about.profile.about')}
-              name={get(currentAccount, 'about.profile.name')}
-              location="location"
-              website="website"
-              coverUrl={get(currentAccount, 'reputation')}
-              avatarUrl={null}
+              name={get(currentAccount, 'about.profile.profile.name')}
+              location={get(currentAccount, 'about.profile.profile.location')}
+              website={get(currentAccount, 'about.profile.profile.website')}
+              coverUrl={get(currentAccount, 'about.profile.cover_image')}
+              avatarUrl={get(currentAccount, 'avatar')}
             />
           </Fragment>
         )}