add new appointmentlist

src/components/AppointmentList.js

+import React, { Component } from 'react';
+import { ListView } from 'react-native';
+import { connect } from 'react-redux';
+import { View } from 'native-base';
+import { appointmentFetch, appointmentDelete } from './../actions'
+import ListItem from './../components/ListItem'
+
+import realm from './../Database'
+
+class AppointmentList extends Component {
+
+    componentWillMount() {
+        this.props.appointmentFetch()
+        this.createDataSource(this.props)
+    }
+
+    componentWillReceiveProps(nextProps) {
+        // nextProps are the next set of props that this component
+        // will be rendered with
+        // this.props is still the old set of props
+        this.createDataSource(nextProps);
+    }
+
+    createDataSource({ appointments }) {
+        const ds = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => r1 !== r2
+        });
+
+        this.dataSource = ds.cloneWithRows(appointments.appointments);
+    }
+
+    renderRow({ id, doctorName, date, time, place }) {
+        let appointment = { id, doctorName, date: date.toString(), time, place }
+        return <ListItem data={appointment} />
+    }
+
+    render() {
+        return (
+            <View>
+                <ListView
+                    enableEmptySections
+                    dataSource={this.dataSource}
+                    renderRow={this.renderRow}
+                />
+            </View>
+        )
+    }
+
+}
+
+const mapStateToProps = state => {
+    return { appointments: state.appointments }
+};
+
+export default connect(mapStateToProps, { appointmentFetch, appointmentDelete })(AppointmentList);
\ No newline at end of file

src/components/ListItem.js

+import React, { Component } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { View, Text } from 'native-base';
+import { appointmentDelete } from './../actions'
+import { connect } from 'react-redux';
+import moment from 'moment';
+
+class ListItem extends Component {
+
+    constructor(props) {
+        super(props)
+    }
+
+    deleteAppointment(id) {
+        this.props.appointmentDelete(id)
+    }
+
+    render() {
+        return (
+            <TouchableOpacity onPress={() => this.deleteAppointment(this.props.data.id)}>
+                <View>
+                    <Text>{this.props.data.doctorName}</Text>
+                    <Text>{this.props.data.date}</Text>
+                    <Text>{this.props.data.time}</Text>
+                    <Text>{this.props.data.place}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+}
+
+export default connect(null, { appointmentDelete })(ListItem);
\ No newline at end of file