app.js

import React, {Component} from 'react';
import { Provider } from 'react-redux';
import { StyleSheet } from 'react-native';

import store from './store';
import MarketingCard from './src/app/components/MarketingCard';


export default class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <MarketingCard/>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

index.js

import { combineReducers } from 'redux';
import marketReducer from './MarketingCardReducer';

export default combineReducers({
    markets: marketReducer
});

MarketingCard.js

import React, { Component } from 'react';
import { View, Text, TextInput, Image, StyleSheet, TouchableOpacity, ScrollView, FlatList } from 'react-native';
import { connect } from 'react-redux';
import { fetchMarkets } from '../actions/MarketingCardAction';
import _ from 'lodash';


function get_marketing_updates_from_projects(projects)
{
  let all_marketing_plans = [];
  _.each(projects, function(project) {
    // all_marketing_plans = project.marketingplans.reduce(marketing_plan_array_reducer, all_marketing_plans);
      project.marketingplans.reduce( function(coll, marketing_plan){
          coll.push( _.extend(marketing_plan, {"project_name": project.name, "project_id": project.id}));
          return coll;
      }, all_marketing_plans );
  });

  //console.log("All marketing plans", all_marketing_plans);
  return all_marketing_plans;
}

const MarketingUpdateCard = ({ project_name, title, description, image }) => (
    <View style={styles.container}>
        <View style={styles.cardView}>
            <Text style={styles.projectName}>{project_name}</Text>
            <Text style={styles.title}>{title}</Text>
            <Text style={styles.description}>Description: {description}</Text>
            <Image
            style={styles.img}
            source={{uri: image}}
            />
            <View style={styles.buttons}>
                <TouchableOpacity><Text style={styles.like}>Like</Text></TouchableOpacity>
                <TouchableOpacity><Text style={styles.share}>Share</Text></TouchableOpacity>
            </View>
            <View style={styles.commentSection}>
                
                <TextInput style={styles.commentInput} maxLength={40} underlineColorAndroid='#FFFFFF'
                placeholder='Leave a comment'></TextInput>
                <View style={styles.commentContainer}>
                    <View style={styles.commentContent}>
                        <Text style={styles.commentUser}>Calley WildFeed</Text>
                        <Text style={styles.comment}>Example comment 1</Text>
                    </View>
                    <View style={styles.commentContent}>
                        <Text style={styles.commentUser}>Calley WildFeed</Text>
                        <Text style={styles.comment}>Example comment 2</Text>
                    </View>
                    <View style={styles.commentContent}>
                        <Text style={styles.commentUser}>Calley WildFeed</Text>
                        <Text style={styles.comment}>Example comment 3</Text>
                    </View>
                </View>
                

            </View>
        </View>
    </View>
)

class MarketingCard extends Component {

    componentDidMount (){
        this.props.fetchMarkets();
    }

    render() {
        
        let marketing_plan_projects = [];
       
        marketing_plan_projects = this.props.markets.data ? this.props.markets.data : null;
        let marketing_updates = get_marketing_updates_from_projects(marketing_plan_projects);
        
        console.log(marketing_updates);


        return (
                <FlatList
                data={marketing_updates}
                renderItem={({ item }) => (
                    <MarketingUpdateCard {...item} />
                )}
                />
        );
    }
}  

const styles = StyleSheet.create({
    container: {
       flex: 1,
       paddingLeft: 10,
       paddingRight: 10
    },
    cardView: {
        paddingLeft: 15,
        paddingRight: 15,
        marginTop: 20,
    },
    projectName: {
        alignSelf: 'center',
        fontSize: 28,
        color: 'black',
        fontWeight: '700'
    },
    title: {
        alignSelf: 'center',
        marginTop: 10,
        fontSize: 16,
  
    },
    description: {
        alignSelf: 'center',
        marginTop: 10,
        color: 'black',
        fontSize: 24,
    },
    img: {
        height: 200,
        marginTop: 10,
        alignSelf: 'stretch'
    },
    like:{
        justifyContent: 'flex-start',
        marginTop: 15,
        fontSize: 16,
        color: 'blue',
    },
    share: {
        justifyContent: 'flex-end',
        marginTop: 15,
        fontSize: 16,
        color: 'blue',
    },
    buttons: {
        flexDirection:'row', 
        justifyContent: 'space-between',
    },
    commentInput: {
        borderWidth: 1,
        borderRadius: 2,
        borderColor: '#ddd',
        borderBottomWidth: 0,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2,
        elevation: 1,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10,
    },
    commentSection: {
        marginTop: 15,
    },
    commentContainer: {
        marginTop: 5,
        marginBottom: 10,
    },
    commentContent: {
        backgroundColor: '#f4f5f7',

    },
    commentUser: {
        marginTop: 15,
        padding: 5,
        fontSize: 16,
        color: '#07ef92',
        fontWeight: '400'
    },
    commment: {
        marginTop: 30,
        color: 'black',
    }

});

const mapStateToProps = state => ({
    markets: state.markets.items
})

export default connect (mapStateToProps, { fetchMarkets })(MarketingCard);

MarketingCardAction.js

import { FETCH_MARKETS } from './types';
import axios from 'axios';

export const fetchMarkets = () => dispatch => {
    axios.get(`https://cpbook.propstory.com/api/broker/1/projects`)
    .then( markets => 
        dispatch({
            type: FETCH_MARKETS,
            payload: markets
        })
    )
    .catch( error => {
        console.log(error);
    });
};

MarketingCardReducer.js

import { FETCH_MARKETS } from '../actions/types';

const initialState = {
    items: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_MARKETS:
            return {
                ...state,
                items: action.payload
            };
        default:
            return state;
    }
}

store.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import rootReducer from './src/app/reducers/index';

const middleware = [thunk];
  
  const store = createStore(rootReducer, applyMiddleware(...middleware));

export default store;

types.js

export const FETCH_MARKETS = 'FETCH_MARKETS';