change ui in component

src/components/AppointmentList.js

@@ -3,7 +3,7 @@ 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 AppointmentListItem from './../components/AppointmentListItem'
 
 import realm from './../Database'
 
@@ -31,7 +31,7 @@ class AppointmentList extends Component {
 
     renderRow({ id, doctorName, date, time, place }) {
         let appointment = { id, doctorName, date: date.toString(), time, place }
-        return <ListItem data={appointment} />
+        return <AppointmentListItem data={appointment} />
     }
 
     render() {

src/components/ListItem.js → src/components/AppointmentListItem.js

@@ -5,7 +5,7 @@ import { appointmentDelete } from './../actions'
 import { connect } from 'react-redux';
 import moment from 'moment';
 
-class ListItem extends Component {
+class AppointmentListItem extends Component {
 
     constructor(props) {
         super(props)
@@ -29,4 +29,4 @@ class ListItem extends Component {
     }
 }
 
-export default connect(null, { appointmentDelete })(ListItem);
\ No newline at end of file
+export default connect(null, { appointmentDelete })(AppointmentListItem);
\ No newline at end of file

src/components/ReminderBoxList.js

+import React from 'react';
+import { ToastAndroid } from 'react-native';
+import {
+  View,
+  Text,
+  List,
+  ListItem,
+} from 'native-base';
+
+
+class ReminderBoxList extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const { containerStyle } = styles
+    return (
+      <View>
+        <Text>{this.props.periodText}</Text>
+        <View style={containerStyle}>
+          <List dataArray={this.props.items}
+            renderRow={(item) =>
+              <ListItem>
+                <Text>{item.medName}</Text>
+              </ListItem>
+            }>
+          </List>
+        </View>
+      </View>
+    )
+  }
+
+}
+
+const styles = {
+  containerStyle: {
+    flex: 1,
+    height: 200,
+    backgroundColor: 'white',
+    borderWidth: 5,
+    borderRadius: 2,
+    borderColor: '#1686C4',
+    borderBottomWidth: 0,
+    elevation: 1,
+  }
+}
+
+export default ReminderBoxList;
\ No newline at end of file

src/components/ReminderList.js

-import React from 'react';
-import { ToastAndroid } from 'react-native';
-import {
-  View,
-  Text,
-  List,
-  ListItem,
-} from 'native-base';
-
-
-class ReminderList extends React.Component {
-  constructor(props) {
-    super(props)
+import React, { Component } from 'react'
+import { ListView } from 'react-native';
+import { connect } from 'react-redux';
+import { View } from 'native-base';
+import { reminderFetch, reminderDelete } from './../actions';
+import ReminderListItem from './../components/ReminderListItem';
+import realm from './../Database';
+
+class ReminderList extends Component {
+
+    componentWillMount() {
+        this.props.reminderFetch()
+        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({ reminders }) {
+        const ds = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => r1 !== r2
+        });
+
+        this.dataSource = ds.cloneWithRows(reminders.reminders);
+    }
+
+    renderRow({ id, medName, reminderTime, meal, period, dose }) {
+        let reminder = { id, medName, reminderTime: reminderTime.toString(), meal, period, dose }
+        return <ReminderListItem data={reminder} />
     }
 
     render() {
-    const { containerStyle } = styles
         return (
             <View>
-        <Text>{this.props.periodText}</Text>
-        <View style={containerStyle}>
-          <List dataArray={this.props.items}
-            renderRow={(item) =>
-              <ListItem>
-                <Text>{item.medName}</Text>
-              </ListItem>
-            }>
-          </List>
-        </View>
+                <ListView
+                    enableEmptySections
+                    dataSource={this.dataSource}
+                    renderRow={this.renderRow}
+                />
             </View>
         )
     }
 
 }
 
-const styles = {
-  containerStyle: {
-    flex: 1,
-    height: 200,
-    backgroundColor: 'white',
-    borderWidth: 5,
-    borderRadius: 2,
-    borderColor: '#1686C4',
-    borderBottomWidth: 0,
-    elevation: 1,
-  }
-}
+const mapStateToProps = state => {
+    return { reminders: state.reminders }
+};
 
-export default ReminderList
\ No newline at end of file
+export default connect(mapStateToProps, { reminderFetch, reminderDelete })(ReminderList);
\ No newline at end of file

src/components/ReminderListItem.js

+import React, { Component } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { View, Text } from 'native-base';
+import { reminderDelete } from './../actions'
+import { connect } from 'react-redux';
+import moment from 'moment';
+
+class ReminderListItem extends Component {
+
+    constructor(props) {
+        super(props)
+    }
+
+    deleteAppointment(id) {
+        this.props.reminderDelete(id)
+    }
+
+    render() {
+        return (
+            <TouchableOpacity onPress={() => this.deleteAppointment(this.props.data.id)}>
+                <View>
+                    <Text>{this.props.data.medName}</Text>
+                    <Text>{this.props.data.reminderTime}</Text>
+                    <Text>{this.props.data.meal}</Text>
+                    <Text>{this.props.data.period}</Text>
+                    <Text>{this.props.data.dose}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+}
+
+export default connect(null, { reminderDelete })(ReminderListItem);
\ No newline at end of file