.gitignore

@@ -23,4 +23,3 @@ yarn-debug.log*
 yarn-error.log*
 
 .eslintcache
-src/config.js

src/App.js

@@ -1,15 +1,12 @@
 import React from "react";
 import { Grommet } from "grommet";
 import Core from "./Core";
-import WebSocketProvider from "./WebSocket";
 
 function App() {
 	return (
-		<WebSocketProvider>
-			<Grommet plain>
-				<Core />
-			</Grommet>
-		</WebSocketProvider>
+		<Grommet plain>
+			<Core />
+		</Grommet>
 	);
 }
 

src/Core.js

@@ -7,6 +7,7 @@ import * as plugins from "./plugins";
 function Core() {
 	const coreState = useSelector(selectCore);
 	const dispatch = useDispatch();
+	console.log(plugins.default);
 	const plugin = plugins.default[coreState.plugin];
 	const props = {
 		data: coreState.data,
@@ -26,7 +27,10 @@ function Core() {
 				}
 			</>
 		}
-		{plugin ? plugin(props) :null}
+		{plugin ?
+			React.cloneElement(plugin(), props)
+			:null
+		}
 	</>;
 }
 

src/WebSocket.js

@@ -1,42 +0,0 @@
-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";
-
-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(setPlugin(payload.plugin));
-			dispatch(setData(payload.data));
-			if (payload.time) {
-				setTimeout(() => {
-					dispatch(setData({}));
-					dispatch(setPlugin(false));
-				}, payload.time);
-			}
-		});
-	}
-
-	return (
-		<WebSocketContext.Provider value={socket}>
-			{children}
-		</WebSocketContext.Provider>
-	);
-}
-
-WebSocketProvider.propTypes = {
-	children: PropTypes.node
-};
-
-export default WebSocketProvider;

src/sample.config.js

@@ -1,3 +0,0 @@
-const WS_BASE = "http://localhost:5050/";
-
-export { WS_BASE };