Alarm component

components/README.md

@@ -363,7 +363,7 @@ Props:
   - type: one of
     - "body", "footnote", "title" (used for displaying text on screen)
     - "header" (used in the Header component)
-    - "primary", "secondary", "alarm", "urgent" (used in the Button component)
+    - "primary", "secondary", "alarm", "urgent", "snooze" (used in the Button component)
     - "label" (used in the IconButton component)
   - default: "body"
 

components/Timer/Timer.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Text, View } from "react-native";
-//import ProgressCircle from "./ProgressCircle"
+import { Actions } from "react-native-router-flux";
 import { connect } from 'react-redux';
 import { increaseTime, decreaseTime, countdown, clearTime, resetTime } from '../../store/actions';
 import ProgressCircle from 'react-native-progress-circle';
@@ -16,9 +16,9 @@ class Timer extends Component {
   }
 
   countdown() {
-    if (this.props.time.timeRemaining - 1 <= 0) {
-      this.props.clearTime();
+    if (this.props.time.timeRemaining - 1 <= 15) {
       clearInterval(this.interval);
+      Actions.snooze();
     } else {
       this.props.countdown(this.props.time.timeRemaining);
     }
@@ -70,7 +70,6 @@ class Timer extends Component {
 
   render() {
     const { time, timeRemaining } = this.props.time;
-
     return (
       <ProgressCircle
         percent={(1 - timeRemaining / time) * 100}

components/buttons/Button.js

@@ -21,7 +21,7 @@ const Button = (props) => {
 /* Prop Types */
 
 Button.propTypes = {
-  variant: PropTypes.oneOf([ "primary", "secondary", "alarm", "urgent"]),
+  variant: PropTypes.oneOf([ "primary", "secondary", "alarm", "urgent", "snooze"]),
 };
 
 Button.defaultProps = {
@@ -82,6 +82,13 @@ const buttonStyles = StyleSheet.create({
     ...large,
     backgroundColor: theme.colors.red,
   },
+  snooze: {
+    ...base,
+    ...large,
+    ...border,
+    backgroundColor: theme.colors.white,
+    borderColor: theme.colors.darkGrey,
+  }
 });
 
 export default Button;

components/typography/Text.js

@@ -13,7 +13,7 @@ const Text = (props) => {
 /* Prop Types */
 
 Text.propTypes = {
-  variant: PropTypes.oneOf([ "body", "footnote", "title", "header", "primary", "secondary", "alarm", "urgent", "label"]),
+  variant: PropTypes.oneOf([ "body", "footnote", "title", "header", "primary", "secondary", "alarm", "urgent", "label", "snooze"]),
 };
 0
 Text.defaultProps = {
@@ -69,6 +69,12 @@ const textStyles = StyleSheet.create({
     fontSize: theme.fontSizes.large,
     color: theme.colors.white,
   },
+  snooze: {
+    ...regular,
+    fontSize: theme.fontSizes.large,
+    color: theme.colors.black,
+    fontWeight: "bold", 
+  },
   label: {
     ...regular,
     fontSize: theme.fontSizes.xsmall,

screens/AlarmScreen.js

@@ -23,7 +23,6 @@ const AlarmScreen = () => {
           Alarm Screen
         </Text>
         <Button title="Exit" onPress={() => Actions.main()} />
-        <Button title="Out of Time" onPress={() => Actions.snooze()} />
       </View>
     </Content>
     </Container>

screens/SnoozeScreen.js

@@ -1,41 +1,108 @@
 import React, { Component } from "react";
-import {
-  StyleSheet,
-  Button
-} from "react-native";
+import { StyleSheet, Alert } from "react-native";
+import { Button } from "../components/buttons";
 import { Actions } from "react-native-router-flux";
 import { Container, Content, Header, View } from "../components/layout";
 import { Text } from "../components/typography";
+import { connect } from 'react-redux';
+import { increaseTime, decreaseTime, countdown, clearTime, resetTime } from '../store/actions';
 
-const SnoozeScreen = () => {
-  return (
-    <Container>
-    <Header>Snooze Mode</Header>
-    <Content>
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Snooze Screen
-        </Text>
-        <Button title="Snooze" onPress={() => Actions.alarm()} />
-      </View>
-    </Content>
-    </Container>
-  );
+class SnoozeScreen extends Component {
+  constructor(props) {
+    super(props);
+    this.countdown = this.countdown.bind(this);
+    this.snoozeHandler = this.snoozeHandler.bind(this);
+  }
+
+  countdown() {
+    if (this.props.time.timeRemaining - 1 <= 0) {
+      this.props.clearTime();
+      clearInterval(this.interval);
+      Alert.alert("Help request sent", "Help request has been sent to your responder network", [{text: 'OK', onPress: () => Actions.main()}], {cancelable: false});
+    } else {
+      this.props.countdown(this.props.time.timeRemaining);
+    }
+  };
+
+  convertSeconds = (seconds) => {
+    let second = Math.floor(seconds % 3600 % 60);
+    if (second <= 9) {
+      second = "0" + second;
+    }
+    return second;
+  };
+
+  convertSecondsToMinutes = (seconds) => {
+    let minute = Math.floor(seconds % 3600 / 60);
+    return minute;
+  };
+
+  snoozeHandler() {
+    clearInterval(this.interval);
+    this.props.resetTime();
+    Actions.alarm();
+  };
+
+  componentDidMount() {
+    this.props.countdown(this.props.time.timeRemaining);
+    this.interval = setInterval(this.countdown, 1000);
+  };
+
+  render() {
+    const { timeRemaining } = this.props.time;
+    return (
+      <Container style={{backgroundColor: (timeRemaining % 2 === 0)? "#ff0000" : "#ffa500"}}>
+        <Header>Snooze Mode</Header>
+        <Content>
+          <View style={styles.container, {backgroundColor: (timeRemaining % 2 === 0)? "#ff0000" : "#ffa500"}}>
+            <Text style={styles.textStyle}> 
+              your responders{"\n"}will be notified in:
+            </Text>
+            <Text style={styles.timeStyle}>
+              {this.convertSecondsToMinutes(timeRemaining)}:{this.convertSeconds(timeRemaining)}
+            </Text>
+            <Button variant="snooze" onPress={this.snoozeHandler}>
+              snooze
+            </Button>
+            <Text style={styles.textStyle}>
+              We'll check up on your in 2 minutes
+            </Text>
+          </View>
+        </Content>
+      </Container>
+    );
+  }
 }
 
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "cyan",
   },
-  welcome: {
-    fontSize: 20,
+  textStyle: {
+    fontSize: 18,
+    fontWeight: "bold", 
     textAlign: "center",
     margin: 10,
     color: "#ffffff",
+    alignItems: "center",
+  },
+  timeStyle: {
+    fontSize: 72, 
+    fontWeight: "bold", 
+    color: "#ffffff",
+    textAlign: "center",
+    paddingTop: 60,
+    paddingBottom: 80,
+    justifyContent: "center",
+    alignItems: "center",
   },
 });
 
-export default SnoozeScreen;
+function mapStateToProps(state) {
+  return {
+    time: state.timer
+  }
+}
+
+export default connect(mapStateToProps, { increaseTime, decreaseTime, countdown, clearTime, resetTime })(SnoozeScreen);