Fix repeating notifications in Accident.js

Workaround for multiple messages being sent

.eslintrc.js

@@ -34,7 +34,8 @@ module.exports = {
 		"semi": [
 			"error",
 			"always"
-		]
+		],
+		"no-unused-vars": [1]
 	},
 	"settings": {
 		"react": {

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.eslintcache
+src/config.js

package.json

@@ -7,10 +7,16 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.21.1",
+    "grommet": "^2.16.2",
+    "grommet-icons": "^4.5.0",
+    "polished": "^4.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.1.3",
-    "react-scripts": "4.0.1"
+    "react-scripts": "4.0.1",
+    "socket.io-client": "^3.0.4",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,39 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-float infinite 3s ease-in-out;
-  }
-}
-
-.App-header {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-}
-
-.App-link {
-  color: rgb(112, 76, 182);
-}
-
-@keyframes App-logo-float {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(10px)
-  }
-  100% {
-    transform: translateY(0px)
-  }
-}

src/App.js

@@ -1,17 +1,15 @@
 import React from "react";
-import { Counter } from "./features/counter/Counter";
+import { Grommet } from "grommet";
-import "./App.css";
+import Core from "./Core";
+import WebSocketProvider from "./WebSocket";
 
 function App() {
 	return (
-		<div className="App">
+		<WebSocketProvider>
-			<header className="App-header">
+			<Grommet plain>
-				<Counter />
+				<Core />
-				<p>
+			</Grommet>
-					Edit <code>src/App.js</code> and save to reload.
+		</WebSocketProvider>
-				</p>
-			</header>
-		</div>
 	);
 }
 

src/Core.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Box, Button, Clock, Text } from "grommet";
+
+import { setPlugin, selectCore } from "./coreSlice";
+import { selectVoice } from "./voiceSlice";
+import VoiceBars from "./components/VoiceBars";
+import plugins from "./plugins";
+
+function Core() {
+	const coreState = useSelector(selectCore);
+	const voiceState = useSelector(selectVoice);
+	const dispatch = useDispatch();
+	const plugin = plugins[coreState.plugin];
+	const props = {
+		data: coreState.data,
+		close: () => dispatch(setPlugin(false))
+	};
+	return <>
+		<Box height="5vh" background="light-1" justify="center" direction="row">
+			{voiceState.recording ? <VoiceBars style={{height: "100%"}}/>:
+				voiceState.text === null ? null:
+					<Text style={{paddingTop: "1em"}}>{voiceState.text}</Text>
+			}
+		</Box>
+		{plugin ? React.createElement(plugin, props, null) : (
+			<Box
+				align="center"
+				background="light-1"
+				width="100vw"
+				justify="center"
+				direction="column"
+				alignContent="center"
+				height="95vh"
+			>
+				<Clock size="xxlarge" />
+				<Clock size="xxlarge" type="digital" />
+				<Box direction="row" margin="1.5em" wrap={true}>
+					<Button onClick={() => dispatch(setPlugin("petMode"))} primary
+						label="Pet Mode" />
+					<Button onClick={() => dispatch(setPlugin("smartHome"))} primary
+						label="Smart Home" margin="0 0 0 1em" />
+					<Button onClick={() => dispatch(setPlugin("maps"))} primary
+						label="Maps" margin="0 0 0 1em" />
+					<Button onClick={() => dispatch(setPlugin("marketplace"))} primary
+						label="Marketplace" margin="0 0 0 1em" />
+				</Box>
+			</Box>)
+		}
+	</>;
+}
+
+export default Core;

src/WebSocket.js

@@ -0,0 +1,57 @@
+import React, { createContext } from "react";
+import PropTypes from "prop-types";
+import io from "socket.io-client";
+import { WS_BASE } from "./config";
+import { useDispatch } from "react-redux";
+import { setData, setPlugin } from "./coreSlice";
+import { setRecording, setText } from "./voiceSlice";
+
+const WebSocketContext = createContext(null);
+
+export { WebSocketContext };
+
+function WebSocketProvider({ children }) {
+	let socket;
+
+	const dispatch = useDispatch();
+	if (!socket) {
+		socket = io.connect(WS_BASE);
+
+		socket.on("switchPlugin", (payload) => {
+			dispatch(setData(payload.data || {}));
+			dispatch(setPlugin(payload.plugin));
+			if (payload.time) {
+				setTimeout(() => {
+					dispatch(setData({}));
+					dispatch(setPlugin(false));
+				}, payload.time);
+			}
+		});
+
+		socket.on("voice:wakeword", () => {
+			dispatch(setRecording(true));
+			dispatch(setText(null));
+		});
+		socket.on("voice:record_end", () => {
+			dispatch(setRecording(false));
+			dispatch(setText(null));
+		});
+		socket.on("voice:utterance", payload => {
+			dispatch(setRecording(false));
+			dispatch(setText(payload.text));
+			setTimeout(() => dispatch(setText(null)), 3000);
+		});
+	}
+
+	return (
+		<WebSocketContext.Provider value={socket}>
+			{children}
+		</WebSocketContext.Provider>
+	);
+}
+
+WebSocketProvider.propTypes = {
+	children: PropTypes.node
+};
+
+export default WebSocketProvider;

src/app/store.js

@@ -1,8 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
-import counterReducer from "../features/counter/counterSlice";
+import coreReducer from "../coreSlice";
+import voiceReducer from "../voiceSlice";
 
 export default configureStore({
 	reducer: {
-		counter: counterReducer,
+		core: coreReducer,
+		voice: voiceReducer,
 	},
 });

src/components/VoiceBars.js

@@ -0,0 +1,79 @@
+import React from "react";
+
+function VoiceBars() {
+	return (
+		<div className="waves" style={{transform: "rotate(180deg)", marginTop: "130px", transition: "1s"}}>
+			<svg width="100vw" fill="none" version="1.1"
+				xmlns="http://www.w3.org/2000/svg">
+				<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+					<stop offset="0%" stopColor="#00B4DB" />
+					<stop offset="50%" stopColor="#224488" />
+					<stop offset="100%" stopColor="#0083B0" />
+				</linearGradient>
+				<path
+					fill="url(#grad1)"
+					d="
+					M0 67
+					C 273,183
+					822,-40
+					1920.00,106
+
+					V 359
+					H 0
+					V 67
+					Z">
+					<animate
+						repeatCount="indefinite"
+						fill="url(#grad1)"
+						attributeName="d"
+						dur="5s"
+						attributeType="XML"
+						values="
+						M0 77
+						C 473,283
+						822,-40
+						1920,116
+
+						V 359
+						H 0
+						V 67
+						Z;
+
+						M0 77
+						C 473,-40
+						1222,283
+						1920,136
+
+						V 359
+						H 0
+						V 67
+						Z;
+
+						M0 77
+						C 973,260
+						1722,-53
+						1920,120
+
+						V 359
+						H 0
+						V 67
+						Z;
+
+						M0 77
+						C 473,283
+						822,-40
+						1920,116
+
+						V 359
+						H 0
+						V 67
+						Z
+						">
+					</animate>
+				</path>
+			</svg>
+		</div>
+	);
+}
+
+export default VoiceBars;

src/coreSlice.js

@@ -0,0 +1,17 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const coreSlice = createSlice({
+	name: "core",
+	initialState: {
+		plugin: false,
+		data: {}
+	},
+	reducers: {
+		setPlugin: (state, action) => ({...state, plugin: action.payload}),
+		setData: (state, action) => ({...state, data: action.payload}),
+	}
+});
+
+export const { setPlugin, setData } = coreSlice.actions;
+export const selectCore = state => state.core;
+export default coreSlice.reducer;

src/features/counter/Counter.js

@@ -1,58 +0,0 @@
-import React, { useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import {
-	decrement,
-	increment,
-	incrementByAmount,
-	incrementAsync,
-	selectCount,
-} from "./counterSlice";
-import styles from "./Counter.module.css";
-
-export function Counter() {
-	const count = useSelector(selectCount);
-	const dispatch = useDispatch();
-	const [incrementAmount, setIncrementAmount] = useState("2");
-
-	return (
-		<div>
-			<div className={styles.row}>
-				<button
-					className={styles.button}
-					aria-label="Increment value"
-					onClick={() => dispatch(increment())}
-				>
-					+
-				</button>
-				<span className={styles.value}>{count}</span>
-				<button
-					className={styles.button}
-					aria-label="Decrement value"
-					onClick={() => dispatch(decrement())}
-				>
-					-
-				</button>
-			</div>
-			<div className={styles.row}>
-				<input
-					className={styles.textbox}
-					aria-label="Set increment amount"
-					value={incrementAmount}
-					onChange={e => setIncrementAmount(e.target.value)}
-				/>
-				<button
-					className={styles.button}
-					onClick={() => dispatch(incrementByAmount(Number(incrementAmount) || 0))}
-				>
-					Add Amount
-				</button>
-				<button
-					className={styles.asyncButton}
-					onClick={() => dispatch(incrementAsync(Number(incrementAmount) || 0))}
-				>
-					Add Async
-				</button>
-			</div>
-		</div>
-	);
-}

src/features/counter/Counter.module.css

@@ -1,74 +0,0 @@
-.row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.row:not(:last-child) {
-  margin-bottom: 16px;
-}
-
-.value {
-  font-size: 78px;
-  padding-left: 16px;
-  padding-right: 16px;
-  margin-top: 2px;
-  font-family: 'Courier New', Courier, monospace;
-}
-
-.button {
-  appearance: none;
-  background: none;
-  font-size: 32px;
-  padding-left: 12px;
-  padding-right: 12px;
-  outline: none;
-  border: 2px solid transparent;
-  color: rgb(112, 76, 182);
-  padding-bottom: 4px;
-  cursor: pointer;
-  background-color: rgba(112, 76, 182, 0.1);
-  border-radius: 2px;
-  transition: all 0.15s;
-}
-
-.textbox {
-  font-size: 32px;
-  padding: 2px;
-  width: 64px;
-  text-align: center;
-  margin-right: 8px;
-}
-
-.button:hover, .button:focus {
-  border: 2px solid rgba(112, 76, 182, 0.4);
-}
-
-.button:active {
-  background-color: rgba(112, 76, 182, 0.2);
-}
-
-.asyncButton {
-  composes: button;
-  position: relative;
-  margin-left: 8px;
-}
-
-.asyncButton:after {
-  content: "";
-  background-color: rgba(112, 76, 182, 0.15);
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  transition: width 1s linear, opacity 0.5s ease 1s;
-}
-
-.asyncButton:active:after {
-  width: 0%;
-  opacity: 1;
-  transition: 0s
-}

src/features/counter/counterSlice.js

@@ -1,42 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-
-export const counterSlice = createSlice({
-	name: "counter",
-	initialState: {
-		value: 0,
-	},
-	reducers: {
-		increment: state => {
-			// Redux Toolkit allows us to write "mutating" logic in reducers. It
-			// doesn"t actually mutate the state because it uses the Immer library,
-			// which detects changes to a "draft state" and produces a brand new
-			// immutable state based off those changes
-			state.value += 1;
-		},
-		decrement: state => {
-			state.value -= 1;
-		},
-		incrementByAmount: (state, action) => {
-			state.value += action.payload;
-		},
-	},
-});
-
-export const { increment, decrement, incrementByAmount } = counterSlice.actions;
-
-// The function below is called a thunk and allows us to perform async logic. It
-// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
-// will call the thunk with the `dispatch` function as the first argument. Async
-// code can then be executed and other actions can be dispatched
-export const incrementAsync = amount => dispatch => {
-	setTimeout(() => {
-		dispatch(incrementByAmount(amount));
-	}, 1000);
-};
-
-// The function below is called a selector and allows us to select a value from
-// the state. Selectors can also be defined inline where they"re used instead of
-// in the slice file. For example: `useSelector((state) => state.counter.value)`
-export const selectCount = state => state.counter.value;
-
-export default counterSlice.reducer;

src/plugins/Accident.js

@@ -0,0 +1,85 @@
+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) {
+	if (window.sendingAccidentAlert)
+		return;
+	window.sendingAccidentAlert = true;
+	const bot = new Telegram(TG_API);
+	bot.sendMessage(TG_USERID, "User detected in an accident. Location has been attached below.");
+	navigator.geolocation.getCurrentPosition(
+		position => {
+			window.sendingAccidentAlert = false;
+			bot.sendLocation( TG_USERID,
+				position.coords.latitude, position.coords.longitude);
+		},
+		() => {
+			window.sendingAccidentAlert = false;
+			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="95vh"
+		>
+			{
+				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;

src/plugins/GenericPageWithIcon.js

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Box, Button, Heading, Text } from "grommet";
+
+function GenericPageWithIcon(props) {
+	return (
+		<Box
+			align="center"
+			background="light-1"
+			width="100vw"
+			justify="center"
+			direction="column"
+			alignContent="center"
+			height="95vh"
+			style={{
+				padding: "0 3em",
+			}}
+		>
+			{props.icon}
+			<Heading>{props.title}</Heading>
+			<Text style={{ textAlign: "center" }}>{props.description}</Text>
+			<Button primary size="large" onClick={props.close}
+				label="Dismiss" margin="1.5em" />
+		</Box>
+	);
+}
+
+GenericPageWithIcon.propTypes = {
+	title: PropTypes.string,
+	description: PropTypes.string,
+	icon: PropTypes.node,
+	close: PropTypes.func
+};
+
+export default GenericPageWithIcon;

src/plugins/Manual.js

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+import GenericPageWithIcon from "./GenericPageWithIcon";
+import { StatusInfo } from "grommet-icons";
+
+function Manual(props) {
+	return (
+		<GenericPageWithIcon
+			title={props.data.title}
+			description={props.data.description}
+			icon={<StatusInfo color="plain" size="xlarge" />}
+			close={props.close}
+		/>);
+}
+
+Manual.propTypes = {
+	data: PropTypes.object,
+	close: PropTypes.func
+};
+
+Manual.pluginName = "Manual";
+
+export default Manual;

src/plugins/Maps.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Box, Button } from "grommet";
+
+import { MAPS_API } from "../config";
+
+function Maps(props) {
+	const [ location, setLocation ] = useState([null, null]);
+	useEffect(() => {
+		navigator.geolocation.getCurrentPosition(
+			position => setLocation([position.coords.latitude, position.coords.longitude]),
+			() => {}
+		);
+	});
+
+	const mapsEmbedUrl = new URL("https://www.google.com/maps/embed/v1/view");
+	mapsEmbedUrl.searchParams.append("key", MAPS_API);
+	mapsEmbedUrl.searchParams.append("center", `${location[0]},${location[1]}`);
+	mapsEmbedUrl.searchParams.append("zoom", 14);
+	return (
+		<Box
+			align="center"
+			background="light-1"
+			width="100vw"
+			justify="center"
+			direction="column"
+			alignContent="center"
+			height="95vh"
+		>
+			{location[0] === null ?
+				"Loading Location":
+				<iframe
+					width="650"
+					height="300"
+					frameBorder="0"
+					style={{ border: 0 }}
+					src={mapsEmbedUrl.href}>
+				</iframe>
+			}
+			<Button primary size="large" onClick={props.close}
+				label="Dismiss" margin="1.5em" />
+		</Box>
+	);
+}
+
+Maps.propTypes = {
+	data: PropTypes.object,
+	close: PropTypes.func
+};
+
+Maps.pluginName = "Maps";
+
+export default Maps;

src/plugins/Marketplace.js

@@ -0,0 +1,67 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Box, Button, Card, CardBody, CardFooter, CardHeader, Heading } from "grommet";
+import { InstallOption, Trash } from "grommet-icons";
+
+
+function Marketplace(props) {
+	const plugins = [
+		{
+			name: "Maps",
+			description: "Google Maps is a mapping service. It offers satellite imagery, aerial photography, street maps, 360° interactive panoramic views of streets, real-time traffic conditions, and route planning for traveling.",
+			installed: true
+		},
+		{
+			name: "Smart Home",
+			description: "Smart Home Plugin lets you integrate with various well known smart devices allowing you to stream video from various devices.",
+			installed: true
+		},
+		{
+			name: "Spotify",
+			description: "With Spotify, you have access to a world of music. You can listen to artists and albums, or create your own playlist of your favourite songs.",
+			installed: false
+		},
+	];
+	return (
+		<Box
+			align="center"
+			background="light-1"
+			width="100vw"
+			justify="center"
+			direction="column"
+			alignContent="center"
+			height="95vh"
+		>
+			<Box wrap="wrap" direction="row">
+				{
+					plugins.map(i =>
+						<Card key={i.name} style={{margin: "1em", width: "30%"}}>
+							<CardHeader pad="medium"><Heading>{i.name}</Heading></CardHeader>
+							<CardBody pad="medium">{i.description}</CardBody>
+							<CardFooter pad="medium" justify="center">
+								<Button
+									label={i.installed ? "Uninstall": "Install"}
+									icon={i.installed ?
+										<Trash color="status-error" /> :
+										<InstallOption color="status-ok" />
+									}
+								/>
+							</CardFooter>
+						</Card>
+					)
+				}
+			</Box>
+			<Button primary size="large" onClick={props.close}
+				label="Dismiss" margin="1.5em" />
+		</Box>
+	);
+}
+
+Marketplace.propTypes = {
+	data: PropTypes.object,
+	close: PropTypes.func
+};
+
+Marketplace.pluginName = "Marketplace";
+
+export default Marketplace;

src/plugins/PetMode.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import GenericPageWithIcon from "./GenericPageWithIcon";
+import { Sun } from "grommet-icons";
+import axios from "axios";
+
+import Telegram from "../utils/telegram";
+import { CAR_API, TG_API, TG_USERID  } from "../config";
+
+function sendNotification(temp) {
+	if (window.sendingPetAlert)
+		return;
+	window.sendingPetAlert = true;
+	const bot = new Telegram(TG_API);
+	bot.sendMessage(TG_USERID, `The temperature in the car is ${temp}°C. Please check your child/pet.`);
+	window.sendingPetAlert = false;
+}
+
+function PetMode(props) {
+	const [ temp, setTemp ] = useState(null);
+	const [ , setNotified ] = useState(false);
+	useEffect(() => {
+		axios.get(`${CAR_API}data/InsideTemperature`)
+			.then(resp => setTemp(resp.data.value));
+		const id = setInterval(
+			() => axios.get(`${CAR_API}data/InsideTemperature`)
+				.then(resp => {
+					setTemp(resp.data.value);
+					if (resp.data.value > 35 || resp.data.value < 5) {
+						setNotified(notified => {
+							if (notified)
+								return true;
+							sendNotification(resp.data.value);
+							return true;
+						});
+					}
+				}),
+			1000
+		);
+		return () => clearInterval(id);
+	}, []);
+	if (temp === null)
+		return <></>;
+	return (
+		<GenericPageWithIcon
+			title={temp === null ? "Fetching temperature": `${temp}°C`}
+			description={`The temperature inside is ${temp}°C. The pet / child is ${temp > 35 ? "un": ""}safe.`}
+			icon={<Sun color={temp > 35 ? "status-critical": "plain"} size="xlarge" />}
+			close={props.close}
+		/>);
+}
+
+PetMode.propTypes = {
+	close: PropTypes.func
+};
+
+PetMode.pluginName = "Temperature";
+
+export default PetMode;

src/plugins/SmartHome.js

@@ -0,0 +1,50 @@
+import React, {useState, useEffect} from "react";
+import PropTypes from "prop-types";
+import { Box, Button } from "grommet";
+import axios from "axios";
+
+import { CAMERA_URL, LIGHTS_URL } from "../config";
+
+function SmartHome(props) {
+	const [ idx, setIdx ] = useState(0);
+	useEffect(() => {
+		const id = setInterval(() => setIdx(i => i + 1), 20);
+		return () => clearInterval(id);
+	}, []);
+	function turnOn() {
+		axios.get(`${LIGHTS_URL}/on`);
+	}
+	function turnOff() {
+		axios.get(`${LIGHTS_URL}/off`);
+	}
+	return (
+		<Box
+			align="center"
+			background="light-1"
+			width="100vw"
+			justify="center"
+			direction="column"
+			alignContent="center"
+			height="95vh"
+		>
+			<img src={`${CAMERA_URL}?id=${idx}`} />
+			<Box direction="row" margin="1em 0">
+				<Button primary size="large" onClick={turnOn}
+					label="Turn On Lights" margin="0 0 0 0" />
+				<Button primary size="large" onClick={turnOff}
+					label="Turn Off Lights" margin="0 0 0 1em" />
+			</Box>
+			<Button primary size="large" onClick={props.close}
+				label="Dismiss" margin="0" />
+		</Box>
+	);
+}
+
+SmartHome.propTypes = {
+	data: PropTypes.object,
+	close: PropTypes.func
+};
+
+SmartHome.pluginName = "Smart Home";
+
+export default SmartHome;

src/plugins/Temperature.js

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+import GenericPageWithIcon from "./GenericPageWithIcon";
+import { Sun } from "grommet-icons";
+
+function Temperature(props) {
+	return (
+		<GenericPageWithIcon
+			title={props.data.temperature}
+			description={`The current temperature outside is ${props.data.temperature}℃`}
+			icon={<Sun color="plain" size="xlarge" />}
+			close={props.close}
+		/>);
+}
+
+Temperature.propTypes = {
+	data: PropTypes.object,
+	close: PropTypes.func
+};
+
+Temperature.pluginName = "Temperature";
+
+export default Temperature;

src/plugins/Warning.js

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+import GenericPageWithIcon from "./GenericPageWithIcon";
+import { Alert } from "grommet-icons";
+
+function Warning(props) {
+	return (
+		<GenericPageWithIcon
+			title={props.data.title}
+			description={props.data.description}
+			icon={<Alert color="status-critical" size="xlarge" />}
+			close={props.close}
+		/>);
+}
+
+Warning.propTypes = {
+	data: PropTypes.object,
+	close: PropTypes.func
+};
+
+Warning.pluginName = "Warning";
+
+export default Warning;

src/plugins/index.js

@@ -0,0 +1,19 @@
+import Warning from "./Warning";
+import Manual from "./Manual";
+import Temperature from "./Temperature";
+import Accident from "./Accident";
+import PetMode from "./PetMode";
+import SmartHome from "./SmartHome";
+import Maps from "./Maps";
+import Marketplace from "./Marketplace";
+
+export default {
+	warning: Warning,
+	manual: Manual,
+	temperature: Temperature,
+	accident: Accident,
+	petMode: PetMode,
+	smartHome: SmartHome,
+	maps: Maps,
+	marketplace: Marketplace,
+};

src/sample.config.js

@@ -0,0 +1,9 @@
+const WS_BASE = "http://localhost:5050/";
+const TG_API = "xxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx";
+const TG_USERID = 123456789;
+const CAR_API = "http://localhost:5000/";
+const CAMERA_URL = "http://path.to/still/image.jpg";
+const MAPS_API = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
+const LIGHTS_URL = "http://192.168.1.50:5000/";
+
+export { WS_BASE, TG_API, TG_USERID, CAR_API, CAMERA_URL, MAPS_API, LIGHTS_URL };

src/utils/telegram.js

@@ -0,0 +1,19 @@
+import axios from "axios";
+
+class Telegram {
+	constructor(token) {
+		this.axios = axios.create({
+			baseURL: `https://api.telegram.org/bot${token}`
+		});
+	}
+
+	sendMessage(chat_id, text) {
+		this.axios.post("/sendMessage", {chat_id, text});
+	}
+
+	sendLocation(chat_id, latitude, longitude) {
+		this.axios.post("/sendLocation", {chat_id, latitude, longitude});
+	}
+}
+
+export default Telegram;

src/voiceSlice.js

@@ -0,0 +1,17 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const voiceSlice = createSlice({
+	name: "voice",
+	initialState: {
+		recording: false,
+		text: null
+	},
+	reducers: {
+		setRecording: (state, action) => ({...state, recording: action.payload}),
+		setText: (state, action) => ({...state, text: action.payload}),
+	}
+});
+
+export const { setRecording, setText } = voiceSlice.actions;
+export const selectVoice = state => state.voice;
+export default voiceSlice.reducer;

yarn.lock

@@ -73,7 +73,7 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.10":
+"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.10":
   version "7.12.10"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz#54ab9b000e60a93644ce17b3f37d313aaf1d115d"
   integrity sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ==
@@ -1089,7 +1089,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.12.5"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -1105,7 +1105,7 @@
     "@babel/parser" "^7.12.7"
     "@babel/types" "^7.12.7"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.5", "@babel/traverse@^7.7.0":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.5", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
   version "7.12.10"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.10.tgz#2d1f4041e8bf42ea099e5b2dc48d6a594c00017a"
   integrity sha512-6aEtf0IeRgbYWzta29lePeYSk+YAFIC3kyqESeft8o5CkFlYIMX+EQDDWEiAQ9LHOA3d0oHdgrSsID/CKqXJlg==
@@ -1152,6 +1152,28 @@
   resolved "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@emotion/is-prop-valid@^0.8.8":
+  version "0.8.8"
+  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@eslint/eslintrc@^0.2.2":
   version "0.2.2"
   resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.2.tgz#d01fc791e2fc33e88a29d6f3dc7e93d0cd784b76"
@@ -1713,6 +1735,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/component-emitter@^1.2.10":
+  version "1.2.10"
+  resolved "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz#ef5b1589b9f16544642e473db5ea5639107ef3ea"
+  integrity sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg==
+
 "@types/eslint@^7.2.4":
   version "7.2.6"
   resolved "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz#5e9aff555a975596c03a98b59ecd103decc70c3c"
@@ -2563,6 +2590,13 @@ axe-core@^4.0.2:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.1.1.tgz#70a7855888e287f7add66002211a423937063eaf"
   integrity sha512-5Kgy8Cz6LPC9DJcNb3yjAXTu3XihQgEdnIg50c//zOC/MyLP0Clg+Y8Sh9ZjjnvBrDZU4DgXS9C3T9r4/scGZQ==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -2654,6 +2688,21 @@ babel-plugin-named-asset-import@^0.3.7:
   resolved "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd"
   integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==
 
+"babel-plugin-styled-components@>= 1":
+  version "1.12.0"
+  resolved "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9"
+  integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -2732,11 +2781,21 @@ babylon@^6.18.0:
   resolved "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
   integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
 
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+  integrity sha1-MasayLEpNjRj41s+u2n038+6eUc=
+
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base64-arraybuffer@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz#9818c79e059b1355f97e0428a017c838e90ba812"
+  integrity sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=
+
 base64-js@^1.0.2:
   version "1.5.1"
   resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -3130,6 +3189,11 @@ camelcase@^6.0.0, camelcase@^6.1.0, camelcase@^6.2.0:
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -3414,7 +3478,12 @@ commondir@^1.0.1:
   resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
-component-emitter@^1.2.1:
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+  integrity sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=
+
+component-emitter@^1.2.1, component-emitter@~1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
@@ -3677,6 +3746,11 @@ css-blank-pseudo@^0.1.4:
   dependencies:
     postcss "^7.0.5"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -3748,6 +3822,15 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -3956,6 +4039,13 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "2.1.2"
 
+debug@~4.1.0:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -4345,6 +4435,29 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
+engine.io-client@~4.0.0:
+  version "4.0.5"
+  resolved "https://registry.npmjs.org/engine.io-client/-/engine.io-client-4.0.5.tgz#e12b05a11a7a3cccec6d69f9af8435146e3d507e"
+  integrity sha512-1lkn0QdekHQPMTcxUh8LqIuxQHNtKV5GvqkQzmZ1rYKAvB6puMm13U7K1ps3OQZ4joE46asQiAKrcdL9weNEVw==
+  dependencies:
+    base64-arraybuffer "0.1.4"
+    component-emitter "~1.3.0"
+    debug "~4.1.0"
+    engine.io-parser "~4.0.1"
+    has-cors "1.1.0"
+    parseqs "0.0.6"
+    parseuri "0.0.6"
+    ws "~7.2.1"
+    xmlhttprequest-ssl "~1.5.4"
+    yeast "0.1.2"
+
+engine.io-parser@~4.0.1:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.2.tgz#e41d0b3fb66f7bf4a3671d2038a154024edb501e"
+  integrity sha512-sHfEQv6nmtJrq6TKuIz5kyEKH/qSdK56H/A+7DnAuUPWosnIZAS2NHNcPLmyjtY3cGS/MqJdZbUjW97JU72iYg==
+  dependencies:
+    base64-arraybuffer "0.1.4"
+
 enhanced-resolve@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz#3b806f3bfafc1ec7de69551ef93cca46c1704126"
@@ -5098,7 +5211,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.10.0:
   version "1.13.1"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7"
   integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==
@@ -5376,6 +5489,30 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
+grommet-icons@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/grommet-icons/-/grommet-icons-4.5.0.tgz#855ad26338ea1a1503eb18fdae428c431332be6a"
+  integrity sha512-q7TNXV996fDh2e++7WapiNFUk0UEll17iEZ2d75W4yz+8Bb3+vdQ1MeT/d1RRlM0pV2KnTpSeR00GeN4KA9upg==
+  dependencies:
+    grommet-styles "^0.2.0"
+
+grommet-styles@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/grommet-styles/-/grommet-styles-0.2.0.tgz#b2eac2b7e2747cb523434d21728ce5234f8ce4f4"
+  integrity sha512-0OMSYuGeyifYKpg4Gv2HzL8rUdd0ddnJ5LbCBKgDuloC71XIwr9g/Fxa6rs737MbPV7OZ4pEm4wvrjH4epzf1A==
+
+grommet@^2.16.2:
+  version "2.16.2"
+  resolved "https://registry.npmjs.org/grommet/-/grommet-2.16.2.tgz#5f0c3cec8acb2ee87234955640a1e8103974c6f9"
+  integrity sha512-ZiH6l7EumEKtjrYcPpcF6Xp4xpyrTqQ4Ydm3cAF9jiTcc3JViE3lbleC6Q68z1Ebbe6BGIRINBLM/cGVVJUxkQ==
+  dependencies:
+    grommet-icons "^4.5.0"
+    hoist-non-react-statics "^3.2.0"
+    markdown-to-jsx "^6.11.4"
+    polished "^3.4.1"
+    prop-types "^15.7.2"
+    react-desc "^4.1.2"
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -5412,6 +5549,11 @@ harmony-reflect@^1.4.6:
   resolved "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.1.tgz#c108d4f2bb451efef7a37861fdbdae72c9bdefa9"
   integrity sha512-WJTeyp0JzGtHcuMsi7rw2VwtkvLa+JyfEKJCFyfcS0+CDkjQ5lHPu7zEhFZP+PDSRrEgXa5Ah0l1MbgbE41XjA==
 
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+  integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -5501,7 +5643,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7117,6 +7259,14 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-to-jsx@^6.11.4:
+  version "6.11.4"
+  resolved "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz#b4528b1ab668aef7fe61c1535c27e837819392c5"
+  integrity sha512-3lRCD5Sh+tfA52iGgfs/XZiw33f7fFX9Bn55aNnVNUd2GzLDkOWyKYYD8Yju2B1Vn+feiEdgJs8T6Tg0xNokPw==
+  dependencies:
+    prop-types "^15.6.2"
+    unquote "^1.1.0"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -7945,6 +8095,16 @@ parse5@5.1.1:
   resolved "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
   integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
 
+parseqs@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz#8e4bb5a19d1cdc844a08ac974d34e273afa670d5"
+  integrity sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==
+
+parseuri@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz#e1496e829e3ac2ff47f39a4dd044b32823c4a25a"
+  integrity sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -8110,6 +8270,20 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+polished@^3.4.1:
+  version "3.6.7"
+  resolved "https://registry.npmjs.org/polished/-/polished-3.6.7.tgz#44cbd0047f3187d83db0c479ef0c7d5583af5fb6"
+  integrity sha512-b4OViUOihwV0icb9PHmWbR+vPqaSzSAEbgLskvb7ANPATVXGiYv/TQFHQo65S53WU9i5EQ1I03YDOJW7K0bmYg==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
+polished@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.npmjs.org/polished/-/polished-4.0.5.tgz#3f91873c8f72dec1723b3f892f57fbb22645b23d"
+  integrity sha512-BY2+LVtOHQWBQpGN4GPAKpCdsBePOdSdHTpZegRDRCrvGPkRPTx1DEC+vGjIDPhXS7W2qiBxschnwRWTFdMZag==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -8888,7 +9062,7 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9054,6 +9228,11 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-desc@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/react-desc/-/react-desc-4.1.2.tgz#83fc4ede66b2d45ae4ef63c18421474d55972966"
+  integrity sha512-JAVe89uaLr0HZ0IKodnpTPNgNyJ/SPDQnl3VJPVwI+SpebmHvJiBNZEOwX201QmSbsVGqRY8ql/VFPlAx85WzA==
+
 react-dev-utils@^11.0.1:
   version "11.0.1"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.1.tgz#30106c2055acfd6b047d2dc478a85c356e66fe45"
@@ -9890,6 +10069,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -9993,6 +10177,29 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+socket.io-client@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/socket.io-client/-/socket.io-client-3.0.4.tgz#c0203419a9f71e1360ef92a31301e80260e94bb9"
+  integrity sha512-qMvBuS+W9JIN2mkfAWDCxuIt+jpIKDf8C0604zEqx1JrPaPSS6cN0F3B2GYWC83TqBeVJXW66GFxWV3KD88n0Q==
+  dependencies:
+    "@types/component-emitter" "^1.2.10"
+    backo2 "1.0.2"
+    component-bind "1.0.0"
+    component-emitter "~1.3.0"
+    debug "~4.1.0"
+    engine.io-client "~4.0.0"
+    parseuri "0.0.6"
+    socket.io-parser "~4.0.1"
+
+socket.io-parser@~4.0.1:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.2.tgz#3d021a9c86671bb079e7c6c806db6a1d9b1bc780"
+  integrity sha512-Bs3IYHDivwf+bAAuW/8xwJgIiBNtlvnjYRc4PbXgniLmcP1BrakBoq/QhO24rgtgW7VZ7uAaswRGxutUnlAK7g==
+  dependencies:
+    "@types/component-emitter" "^1.2.10"
+    component-emitter "~1.3.0"
+    debug "~4.1.0"
+
 sockjs-client@1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.4.0.tgz#c9f2568e19c8fd8173b4997ea3420e0bb306c7d5"
@@ -10384,6 +10591,22 @@ style-loader@1.3.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+styled-components@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"
+  integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -10393,7 +10616,7 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -10880,7 +11103,7 @@ unpipe@1.0.0, unpipe@~1.0.0:
   resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
-unquote@~1.1.1:
+unquote@^1.1.0, unquote@~1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
   integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
@@ -11492,6 +11715,11 @@ ws@^7.2.3:
   resolved "https://registry.npmjs.org/ws/-/ws-7.4.1.tgz#a333be02696bd0e54cea0434e21dcc8a9ac294bb"
   integrity sha512-pTsP8UAfhy3sk1lSk/O/s4tjD0CRwvMnzvwr4OKGX7ZvqZtUyx4KIJB5JWbkykPoc55tixMGgTNoh3k4FkNGFQ==
 
+ws@~7.2.1:
+  version "7.2.5"
+  resolved "https://registry.npmjs.org/ws/-/ws-7.2.5.tgz#abb1370d4626a5a9cd79d8de404aa18b3465d10d"
+  integrity sha512-C34cIU4+DB2vMyAbmEKossWq2ZQDr6QEyuuCzWrM9zfw1sGc0mYiJ0UnG9zzNykt49C2Fi34hvr2vssFQRS6EA==
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
@@ -11502,6 +11730,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xmlhttprequest-ssl@~1.5.4:
+  version "1.5.5"
+  resolved "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
+  integrity sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=
+
 xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
@@ -11576,6 +11809,11 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+  integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk=
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"