Switch to last react-sync-board with wire.io

package-lock.json

@@ -2781,9 +2781,9 @@
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.15.3",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz",
-          "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==",
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+          "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
@@ -2845,9 +2845,9 @@
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.15.3",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz",
-          "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==",
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+          "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
@@ -2884,9 +2884,9 @@
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.15.3",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz",
-          "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==",
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+          "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
@@ -4633,21 +4633,6 @@
         }
       }
     },
-    "client2client.io": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/client2client.io/-/client2client.io-2.0.2.tgz",
-      "integrity": "sha512-iLLz/SSFzfWdXg4yZm5EQt+HdgfcrlbrrBB5qCNxOy/Lnuzf3NKn2nOWCPTplZaUyP1NMy/3fgSV7yrlXBmXYQ==",
-      "requires": {
-        "nanoid": "^3.1.20"
-      },
-      "dependencies": {
-        "nanoid": {
-          "version": "3.1.23",
-          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
-          "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw=="
-        }
-      }
-    },
     "clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@@ -9299,9 +9284,9 @@
       }
     },
     "react-sync-board": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/react-sync-board/-/react-sync-board-0.1.6.tgz",
-      "integrity": "sha512-ZljB2Fa8HQ0Hcf0lQRZihP0B/mcwafow6JawBSwVHXmusnMki5LXgHSEJ7KHNpsTWeRVQJY0AjNpUJZ0cr6xsA==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/react-sync-board/-/react-sync-board-0.2.0.tgz",
+      "integrity": "sha512-3OL5jYbqh5zBStbXNCCBmxoYVBAy418y9T9T9icwRmIRlwZwAOOdD4JYygI7ivX3O6jDIhOY82PUQWb/UmolCw==",
       "requires": {
         "@emotion/react": "^11.4.0",
         "@emotion/styled": "^11.3.0",
@@ -9320,9 +9305,9 @@
           "integrity": "sha512-DiwdBwc0BryPFFXoCrW8XQGXl2rEtMToODybxZjKnN5IJXt/tV/FsN02pCK/b7KcWvJEioz3c74lQSmayFvS4Q=="
         },
         "dayjs": {
-          "version": "1.10.6",
-          "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.6.tgz",
-          "integrity": "sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw=="
+          "version": "1.10.7",
+          "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
+          "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
         },
         "nanoid": {
           "version": "3.1.25",

package.json

@@ -6,7 +6,6 @@
     "@color2k/compat": "^1.0.0-rc.5",
     "@scripters/use-socket.io": "git+https://github.com/jrmi/use-socket.io.git#updated",
     "chota": "^0.8.0",
-    "client2client.io": "^2.0.2",
     "color2k": "^1.0.0-rc.5",
     "dayjs": "^1.10.4",
     "diacritic": "0.0.2",
@@ -33,7 +32,7 @@
     "react-query": "^3.13.4",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-sync-board": "^0.1.6",
+    "react-sync-board": "^0.2.0",
     "react-toastify": "^6.1.0",
     "react-useportal": "^1.0.14",
     "recoil": "^0.3.1",

src/hooks/SubscribeSessionEvents.jsx

@@ -1,10 +1,10 @@
 import debounce from "lodash.debounce";
 import React from "react";
 
-import { useC2C, useBoardConfig } from "react-sync-board";
+import { useWire, useBoardConfig } from "react-sync-board";
 
 export const SubscribeSessionEvents = ({ getSession, setSession }) => {
-  const { c2c, isMaster } = useC2C("board");
+  const { wire, isMaster } = useWire("board");
 
   const [, setBoardConfig] = useBoardConfig();
 
@@ -16,7 +16,7 @@ export const SubscribeSessionEvents = ({ getSession, setSession }) => {
   React.useEffect(() => {
     const unsub = [];
     if (isMaster) {
-      c2c
+      wire
         .register("getSession", async () => {
           return await getSessionRef.current();
         })
@@ -27,20 +27,20 @@ export const SubscribeSessionEvents = ({ getSession, setSession }) => {
     return () => {
       unsub.forEach((u) => u());
     };
-  }, [c2c, isMaster]);
+  }, [wire, isMaster]);
 
   // Subscribe loadSession and updateBoardConfig events
   React.useEffect(() => {
     const unsub = [];
     unsub.push(
-      c2c.subscribe("loadSession", (session) => {
+      wire.subscribe("loadSession", (session) => {
         setSession(session);
       })
     );
     return () => {
       unsub.forEach((u) => u());
     };
-  }, [c2c, setBoardConfig, setSession]);
+  }, [wire, setBoardConfig, setSession]);
 
   return null;
 };

src/hooks/useSession.jsx

@@ -3,7 +3,7 @@ import {
   useItemActions,
   useMessage,
   useBoardConfig,
-  useC2C,
+  useWire,
 } from "react-sync-board";
 
 import SubscribeSessionEvents from "./SubscribeSessionEvents";
@@ -41,7 +41,7 @@ export const SessionProvider = ({ sessionId, fromGameId, children }) => {
   const [sessionLoaded, setSessionLoaded] = React.useState(false);
   const [currentGameId, setCurrentGameId] = React.useState(fromGameId);
 
-  const { c2c } = useC2C("board");
+  const { wire } = useWire("board");
 
   const loadSession = React.useCallback(async () => {
     let sessionData;
@@ -81,12 +81,12 @@ export const SessionProvider = ({ sessionId, fromGameId, children }) => {
 
       if (sync) {
         // Send loadSession event for other user
-        c2c.publish("loadSession", newData);
+        wire.publish("loadSession", newData);
       }
 
       setSessionLoaded(true);
     },
-    [c2c, setBoardConfig, setItemList, setMessages]
+    [wire, setBoardConfig, setItemList, setMessages]
   );
 
   const getCurrentSession = React.useCallback(async () => {

src/views/BoardView/BoardView.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Board, useC2C } from "react-sync-board";
+import { Board, useWire } from "react-sync-board";
 
 import { SHOW_WELCOME } from "../../utils/settings";
 import WelcomeModal from "./WelcomeModal";
@@ -23,7 +23,7 @@ const style = {
 };
 
 export const BoardView = ({ mediaLibraries, edit, itemLibraries }) => {
-  const { isMaster } = useC2C("board");
+  const { isMaster } = useWire("board");
   const [showWelcomeModal, setShowWelcomeModal] = React.useState(
     SHOW_WELCOME && !edit && isMaster
   );

src/views/BoardView/LoadSessionModal.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useC2C } from "react-sync-board";
+import { useWire } from "react-sync-board";
 
 import useSession from "../../hooks/useSession";
 
@@ -10,16 +10,16 @@ import LoadData from "./LoadData";
 
 const LoadSessionModal = ({ show, setShow }) => {
   const { t } = useTranslation();
-  const { c2c } = useC2C("board");
+  const { wire } = useWire("board");
   const { setSession } = useSession();
 
   const loadSession = React.useCallback(
     (sessionData) => {
       setSession(sessionData);
-      c2c.publish("loadSession", sessionData);
+      wire.publish("loadSession", sessionData);
       setShow(false);
     },
-    [c2c, setSession, setShow]
+    [wire, setSession, setShow]
   );
 
   return (

src/views/BoardView/NavBar.jsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { useHistory, useRouteMatch } from "react-router-dom";
 import { confirmAlert } from "react-confirm-alert";
-import { useC2C, useBoardConfig } from "react-sync-board";
+import { useWire, useBoardConfig } from "react-sync-board";
 
 import UserList from "../../users/UserList";
 import Touch from "../../ui/Touch";
@@ -138,7 +138,7 @@ const NavBar = ({ editMode }) => {
   const { sessionId: room } = useSession();
   const [boardConfig] = useBoardConfig();
 
-  const { isMaster } = useC2C("board");
+  const { isMaster } = useWire("board");
 
   const history = useHistory();
   const match = useRouteMatch();

src/views/RoomView/RoomNavBar.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 
 import { ENABLE_WEBCONFERENCE } from "../../utils/settings";
 import useLocalStorage from "../../hooks/useLocalStorage";
-import { useC2C } from "react-sync-board";
+import { useWire } from "react-sync-board";
 
 import Touch from "../../ui/Touch";
 import UserList from "../../users/UserList";
@@ -119,7 +119,7 @@ const StyledNavBar = styled.div.attrs(() => ({ className: "nav" }))`
 
 const RoomNavBar = () => {
   const { t } = useTranslation();
-  const { room } = useC2C("room");
+  const { room } = useWire("room");
   const [showLink, setShowLink] = React.useState(false);
   const [isBeta] = useLocalStorage("isBeta", false);
 

src/views/RoomView/RoomView.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { nanoid } from "nanoid";
 import styled from "styled-components";
 
-import { RoomWrapper, useC2C, useUsers } from "react-sync-board";
+import { RoomWrapper, useWire, useUsers } from "react-sync-board";
 
 import { Switch, Route, Link } from "react-router-dom";
 import Session from "../Session";
@@ -98,7 +98,7 @@ const Room = ({ roomId, room, setRoom }) => {
   const { t } = useTranslation();
   const { users, setCurrentUser } = useUsers();
 
-  const { isMaster } = useC2C("room");
+  const { isMaster } = useWire("room");
 
   const onAdd = () => {
     setRoom((prev) => ({
@@ -171,7 +171,7 @@ const Room = ({ roomId, room, setRoom }) => {
 };
 
 const SubscribeRoomEvents = ({ room, setRoom }) => {
-  const { c2c, isMaster } = useC2C("room");
+  const { wire, isMaster } = useWire("room");
   const isMasterRef = React.useRef(isMaster);
   isMasterRef.current = isMaster;
   const roomRef = React.useRef(room);
@@ -182,7 +182,7 @@ const SubscribeRoomEvents = ({ room, setRoom }) => {
     const unsub = [];
     // Master register getRoom for peers
     if (isMaster) {
-      c2c
+      wire
         .register("getRoom", () => {
           return roomRef.current;
         })
@@ -192,7 +192,7 @@ const SubscribeRoomEvents = ({ room, setRoom }) => {
     } else {
       // Others register roomUpdate
       unsub.push(
-        c2c.subscribe("roomUpdate", (newRoom) => {
+        wire.subscribe("roomUpdate", (newRoom) => {
           setRoom(newRoom);
         })
       );
@@ -200,7 +200,7 @@ const SubscribeRoomEvents = ({ room, setRoom }) => {
     return () => {
       unsub.forEach((u) => u());
     };
-  }, [c2c, isMaster, setRoom]);
+  }, [wire, isMaster, setRoom]);
 
   // Get Room from master at connection
   React.useEffect(() => {
@@ -209,21 +209,21 @@ const SubscribeRoomEvents = ({ room, setRoom }) => {
         setRoom(roomData);
       };
 
-      c2c.call("getRoom").then(onGetRoom, () => {
+      wire.call("getRoom").then(onGetRoom, () => {
         // retry later
         setTimeout(() => {
-          c2c.call("getRoom").then(onGetRoom, (error) => console.log(error));
+          wire.call("getRoom").then(onGetRoom, (error) => console.log(error));
         }, 2000);
       });
     }
-  }, [c2c, isMaster, setRoom]);
+  }, [wire, isMaster, setRoom]);
 
   // Send room update on change if master
   React.useEffect(() => {
     if (isMaster) {
-      c2c.publish("roomUpdate", room);
+      wire.publish("roomUpdate", room);
     }
-  }, [c2c, isMaster, room]);
+  }, [wire, isMaster, room]);
 
   return null;
 };

src/views/Session.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import useAsyncEffect from "use-async-effect";
-import { BoardWrapper, useC2C } from "react-sync-board";
+import { BoardWrapper, useWire } from "react-sync-board";
 import { nanoid } from "nanoid";
 
 import { itemTemplates, itemLibrary } from "../gameComponents";
@@ -58,7 +58,7 @@ export const Session = () => {
 
   const gameLoadingRef = React.useRef(false);
 
-  const { c2c, isMaster } = useC2C("board");
+  const { wire, isMaster } = useWire("board");
 
   const { t } = useTranslation();
 
@@ -82,10 +82,10 @@ export const Session = () => {
       const onReceiveGame = (receivedSession) => {
         setSession(receivedSession);
       };
-      c2c.call("getSession").then(onReceiveGame, () => {
+      wire.call("getSession").then(onReceiveGame, () => {
         setTimeout(
           () =>
-            c2c
+            wire
               .call("getSession")
               .then(onReceiveGame, (error) =>
                 console.log("Failed to call getSession with error", error)
@@ -94,7 +94,7 @@ export const Session = () => {
         );
       });
     }
-  }, [c2c, isMaster, sessionLoaded, setSession]);
+  }, [wire, isMaster, sessionLoaded, setSession]);
 
   const availableItemLibrary = React.useMemo(() => {
     let itemList = availableItems;