Create Accident plugin

src/plugins/Accident.js

@@ -0,0 +1,66 @@
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { Box, Button, Heading, Text } from "grommet";
+import { Aid, Impact } from "grommet-icons";
+
+function sendNotification(close) {
+	setTimeout(close, 2000);
+}
+
+function Accident(props) {
+	const threshold = 20;
+	const [ time, setTime ] = useState(threshold);
+	const countRef = useRef(null);
+
+	function decrementTime(time) {
+		if (time === 0) {
+			clearInterval(countRef.current);
+			sendNotification(props.close);
+			return 0;
+		}
+		return time - 1;
+	}
+	useEffect(() => {
+		countRef.current = setInterval(() => setTime(decrementTime), 1000);
+		return () => clearInterval(countRef.current);
+	}, []);
+
+	function dismiss() {
+		clearTimeout(countRef.current);
+		props.close();
+	}
+	return (
+		<Box
+			align="center"
+			background="light-1"
+			width="100vw"
+			justify="center"
+			direction="column"
+			alignContent="center"
+			height="100vh"
+		>
+			{
+				time === 0 ?
+					<Aid color="plain" size="xlarge" />
+					:<Impact color="#D0C100" size="xlarge" />
+			}
+			<Heading>{
+				time === 0 ?
+					"Calling Ambulance!"
+					:"Accident Detected!"
+			}</Heading>
+			<Text>{
+				time === 0 ? "Calling Ambulance":
+					`To cancel calling the ambulance, press the button below. (${time})`
+			}</Text>
+			<Button primary size="large" onClick={dismiss}
+				label="Dismiss" margin="1.5em" />
+		</Box>
+	);
+}
+
+Accident.propTypes = {
+	close: PropTypes.func
+};
+
+export default Accident;

src/plugins/index.js

@@ -1,9 +1,11 @@
 import Warning from "./warning";
 import Manual from "./manual";
 import Temperature from "./temperature";
+import Accident from "./Accident";
 
 export default {
 	warning: Warning,
 	manual: Manual,
-	temperature: Temperature
+	temperature: Temperature,
+	accident: Accident,
 };