socket.io integration, reload connection list after change

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;
 }