From 299fd658de1daf247dcb31ccd0aa2ea50378f199 Mon Sep 17 00:00:00 2001 From: wennh Date: Sat, 8 Feb 2020 00:25:50 -0800 Subject: [PATCH 1/5] setup alarmmodescreen --- screens/AlarmModeScreen.js | 41 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 screens/AlarmModeScreen.js diff --git a/screens/AlarmModeScreen.js b/screens/AlarmModeScreen.js new file mode 100644 index 0000000..bcaaef9 --- /dev/null +++ b/screens/AlarmModeScreen.js @@ -0,0 +1,41 @@ +import React, { Component } from "react"; +import { + StyleSheet, + Button +} from "react-native"; +import { Actions } from "react-native-router-flux"; +import { Container, Content, Header, View } from "../components/layout"; +import { Text } from "../components/typography"; + +const AlarmModeScreen = () => { + return ( + +
Alarm Mode
+ + + + + Alarm Mode Screen + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "magenta", + }, + welcome: { + fontSize: 20, + textAlign: "center", + margin: 10, + color: "#ffffff", + }, +}); + +export default AlarmModeScreen; \ No newline at end of file From 2e136cc92eb1acc1091d9e321750223e8632a116 Mon Sep 17 00:00:00 2001 From: wennh Date: Sun, 9 Feb 2020 00:39:14 -0800 Subject: [PATCH 2/5] Snooze screen layout --- components/README.md | 2 +- components/buttons/Button.js | 9 ++++++- components/typography/Text.js | 6 +++++ screens/SnoozeScreen.js | 46 +++++++++++++++++++++++------------ 4 files changed, 45 insertions(+), 18 deletions(-) diff --git a/components/README.md b/components/README.md index 39fb440..4d5a4a9 100644 --- a/components/README.md +++ b/components/README.md @@ -353,7 +353,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" diff --git a/components/buttons/Button.js b/components/buttons/Button.js index a189e82..ec034ce 100644 --- a/components/buttons/Button.js +++ b/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; \ No newline at end of file diff --git a/components/typography/Text.js b/components/typography/Text.js index dad974b..de8a721 100644 --- a/components/typography/Text.js +++ b/components/typography/Text.js @@ -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, diff --git a/screens/SnoozeScreen.js b/screens/SnoozeScreen.js index 39e5d87..d2931ec 100644 --- a/screens/SnoozeScreen.js +++ b/screens/SnoozeScreen.js @@ -1,8 +1,6 @@ import React, { Component } from "react"; -import { - StyleSheet, - Button -} from "react-native"; +import { StyleSheet } 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"; @@ -10,15 +8,23 @@ import { Text } from "../components/typography"; const SnoozeScreen = () => { return ( -
Snooze Mode
- - - - Snooze Screen - - + + We'll check up on your in 2 minutes + + + ); } @@ -28,14 +34,22 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: "center", alignItems: "center", - backgroundColor: "cyan", }, - welcome: { - fontSize: 20, + textStyle: { + fontSize: 18, + fontWeight: "bold", textAlign: "center", margin: 10, color: "#ffffff", }, + numberStyle: { + fontSize: 72, + fontWeight: "bold", + color: "#ffffff", + textAlign: "center", + paddingTop: 60, + paddingBottom: 60 + }, }); export default SnoozeScreen; \ No newline at end of file From 78e96186ae0cf97fa5426812a7811d200e0f356a Mon Sep 17 00:00:00 2001 From: wennh Date: Sun, 9 Feb 2020 16:31:06 -0800 Subject: [PATCH 3/5] add logic to render time, change background colour, trigger alert dialog --- components/Timer/Timer.js | 7 +-- screens/AlarmModeScreen.js | 41 -------------- screens/AlarmScreen.js | 1 - screens/SnoozeScreen.js | 110 +++++++++++++++++++++++++++---------- 4 files changed, 85 insertions(+), 74 deletions(-) delete mode 100644 screens/AlarmModeScreen.js diff --git a/components/Timer/Timer.js b/components/Timer/Timer.js index 5d22bf8..43a3cd8 100644 --- a/components/Timer/Timer.js +++ b/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 ( { - return ( - -
Alarm Mode
- - - - - Alarm Mode Screen - - - - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "magenta", - }, - welcome: { - fontSize: 20, - textAlign: "center", - margin: 10, - color: "#ffffff", - }, -}); - -export default AlarmModeScreen; \ No newline at end of file diff --git a/screens/AlarmScreen.js b/screens/AlarmScreen.js index d3b5244..1e63314 100644 --- a/screens/AlarmScreen.js +++ b/screens/AlarmScreen.js @@ -23,7 +23,6 @@ const AlarmScreen = () => { Alarm Screen - - We'll check up on your in 2 minutes - - - - - ); +class SnoozeScreen extends Component { + constructor(props) { + super(props); + this.countdown = this.countdown.bind(this); + this.snoozeHandler = this.snoozeHandler.bind(this); + } + + countdown() { + console.log(this.props.time); + 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 ( + +
Snooze Mode
+ + + + your responders{"\n"}will be notified in: + + + {this.convertSecondsToMinutes(timeRemaining)}:{this.convertSeconds(timeRemaining)} + + + + We'll check up on your in 2 minutes + + + + + ); + } } + const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: "center", - alignItems: "center", }, textStyle: { fontSize: 18, @@ -41,15 +86,24 @@ const styles = StyleSheet.create({ textAlign: "center", margin: 10, color: "#ffffff", + alignItems: "center", }, - numberStyle: { + timeStyle: { fontSize: 72, fontWeight: "bold", color: "#ffffff", textAlign: "center", paddingTop: 60, - paddingBottom: 60 + paddingBottom: 80, + justifyContent: "center", + alignItems: "center", }, }); -export default SnoozeScreen; \ No newline at end of file +function mapStateToProps(state) { + return { + time: state.timer + } +} + +export default connect(mapStateToProps, { increaseTime, decreaseTime, countdown, clearTime, resetTime })(SnoozeScreen); \ No newline at end of file From 1a049d1f5714a55b5f97bcb291299383bc9e6ea6 Mon Sep 17 00:00:00 2001 From: "Man Kit (Nicholas) Kong" Date: Fri, 14 Feb 2020 01:04:19 -0800 Subject: [PATCH 4/5] Fixed prop types, and consistent background color, flashing yellow and red --- App.js | 1 - components/typography/Text.js | 2 +- screens/SnoozeScreen.js | 5 ++--- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/App.js b/App.js index a530470..484a3b1 100644 --- a/App.js +++ b/App.js @@ -73,7 +73,6 @@ export default function App() { /> diff --git a/components/typography/Text.js b/components/typography/Text.js index de8a721..7100410 100644 --- a/components/typography/Text.js +++ b/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 = { diff --git a/screens/SnoozeScreen.js b/screens/SnoozeScreen.js index e5e0499..c8f1b74 100644 --- a/screens/SnoozeScreen.js +++ b/screens/SnoozeScreen.js @@ -15,7 +15,6 @@ class SnoozeScreen extends Component { } countdown() { - console.log(this.props.time); if (this.props.time.timeRemaining - 1 <= 0) { this.props.clearTime(); clearInterval(this.interval); @@ -52,10 +51,10 @@ class SnoozeScreen extends Component { render() { const { timeRemaining } = this.props.time; return ( - +
Snooze Mode
- + your responders{"\n"}will be notified in: From 8d54f2a6e0fd56f022b4ce0a4a888de0425c7cee Mon Sep 17 00:00:00 2001 From: "Man Kit (Nicholas) Kong" Date: Fri, 14 Feb 2020 01:05:36 -0800 Subject: [PATCH 5/5] Readded title --- App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/App.js b/App.js index 484a3b1..a530470 100644 --- a/App.js +++ b/App.js @@ -73,6 +73,7 @@ export default function App() { />