React Native Tutorial Step 19 –Editing Profile.js

Did you join our mailing list yet?

Today, we’re going to start working on our Profile.js file. There’s not a lot to talk about, just a bunch of TODOs.

TODO #1: Make the modifications and additions of existing and new imports.

import { Image, StyleSheet, TextInput } from 'react-native';
import { Container, Header, Body, Title, Content, Form, Item, Input, Icon, Button, Text, Label, View, H3, Picker, ListItem, Checkbox } from 'native-base';
import * as app from '../component/App'
import * as config from '../../../services/config'
import defaultImage from '../../../assets/profile120x120.png'
import styles from "../styles";

TODO #2: Change React.Component to just component.

class Profile extends Component

TODO #3: Change the constructor to this:

constructor(props) {
  super(props);
  var user = props.user.user
  var user_goals = user.length != 0 ? user.goals.split(",") : []
  this.state = {
   isReady: false,
   gender: user.length != 0 ? user.gender : "",
        goals: user.length != 0 ? user.goals : "",
        social: user_goals.includes("social"),
        performance: user_goals.includes("performance"),
        competition: user_goals.includes("competition"),
        training: user_goals.includes("training/practice"),
        body_type: user.length != 0 ? user.body_type : "",
        ethnic: user.length != 0 ? user.ethnic : "",
        drinker: user.length != 0 ? user.drinker : "",
        smoker: user.length != 0 ? user.smoker : "",
        relationship_status: user.length != 0 ? user.relationship_status : "",
  }
 }

TODO #4: Completely REMOVE the componentDidMount and componentDidUpdate functions.

TODO #5: Add some onChangeFunctions for later.

onGenderChange(value) {
     this.setState({ gender: value });
}
onBodyTypeChange(value) {
     this.setState({ body_type: value });
}
onEthnicChange(value) {
     this.setState({ ethnic: value });
}
onDrinkerChange(value) {
     this.setState({ drinker: value });
}
onSmokerChange(value) {
     this.setState({ smoker: value });
}
onRelationshipStatusChange(value) {
     this.setState({ relationship_status: value });
}

TODO #6: In your render function change the document.location.hostname conditional to something like this:

// Before
if(document.location.hostname.includes("staging.dancingnomads.com")) {
   cloudfront_url = cloudfront.cloudfront_staging
} else if (document.location.hostname.includes("dancingnomads.com")) {
   cloudfront_url = cloudfront.cloudfront_prod
} else {
   cloudfront_url = cloudfront.cloudfront_dev
}
if (user.user_photo != undefined && user.user_photo.length > 1) {
   var imageLink = cloudfront_url+user.user_photo.match(/profile\/(.*)/)[0]
   profilePicture = <div className="profileImage"><Image src={imageLink} width={280} height={280} /></div>
} else {
   profilePicture = <div className="profileImage"><Image src={defaultImage} width={280} height={280} /></div>
}
// After
if (config.environment.APP_ENV == "staging") {
   cloudfront_url = config.cloudfront_staging
} else if (config.environment.APP_ENV == "production") {
   cloudfront_url = config.cloudfront_prod
} else {
   cloudfront_url = config.cloudfront_dev
}
if (user.user_photo != undefined && user.user_photo.length > 1) {
   var imageLink = cloudfront_url+user.user_photo.match(/profile\/(.*)/)[0]
   profilePicture = <Image source={{uri: cloudfront_url+user.user_photo.match(/profile\/(.*)/)[0]}} style={{width: 120, height: 120, borderRadius: 80}}/>
} else {
   profilePicture = <Image source={defaultImage} style={{width: 120, height: 120, borderRadius: 80}}/>
}

TODO #7: Empty out the return() function in render() and REPLACE it entirely with this:

return (
       <Container style={{ paddingTop: Constants.statusBarHeight }}>
         <Content padder>          
          <View style={{ flex: 1, alignItems: "center" }}>
           {profilePicture}
          </View>
<Form>
            <H3 style={styles.profileHeaderStyles}>Your Traits</H3>
             <Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Gender"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.body_type}
                    onValueChange={this.onGenderChange.bind(this)}
                  >
                    <Picker.Item label="Male" value="M" />
                    <Picker.Item label="Female" value="F" />
                  </Picker>
                </Item>
<Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Body Type"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.body_type}
                    onValueChange={this.onBodyTypeChange.bind(this)}
                  >
                    <Picker.Item label="Slim" value="slim" />
                    <Picker.Item label="Average" value="average" />
                    <Picker.Item label="Athletic" value="athletic" />
                    <Picker.Item label="Curvy" value="curvy" />
                    <Picker.Item label="Large" value="large" />
                  </Picker>
                </Item>
<Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Ethnicity"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.body_type}
                    onValueChange={this.onEthnicChange.bind(this)}
                  >
                    <Picker.Item label="Caucasian" value="caucasian" />
                    <Picker.Item label="Black" value="black" />
                    <Picker.Item label="Hispanic" value="hispanic" />
                    <Picker.Item label="Indian" value="indian" />
                    <Picker.Item label="Middle Eastern" value="middle eastern" />
                    <Picker.Item label="Native" value="native" />
                    <Picker.Item label="Asian" value="asian" />
                    <Picker.Item label="Mixed" value="mixed" />
                    <Picker.Item label="Other Ethnicity" value="other ethnicity" />
                  </Picker>
                </Item>
<Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Drinking"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.drinker}
                    onValueChange={this.onDrinkerChange.bind(this)}
                  >
                    <Picker.Item label="Non-Drinker" value="non-drinker" />
                    <Picker.Item label="Social Drinker" value="social drinker" />
                    <Picker.Item label="Regular Drinker" value="regular drinker" />
                  </Picker>
                </Item>
<Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Smoking"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.smoker}
                    onValueChange={this.onSmokerChange.bind(this)}
                  >
                    <Picker.Item label="Non-Smoker" value="non-smoker" />
                    <Picker.Item label="Occasional Smoker" value="occasional smoker" />
                    <Picker.Item label="Regular Smoker" value="regular smoker" />
                  </Picker>
                </Item>
<Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Relationship Status"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.relationship_status}
                    onValueChange={this.onRelationshipStatusChange.bind(this)}
                  >
                    <Picker.Item label="Single" value="single" />
                    <Picker.Item label="Separated" value="separated" />
                    <Picker.Item label="In a Relationship" value="in a relationship" />
                    <Picker.Item label="Married" value="married" />
                  </Picker>
                </Item>
<H3 style={styles.profileHeaderStyles}>Your Dance Goals</H3>
                <ListItem>
                 <CheckBox checked={this.state.social} />
                 <Body>
                    <Text>Social</Text>
                 </Body>
               </ListItem>
               <ListItem>
                 <CheckBox checked={this.state.performance} />
                 <Body>
                    <Text>Performance</Text>
                 </Body>
               </ListItem>
               <ListItem>
                 <CheckBox checked={this.state.competition} />
                 <Body>
                    <Text>Competition</Text>
                 </Body>
               </ListItem>
               <ListItem>
                 <CheckBox checked={this.state.training} />
                 <Body>
                    <Text>Training & Practice</Text>
                 </Body>
               </ListItem>
<Button block primary style={styles.loginMarginTop} onPress={(values) => this.submit(values)}>
             <Text>Save</Text>
            </Button>
            <Button transparent info style={{alignSelf: 'center'}}>
                <Text>Cancel</Text>
             </Button>
            </Form>           
       </Content>
        </Container>
)

TODO #8: Change our export default function at the end of the file.

// Before
export default Profile = connect(app.mapStateToProps, app.mapDispatchToProps)(Profile);
// After
Profile = connect(app.mapStateToProps, app.mapDispatchToProps)(Profile);
export default reduxForm({
 form: 'profile', // a unique name for this form
 enableReinitialize: true
})(Profile);

That’s it. Not a lot of new concepts today, just a whole bunch of copy and paste. Don’t you love tutorials like this? *wink*

Hope you had fun and learned something today! Don’t forget to give this post some claps! :)

Don’t like reading? Try watching the video

Did you subscribe to our Youtube channel yet?

Reference Links

None!

Connect with me!

Linkedin: https://www.linkedin.com/in/donaldlee50
Instagram: https://www.instagram.com/donlee50/
Twitter: https://twitter.com/donaldlee50
Youtube: https://youtube.com/coursehack
Mailing List: http://bit.ly/coursehack-mailing-list
Coursehack’s Facebook Group: bit.ly/join-coursehack-facebook-group

** Don’t forget to give some claps and share with your fellow React Native & Expo developers!