socket.io integration, reload connection list after change

web/src/App.js

@@ -1,12 +1,15 @@
-import React from "react";
-import "./index.css";
-import Screen from "./Screen";
-import {CurrentWidgetProvider} from "./widgets/useCurrentWidget";
+import React from 'react';
+import './index.css';
+import Screen from './Screen';
+import { CurrentWidgetProvider } from './widgets/useCurrentWidget';
+import { SocketProvider } from './utility/SocketProvider';
 
 function App() {
   return (
     <CurrentWidgetProvider>
-      <Screen />
+      <SocketProvider>
+        <Screen />
+      </SocketProvider>
     </CurrentWidgetProvider>
   );
 }

web/src/modals/ConnectionModal.js

@@ -11,18 +11,15 @@ export default function ConnectionModal({ modalState, connection }) {
 
   const handleTest = async values => {
     const resp = await axios.post('connections/test', values);
-    console.log('resp.data', resp.data);
     const { error, version } = resp.data;
 
     setSqlConnectResult(error || version);
-
-    // modalState.close();
   };
 
   const handleSubmit = async values => {
     const resp = await axios.post('connections/save', values);
 
-    // modalState.close();
+    modalState.close();
   };
   return (
     <ModalBase modalState={modalState}>

web/src/utility/SocketProvider.js

@@ -0,0 +1,18 @@
+import io from 'socket.io-client';
+import React from 'react';
+
+const SocketContext = React.createContext();
+
+export function SocketProvider({ children }) {
+  const [socket, setSocket] = React.useState();
+  React.useEffect(() => {
+    // const newSocket = io('http://localhost:3000', { transports: ['websocket'] });
+    const newSocket = io('http://localhost:3000');
+    setSocket(newSocket);
+  }, []);
+  return <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>;
+}
+
+export default function useSocket() {
+  return React.useContext(SocketContext);
+}

web/src/utility/useFetch.js

@@ -1,16 +1,33 @@
 import React from 'react';
 import axios from './axios';
+import useSocket from './SocketProvider';
 
-export default function useFetch(url, defValue) {
-  const [value, setValue] = React.useState(defValue);
+export default function useFetch({ defaultValue, reloadTrigger, url, ...config }) {
+  const [value, setValue] = React.useState(defaultValue);
+  const [loadCounter, setLoadCounter] = React.useState(0);
+  const socket = useSocket();
+
+  const handleReload = () => {
+    setLoadCounter(loadCounter + 1);
+  };
 
   async function loadValue() {
-    const resp = await axios.get(url);
+    const resp = await axios.request({
+      method: 'get',
+      url,
+      ...config,
+    });
     setValue(resp.data);
   }
   React.useEffect(() => {
     loadValue();
-  }, [url]);
+    if (reloadTrigger && socket) {
+      socket.on(reloadTrigger, handleReload);
+      return () => {
+        socket.off(reloadTrigger, handleReload);
+      };
+    }
+  }, [url, socket, loadCounter]);
 
   return value;
 }

web/src/widgets/DatabaseWidget.js

@@ -7,8 +7,10 @@ import connectionAppObject from '../appobj/connectionAppObject';
 
 export default function DatabaseWidget() {
   const modalState = useModalState();
-  const connections = useFetch('connections/list', []);
-  console.log(connections);
+  const connections = useFetch({
+    url: 'connections/list',
+    reloadTrigger: 'connection-list-changed',
+  });
   return (
     <>
       <ConnectionModal modalState={modalState} />