From e1c42c90d580c63e8b80de7568abab8176da7ed6 Mon Sep 17 00:00:00 2001
From: Ceda EI <ceda_ei@webionite.com>
Date: Fri, 1 Jan 2021 01:23:42 +0530
Subject: [PATCH] Fix rendering issues with plugins

Plugins wouldn't render if the number of hooks changed. This was because
the dynamic content substitution would create variable number of hooks.
This has been fixed by creating an element instead of placing content.
---
 src/Core.js      | 6 +++---
 src/WebSocket.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Core.js b/src/Core.js
index a4838c0..5238e7f 100644
--- a/src/Core.js
+++ b/src/Core.js
@@ -3,19 +3,19 @@ import { useSelector, useDispatch } from "react-redux";
 import { Box, Button, Clock } from "grommet";
 
 import { setPlugin, selectCore } from "./coreSlice";
-import * as plugins from "./plugins";
+import plugins from "./plugins";
 
 function Core() {
 	const coreState = useSelector(selectCore);
 	const dispatch = useDispatch();
-	const plugin = plugins.default[coreState.plugin];
+	const plugin = plugins[coreState.plugin];
 	const props = {
 		data: coreState.data,
 		close: () => dispatch(setPlugin(false))
 	};
 	const dummyButtons = ["Maps", "Home Devices", "Phone"];
 	return <>
-		{plugin ? plugin(props) : (
+		{plugin ? React.createElement(plugin, props, null) : (
 			<Box
 				align="center"
 				background="light-1"
diff --git a/src/WebSocket.js b/src/WebSocket.js
index cc4550a..1612a5a 100644
--- a/src/WebSocket.js
+++ b/src/WebSocket.js
@@ -17,8 +17,8 @@ function WebSocketProvider({ children }) {
 		socket = io.connect(WS_BASE);
 
 		socket.on("switchPlugin", (payload) => {
+			dispatch(setData(payload.data || {}));
 			dispatch(setPlugin(payload.plugin));
-			dispatch(setData(payload.data));
 			if (payload.time) {
 				setTimeout(() => {
 					dispatch(setData({}));