From ead8d2a683349ff6406d2c3bd63d45a9961c1796 Mon Sep 17 00:00:00 2001
From: Lucas Bateson <lucas.bateson@gmail.com>
Date: Fri, 5 Jan 2024 10:11:54 +0100
Subject: [PATCH] Fix errors

---
 src/Client.jsx | 18 +++++++++---------
 src/Host.jsx   | 36 ++++++++++++++++++------------------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/Client.jsx b/src/Client.jsx
index 7975d41..f99adce 100644
--- a/src/Client.jsx
+++ b/src/Client.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import Peer from 'peerjs';
 
 const Client = () => {
@@ -8,6 +8,12 @@ const Client = () => {
   const [peer, setPeer] = useState(null);
   const [conn, setConn] = useState(null);
 
+  const connectToHost = useCallback(() => {
+    if (!peer) return;
+    const connection = peer.connect("PostIt" + hostId);
+    setupConnection(connection);
+  }, [peer, hostId]);
+
   useEffect(() => {
     const newPeer = new Peer();
     newPeer.on('open', id => {
@@ -27,13 +33,7 @@ const Client = () => {
     }, 5000);
 
     return () => clearInterval(intervalId); // Cleanup on unmount
-  }, [peer, conn]);
-
-  const connectToHost = () => {
-    if (!peer) return;
-    const connection = peer.connect("PostIt" + hostId);
-    setupConnection(connection);
-  };
+  }, [peer, conn, connectToHost]);
 
   const setupConnection = (connection) => {
     setConn(connection);
@@ -90,4 +90,4 @@ const Client = () => {
   );
 };
 
-export default Client;
\ No newline at end of file
+export default Client;
diff --git a/src/Host.jsx b/src/Host.jsx
index 108a6e5..6e6930c 100644
--- a/src/Host.jsx
+++ b/src/Host.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import Peer from 'peerjs';
 
 const Host = () => {
@@ -14,6 +14,22 @@ const Host = () => {
     }
     return numbers;
   }
+  
+  const setupConnection = useCallback((connection) => {
+    setConn(connection);
+    connection.on('open', () => {
+      alert('A client has connected!');
+    });
+
+    connection.on('data', data => {
+      handleData(data)
+    });
+
+    connection.on('error', err => {
+      console.error('Connection error:', err);
+      setConn(null);
+    });
+  }, []);
 
   useEffect(() => {
     const newPeer = new Peer("PostIt" + generateID());
@@ -34,23 +50,7 @@ const Host = () => {
     }, 5000); // Check every 5 seconds
 
     return () => clearInterval(intervalId); // Cleanup on unmount
-  }, [conn]);
-
-  const setupConnection = (connection) => {
-    setConn(connection);
-    connection.on('open', () => {
-      alert('A client has connected!');
-    });
-
-    connection.on('data', data => {
-      handleData(data)
-    });
-
-    connection.on('error', err => {
-      console.error('Connection error:', err);
-      setConn(null);
-    });
-  };
+  }, [conn, setupConnection]);
 
   const sendData = () => {
     if (conn && conn.open) {