PinGroup.js

import React from 'react';
import { View } from 'react-native';

import PinGroupItem from './groupItem';
import PinDetail from './detail';
import { Tiles, Tile, H3, } from '../../components';
import { pins } from '../../helper';

export default class PinGroup extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
            viewKey: 0,
            selectedPin: {},
            showDetail: false,
        };
    }

    render () {
        return (
            <View key={this.state.viewKey}>
                <Tiles>
                    {this.renderPinItems()}
                </Tiles>
                <PinDetail
                    visible={this.state.showDetail}
                    pin={this.state.selectedPin}
                    delete={() => {
                        this.deleteSelectedPin();
                        this.hideDetailPage();
                    }}
                    close={() => this.setState({ showDetail: false })}
                />
            </View>
        );
    }

    renderPinItems () {
        const _pins = pins.getPins();
        const noPins = _pins.length <= 0;
        const noPinsMessage = <H3>{'No Pins available'}</H3>;

        return noPins ? noPinsMessage : _pins.map((pin, index) => (
            <Tile key={`map_static_${index}`}>
                <PinGroupItem
                    pin={pin}
                    onPress={() => this.showDetailPage(pin)}
                />
            </Tile>
        ));
    }

    deleteSelectedPin () {
        pins.removeById(this.state.selectedPin.id);
    }

    showDetailPage (pin) {
        this.setState({
            showDetail: true,
            selectedPin: pin,
        });
    }

    hideDetailPage () {
        this.setState({
            showDetail: false,
            selectedPin: {},
        });
    }
}