2021-01-01 09:28:34 +01:00
|
|
|
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";
|
|
|
|
|
2021-01-01 11:28:29 +01:00
|
|
|
import Telegram from "../utils/telegram";
|
|
|
|
import { TG_API, TG_USERID } from "../config";
|
|
|
|
|
2021-01-01 09:28:34 +01:00
|
|
|
function sendNotification(close) {
|
2021-01-01 11:28:29 +01:00
|
|
|
const bot = new Telegram(TG_API);
|
|
|
|
bot.sendMessage(TG_USERID, "User detected in an accident. Location has been attached below.");
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
|
|
position => bot.sendLocation( TG_USERID,
|
|
|
|
position.coords.latitude, position.coords.longitude),
|
|
|
|
() => bot.sendMessage(TG_USERID, "Error retrieving location")
|
|
|
|
);
|
2021-01-01 09:28:34 +01:00
|
|
|
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" />
|
2021-01-03 07:55:49 +01:00
|
|
|
:<Impact color="status-critical" size="xlarge" />
|
2021-01-01 09:28:34 +01:00
|
|
|
}
|
|
|
|
<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;
|