Implement image sending to peers

co-authored-by: mitchemmc <mitchemmc@gmail.com>

src/helpers/useSession.js

@@ -23,17 +23,15 @@ function useSession(onConnectionOpen) {
 
     function handleConnection(connection) {
       connection.on("open", () => {
-        connection.send(
+        connection.send({
-          JSON.stringify({
           id: "sync",
           data: Object.keys(connections)
-          })
+        });
-        );
 
         addConnection(connection);
 
         if (onConnectionOpen) {
-          onConnectionOpen();
+          onConnectionOpen(connection);
         }
       });
 
@@ -58,7 +56,7 @@ function useSession(onConnectionOpen) {
       peer.removeListener("open", handleOpen);
       peer.removeListener("connection", handleConnection);
     };
-  }, [peer, peerId, connections]);
+  }, [peer, peerId, connections, onConnectionOpen]);
 
   function sync(connectionIds) {
     for (let connectionId of connectionIds) {
@@ -76,12 +74,14 @@ function useSession(onConnectionOpen) {
     }
     const connection = peer.connect(connectionId);
     connection.on("open", () => {
-      connection.on("data", json => {
+      connection.on("data", data => {
-        const data = JSON.parse(json);
         if (data.id === "sync") {
           sync(data.data);
         }
       });
+      if (onConnectionOpen) {
+        onConnectionOpen(connection);
+      }
     });
     addConnection(connection);
   }

src/routes/Game.js

@@ -1,24 +1,71 @@
-import React, { useContext, useEffect } from "react";
+import React, {
+  useContext,
+  useEffect,
+  useState,
+  useRef,
+  useCallback
+} from "react";
 import { A } from "hookrouter";
+import { Container, Box, Image, Input, Label } from "theme-ui";
 
 import GameContext from "../contexts/GameContext";
 import useSession from "../helpers/useSession";
 
 function Game() {
   const [gameId, setGameId] = useContext(GameContext);
-  const [peer, peerId, connections, connectTo] = useSession();
+  const handleConnectionOpenCallback = useCallback(handleConnectionOpen);
+  const [peer, peerId, connections, connectTo] = useSession(
+    handleConnectionOpenCallback
+  );
 
   useEffect(() => {
     if (gameId !== null && peerId !== null) {
       connectTo(gameId);
     }
-  }, [gameId, peerId]);
+  }, [gameId, peerId, connectTo]);
+
+  const [imageSource, setImageSource] = useState(null);
+  const imageDataRef = useRef(null);
+
+  function handleImageChange(event) {
+    imageDataRef.current = event.target.files[0];
+    setImageSource(URL.createObjectURL(imageDataRef.current));
+    for (let connection of Object.values(connections)) {
+      connection.send({ id: "image", data: imageDataRef.current });
+    }
+  }
+
+  function handleConnectionOpen(connection) {
+    connection.on("data", data => {
+      if (data.id === "image") {
+        const blob = new Blob([data.data]);
+        imageDataRef.current = blob;
+        setImageSource(URL.createObjectURL(imageDataRef.current));
+      }
+    });
+  }
 
   return (
+    <Container>
+      <Image src={imageSource} />
+      <Box>
+        <Label htmlFor="image">Shove an image in me</Label>
+        <Input
+          my={4}
+          id="image"
+          name="image"
+          onChange={handleImageChange}
+          type="file"
+          accept="image/*"
+        />
+      </Box>
       <div>
-      {gameId ? `You've joined ${gameId}` : "You've started a new game"}
+        {gameId
+          ? `You've joined ${gameId}`
+          : `You've started a new game: ${peerId}`}
         <A href="/">GO TO HOME</A>GAME!
       </div>
+    </Container>
   );
 }
 

src/routes/Join.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useContext } from "react";
 import { navigate } from "hookrouter";
 import { Container, Box, Label, Input, Button } from "theme-ui";