commiting finished work

Author: Epyon616

App.js

@@ -1,19 +1,37 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { Component } from 'react';
+import { YellowBox } from 'react-native';
+import { createAppContainer } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
+import EventList from './EventList';
+import EventForm from './EventForm';
 
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Hello world!</Text>
-    </View>
-  );
-}
+// class App extends Component {
+//   render() {
+//     return (
+//       <EventList />
+//     );
+//   } 
+// }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#FFF',
-    alignItems: 'center',
-    justifyContent: 'center',
+YellowBox.ignoreWarnings([
+  'Warning: componentWillMount is deprecated',
+  'Warning: componentWillReceiveProps is deprecated',
+  'Warning: componentWillReceiveProps has been renamed',
+]);
+ 
+const AppNavigator = createStackNavigator({
+  list: {
+    screen: EventList,
+    navigationOptions: () => ({
+      title: 'Your Events',
+    }),
+  },
+  form: {
+    screen: EventForm,
+    navigationOptions: () => ({
+      title: 'Add Event',
+    }),
   },
 });
+
+export default createAppContainer(AppNavigator);

EventCard.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import { formatDate, getCountdownParts } from './api';
+import EventCounterPart from './EventCounterPart';
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    flex: 1,
+    padding: 10,
+    paddingTop: 10,
+    paddingBottom: 20,
+    margin: 10,
+    marginTop: 5,
+    marginBottom: 5,
+  },
+  cardHeader: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  date: {
+    fontWeight: '200',
+    fontSize: 15,
+    color: '#bdbdbd',
+    width: '30%',
+    textAlign: 'right',
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '300',
+    marginLeft: 7,
+    textAlign: 'left',
+  },
+  counterContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingLeft: '5%',
+    paddingRight: '5%',
+  },
+});
+
+function EventCard({event}) {
+  const { days, hours, minutes, seconds } = getCountdownParts(event.date); 
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.cardHeader}>
+        <Text style={styles.date}>{formatDate(event.date)} </Text>
+        <Text style={styles.title}>{event.title}</Text>
+      </View>
+      <View style={styles.counterContainer}>
+        <EventCounterPart counter={days} label={'DAYS'} />
+        <EventCounterPart counter={hours} label={'HOURS'} />
+        <EventCounterPart counter={minutes} label={'MINUTES'} />
+        <EventCounterPart counter={seconds} label={'SECONDS'} />
+      </View>
+    </View>
+  );
+}
+
+EventCard.propTypes = {
+  event: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    date: PropTypes.instanceOf(Date)
+  }),
+}
+
+export default EventCard;

EventCounterPart.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+
+const styles = StyleSheet.create({
+  counter: {
+    width: '25%',
+    flex: 1,
+  },
+  counterText: {
+    fontSize: 40,
+    textAlign: 'center',
+  },
+  counterLabel: {
+    fontSize: 13,
+    fontWeight: '100',
+    color: '#a3a3a3',
+    textAlign: 'center',
+    paddingTop: 0,
+  },
+});
+
+function EventCounterPart({counter, label}) {
+  return (
+    <View style={styles.counter}>
+      <Text style={styles.counterText}>{counter}</Text>
+      <Text style={styles.counterLabel}>{label}</Text>
+    </View>
+  );
+}
+
+EventCounterPart.propTypes = {
+  counter: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+}
+
+export default EventCounterPart;
+

EventForm.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import { View, Text, TextInput, TouchableHighlight, StyleSheet } from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { formatDateTime, saveEvent } from './api';
+
+const styles = StyleSheet.create({
+  fieldContainer: {
+    marginTop: 20,
+    marginBottom: 20,
+    backgroundColor: '#fff',
+  },
+  text: {
+    height: 40,
+    margin: 0,
+    marginRight: 7,
+    paddingLeft: 10,
+  },
+  button: {
+    height: 50,
+    backgroundColor: '#48BBEC',
+    borderColor: '#48BBEC',
+    alignSelf: 'stretch',
+    margin: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 5,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 20,
+  },
+  borderTop: {
+    borderColor: '#edeeef',
+    borderTopWidth: 1, 
+  }
+});
+
+class EventForm extends Component {
+  state = {
+    title: null,
+    date: Date.now(),
+    showDatePicker: false,
+  }
+
+  handleAddPress = () => {
+    saveEvent(this.state)
+      .then(() => this.props.navigation.navigate('list'));
+  }
+
+  handleChangeTitle = (value) => {
+    this.setState({title: value });
+  }
+
+  handleDatePress  = () => {
+    this.setState({showDatePicker: true });
+  }
+
+  handleHideDatePicker = () => {
+    this.setState({showDatePicker: false });
+  }
+
+  handleDatePicked = (event, date) => {
+    date = date || this.state.date;
+    this.setState({
+      date,
+      showDatePicker: Platform.OS === 'ios' ? true : false,
+    });
+  }
+
+  render() {
+    const { title, date, showDatePicker } = this.state;
+    return (
+      <View style={{flex: 1}}>
+        <View style={styles.fieldContainer}>
+          <TextInput 
+            style={styles.text}
+            placeholder="Event title"
+            spellCheck={false}
+            onChangeText={this.handleChangeTitle}
+            value={title} 
+          />
+          <TextInput 
+            style={[styles.text, styles.borderTop]}
+            placeholder="Event date"
+            spellCheck={false}
+            value={formatDateTime(date)}
+            editable={!this.state.showDatePicker}
+            onFocus={this.handleDatePress}
+          />
+          {showDatePicker &&
+          <DateTimePicker
+            mode="datetime"
+            onChange={this.handleDatePicked}
+            value={date}
+          /> }
+        </View>
+        <TouchableHighlight onPress={this.handleAddPress} style={styles.button}>
+          <Text style={styles.buttonText}>Add</Text>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+}
+
+export default EventForm;

EventList.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { FlatList, StyleSheet } from 'react-native';
+import ActionButton from 'react-native-action-button';
+import EventCard from './EventCard';
+import { getEvents } from './api';
+
+const styles = StyleSheet.create({
+  list: {
+    flex: 1,
+    paddingTop: 60,
+    backgroundColor: '#F3F3F3',
+    marginBottom: 100,
+  }
+});
+
+class EventList extends Component {
+  state = {
+    events: []
+  }
+
+  componentDidMount() {
+    setInterval(() => {
+      this.setState({
+        events: this.state.events.map(event => ({
+          ...event,
+          timer: Date.now(),
+        }))
+      });
+    }, 1000);
+
+    this.props.navigation.addListener('didFocus', () => {
+      getEvents().then(events => this.setState({ events }));
+    });
+  }
+
+  listItem(item) {
+    return <EventCard event={item} />;
+  }
+
+  handleAddEvent = () => {
+    this.props.navigation.navigate('form');
+  }
+
+  render() {
+    return [
+      <FlatList
+        key="flatlist"
+        data={this.state.events}
+        renderItem={({ item }) => this.listItem(item)}
+        keyExtractor={item => item.id}
+        style={styles.list}
+      />,
+      <ActionButton 
+        key="actionbutton"
+        onPress={this.handleAddEvent}
+        buttonColor="rgba(231, 76, 60,1)"
+      />
+    ]
+  }
+}
+
+export default EventList;

README.md

@@ -0,0 +1,9 @@
+# React Native event countdown
+
+to start the application:
+
+You will need to have Expo client installed on your mobile device.
+
+1. `npm install`
+2. `json-server --host <ipaddress>db.json`
+3. In a separate terminal window run `npm start`