radiegtya

const options = {
    image: {
        url: 'https://i.ibb.co/TBzjW9h/circle-2x.png',
        height: 190,
        width: 190
    },
    socialButtons: [
        {
            name: 'twitter',
            borderColor:'#3741A8',

radiegtya

render(){
    // #1. use this.props.profiles.data from redux to get the list of object returned from REST API
    const {name, experiences, educations, summary, profilePicture, bgPicture} = this.props.profiles.data

    const latestExperience = experiences? experiences[0]: null
    const position = latestExperience? `${latestExperience.position} at ${latestExperience.companyName}`: '-'

    const latestEducation = educations? educations[0]: null
    const education = latestEducation? latestEducation.school: '-'

radiegtya

class Profiles extends Component {
  // ... THE REST OF CLASS CODE 
}

// #1. make const named mapStateToProps to mapping our state, to object called profiles
// the state is called profilesReducer because we got it from the profile reducers that we made earlier
const mapStateToProps = (state)=>({
  profiles: state.profilesReducer
})

radiegtya

// #1. Remove export default from class
class Profiles extends Component{

  state = {
    data: {}
  }

  // #2. Remove getProfile method, because now we have it on actions
  // getProfile(){
  //   const url = `https://api.backendless.com/221BAB21-F149-D2B2-FF55-B2DD8ECDFE00/31717453-DFFE-7469-FF91-D1EAC0C16700/data/profiles/564DD7D4-4F12-B56A-FFD5-1E4B0E7D9D00?loadRelations=experiences%2Ceducations`

radiegtya

import React, { Component } from 'react'
import {
  // ... THE REST NATIVEBASE IMPORT COMPONENT
  Thumbnail, Spinner // #1. Add Spinner component to show loading on screen later
} from 'native-base'
import { View, StyleSheet, Image, Dimensions } from 'react-native'
// import axios from 'axios' // #2. Remove axios from here, because we already have axios in our actions
import { connect } from 'react-redux' //#3. Import connect from react-redux to connecting our component with redux

import { getProfile } from '../actions' //#4. Import actions that we made earlier

radiegtya

import { combineReducers } from 'redux'

import nav from './nav'
// #1. remove the contactsReducer, and replace it with profilesReducer instead
import profilesReducer from '../profiles/reducers'

const appReducer = combineReducers({
  nav,
  // #2. register it on combineReducers, note: because we can register many reducer here
  profilesReducer

radiegtya

// #1. make the default state, data is an object to save profile data, and isLoading is boolean to know whether data is ready or not
const initialState = {
    isLoading: false,
    data: {}
}

// #2. a function to decide what state should be returned by each action.type
const profilesReducer = (state = initialState, action) => {
    switch (action.type) {
      case 'GET_PROFILE_PENDING':

radiegtya

import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers'
import { createStore, applyMiddleware } from 'redux'
// #1. import redux-promise-middleware
import promiseMiddleware from 'redux-promise-middleware'
// #2. import redux-logger
import logger from 'redux-logger'

import reducers from './rootReducers'

const middleware = createReactNavigationReduxMiddleware(

radiegtya

// #1. import axios here to fetch data
import axios from 'axios'

// #2. make a function called getProfile as an action
export function getProfile(){
  const url = `https://api.backendless.com/221BAB21-F149-D2B2-FF55-B2DD8ECDFE00/31717453-DFFE-7469-FF91-D1EAC0C16700/data/profiles/564DD7D4-4F12-B56A-FFD5-1E4B0E7D9D00?loadRelations=experiences%2Ceducations`

  return {
    type: 'GET_PROFILE', //#3. we call our type GET_PROFILE, so reducer can choose what state should we return
    payload: axios.get(url) //#4. we'll using redux-promise-middleware, so what we return are a promises

radiegtya

render(){
    // #1. replace the position and education with array from REST API Backendless
    // const {name, position, education, summary, profilePicture, bgPicture} = this.state.data
    const {name, experiences, educations, summary, profilePicture, bgPicture} = this.state.data

    // #2. get the latestExperience from experiences array, we also use error checking (note: we also use ES6 concatination, don't confuse with it)
    const latestExperience = experiences? experiences[0]: null
    const position = latestExperience? `${latestExperience.position} at ${latestExperience.companyName}`: '-'

    // #3. get the latest education from educations array