OSD-Frontend/src/plugins/Accident.js

77 lines
1.9 KiB
JavaScript

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";
import Telegram from "../utils/telegram";
import { TG_API, TG_USERID } from "../config";
function sendNotification(close) {
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")
);
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="status-critical" 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;