New Directory Structure for Screens

Routinely/app/navigation.js

@@ -1,46 +1,44 @@
-import {createAppContainer, createSwitchNavigator } from 'react-navigation';
-import LoginScreen from './components/login';
+import {createAppContainer, createSwitchNavigator} from 'react-navigation';
+import LoginScreen from './screens/login';
 import {createStackNavigator} from 'react-navigation-stack';
-import CalendarScreen from './components/calendar';
-import AlarmScreen from './components/alarm';
-import AlarmRingingScreen from './components/alarmRinging';
-import EventScreen from './components/event';
+import CalendarScreen from './screens/calendar';
+import AlarmScreen from './screens/alarm';
+import AlarmRingingScreen from './screens/alarmRinging';
+import EventScreen from './screens/event';
 
 const AuthStack = createStackNavigator(
-    {
-      Login: LoginScreen,
-    },
-    {
-      headerMode: "none",
-      initialRouteName: "Login"
-    }
-  ); 
+  {
+    Login: LoginScreen,
+  },
+  {
+    headerMode: 'none',
+    initialRouteName: 'Login',
+  },
+);
 
 const AppStack = createStackNavigator(
-{
+  {
     Alarm: AlarmScreen,
     AlarmRinging: AlarmRingingScreen,
     Calendar: CalendarScreen,
     Event: EventScreen,
-},
-{
-    initialRouteName: "Alarm",
-    initialRouteName: "AlarmRinging",
-    initialRouteName: "Calendar",
-    //aheaderMode: "none"
-}
+  },
+  {
+    initialRouteName: 'Alarm',
+    initialRouteName: 'AlarmRinging',
+    initialRouteName: 'Calendar',
+  },
 );
 
-
 export default createAppContainer(
-    createSwitchNavigator(
-      {
-        App: AppStack,
-        Auth: AuthStack,
-        //Calendar: CalendarScreen,
-      },
-      {
-        initialRouteName: "Auth"
-      }
-    )
-  );
+  createSwitchNavigator(
+    {
+      App: AppStack,
+      Auth: AuthStack,
+      //Calendar: CalendarScreen,
+    },
+    {
+      initialRouteName: 'App',
+    },
+  ),
+);

Routinely/app/components/alarm.js → Routinely/app/screens/alarm.js

@@ -1,12 +1,12 @@
 import React, {Component} from 'react';
 import {View, StyleSheet, TouchableHighlight, Image} from 'react-native';
-import DayPicker from './alarm_components/DayPicker';
-import RepeatDiv from './alarm_components/RepeatDiv';
-import SnoozeDuration from './alarm_components/SnoozeDuration';
-import TimePicker from './alarm_components/TimePicker';
+import DayPicker from '../components/alarm_components/DayPicker';
+import RepeatDiv from '../components/alarm_components/RepeatDiv';
+import SnoozeDuration from '../components/alarm_components/SnoozeDuration';
+import TimePicker from '../components/alarm_components/TimePicker';
 import {Divider} from 'react-native-elements';
-import ColorPicker from './alarm_components/ColorPicker';
-import TitleInput from './alarm_components/TitleInput';
+import ColorPicker from '../components/alarm_components/ColorPicker';
+import TitleInput from '../components/alarm_components/TitleInput';
 
 class AlarmScreen extends Component {
   render() {
@@ -28,14 +28,14 @@ class AlarmScreen extends Component {
               onPress={() => this.props.navigation.navigate('Calendar')}>
               <Image
                 style={styles.contain}
-                source={require('./img/calendar.png')}
+                source={require('../components/img/calendar.png')}
               />
             </TouchableHighlight>
             <TouchableHighlight
               onPress={() => this.props.navigation.navigate('Alarm')}>
               <Image
                 style={styles.contain}
-                source={require('./img/alarm.png')}
+                source={require('../components/img/alarm.png')}
               />
             </TouchableHighlight>
             <TouchableHighlight
@@ -44,7 +44,7 @@ class AlarmScreen extends Component {
               }}>
               <Image
                 style={styles.contain}
-                source={require('./img/logout.png')}
+                source={require('../components/img/logout.png')}
               />
             </TouchableHighlight>
           </View>

Routinely/app/components/alarmRinging.js → Routinely/app/screens/alarmRinging.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
-import {AppRegistry, Text, View, StyleSheet, Button} from 'react-native';
-import DisplayTime from './alarmRinging_components/DisplayTime';
+import {View, StyleSheet, Button} from 'react-native';
+import DisplayTime from '../components/alarmRinging_components/DisplayTime';
 
 class AlarmRingingScreen extends Component {
   render() {

Routinely/app/components/calendar.js → Routinely/app/screens/calendar.js

@@ -231,7 +231,7 @@ class CalendarScreen extends Component {
             onPress={() => this.props.navigation.navigate('Event')}>
               <Image
                 style={styles.plus}
-                source={require('./img/plus.png')}
+                source={require('../components/img/plus.png')}
               />
         </TouchableHighlight>
 
@@ -244,8 +244,8 @@ class CalendarScreen extends Component {
           firstDay={1}
           //markedDates={this.getMarkedDates()} // {'2019-06-01': {marked: true}, '2019-06-02': {marked: true}, '2019-06-03': {marked: true}};
           theme={this.getTheme()}
-          leftArrowImageSource={require('./img/previous.png')}
-          rightArrowImageSource={require('./img/next.png')}
+          leftArrowImageSource={require('../components/img/previous.png')}
+          rightArrowImageSource={require('../components/img/next.png')}
           // calendarStyle={styles.calendar}
           // headerStyle={styles.calendar} // for horizontal only
         />
@@ -261,14 +261,14 @@ class CalendarScreen extends Component {
               onPress={() => this.props.navigation.navigate('Calendar')}>
               <Image
                 style={styles.contain}
-                source={require('./img/calendar.png')}
+                source={require('../components/img/calendar.png')}
               />
             </TouchableHighlight>
             <TouchableHighlight
               onPress={() => this.props.navigation.navigate('Alarm')}>
               <Image
                 style={styles.contain}
-                source={require('./img/alarm.png')}
+                source={require('../components/img/alarm.png')}
               />
             </TouchableHighlight>
             <TouchableHighlight
@@ -277,14 +277,14 @@ class CalendarScreen extends Component {
               }}>
               <Image
                 style={styles.contain}
-                source={require('./img/logout.png')}
+                source={require('../components/img/logout.png')}
               />
             </TouchableHighlight>
             <TouchableHighlight
               onPress={() => this.props.navigation.navigate('Event')}>
               <Image
                 style={styles.contain}
-                source={require('./img/plus.png')}
+                source={require('../components/img/plus.png')}
               />
             </TouchableHighlight>
           </View>

Routinely/app/components/event.js → Routinely/app/screens/event.js

@@ -1,14 +1,13 @@
-import React, {Component, useState } from 'react';
+import React, {Component, useState} from 'react';
 import {StyleSheet, Text, View, Button, TextInput} from 'react-native';
 import * as AddCalendarEvent from 'react-native-add-calendar-event';
 import moment from 'moment';
-import TimePicker from './alarm_components/TimePicker';
-import DayPicker from './alarm_components/DayPicker';
+import TimePicker from '../components/alarm_components/TimePicker';
+import DayPicker from '../components/alarm_components/DayPicker';
 import firebase from '@react-native-firebase/app';
 import firestore from '@react-native-firebase/firestore';
 import '@react-native-firebase/auth';
 
-
 const utcDateToString = (momentInUTC: moment): string => {
   let s = moment.utc(momentInUTC).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
   // console.warn(s);
@@ -19,53 +18,52 @@ class EventScreen extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      title:'',
-      notes:'',
+      title: '',
+      notes: '',
     };
   }
 
   addEvent = async () => {
-    const addEvent = firestore().collection('users').doc('skiser').collection('event')
-    try{
-      await addEvent.add({
-      title: this.state.title,
-      notes: this.state.notes,
-    }).then(ref => {
-      console.log('Added doc w ID: ', ref.id);
-    })
-    }catch(error){
-      console.error(error)
+    const addEvent = firestore()
+      .collection('users')
+      .doc('skiser')
+      .collection('event');
+    try {
+      await addEvent
+        .add({
+          title: this.state.title,
+          notes: this.state.notes,
+        })
+        .then(ref => {
+          console.log('Added doc w ID: ', ref.id);
+        });
+    } catch (error) {
+      console.error(error);
     }
   };
 
-
-  render(){
+  render() {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>Event title: </Text>
-          <TextInput
-            placeholder="enter event title"
-            onChangeText = {title => this.setState({title})}
-            value={this.state.title}
-          />
+        <TextInput
+          placeholder="enter event title"
+          onChangeText={title => this.setState({title})}
+          value={this.state.title}
+        />
         <Text style={styles.welcome}>Event Notes: </Text>
-          <TextInput
-            placeholder="enter event event"
-            onChangeText = {notes => this.setState({notes})}
-            value={this.state.notes}
-          />
+        <TextInput
+          placeholder="enter event event"
+          onChangeText={notes => this.setState({notes})}
+          value={this.state.notes}
+        />
         {/* <View style={styles.picker}>
           <DayPicker />
           <TimePicker />
         </View> */}
-        <Button 
-        title= "addEvent"
-        onPress={()=> this.addEvent()}
-        >
-        </Button>
+        <Button title="addEvent" onPress={() => this.addEvent()} />
       </View>
     );
-
   }
 
   static addToCalendar = (title: string, startDateUTC: moment) => {

Routinely/app/components/login.js → Routinely/app/screens/login.js

@@ -107,7 +107,7 @@ class LoginScreen extends Component {
   render() {
     return (
       <ImageBackground
-        source={require('./img/RoutinelyLoginBackground.png')}
+        source={require('../components/img/RoutinelyLoginBackground.png')}
         style={{width: '100%', height: '100%'}}>
         <View style={styles.body}>
           <View style={styles.sectionContainer}>
@@ -116,7 +116,7 @@ class LoginScreen extends Component {
                 <View style={styles.dp}>
                   <Image
                     style={{width: 150, height: 150}}
-                    source={require('./img/RoutinelyR.png')}
+                    source={require('../components/img/RoutinelyR.png')}
                   />
                 </View>
                 <View style={styles.buttonContainer}>
@@ -196,21 +196,21 @@ class LoginScreen extends Component {
                     onPress={() => this.props.navigation.navigate('Calendar')}>
                     <Image
                       style={styles.contain}
-                      source={require('./img/calendar.png')}
+                      source={require('../components/img/calendar.png')}
                     />
                   </TouchableHighlight>
                   <TouchableHighlight
                     onPress={() => this.props.navigation.navigate('Alarm')}>
                     <Image
                       style={styles.contain}
-                      source={require('./img/alarm.png')}
+                      source={require('../components/img/alarm.png')}
                     />
                   </TouchableHighlight>
                   <TouchableHighlight
                     onPress={() => this.props.navigation.navigate('Logout')}>
                     <Image
                       style={styles.contain}
-                      source={require('./img/logout.png')}
+                      source={require('../components/img/logout.png')}
                     />
                   </TouchableHighlight>
                 </View>