cleanup

.github/workflows/deploy.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Deploy react app to github pages
         uses: tanwanimohit/deploy-react-to-ghpages@v1.0.1

.vscode/settings.json

@@ -4,5 +4,8 @@
     },
     "yaml.schemas": {
         "https://json.schemastore.org/github-workflow.json": "file:///mnt/data/projects/Katana/.github/workflows/deploy.yml"
-    }
+    },
+    "editor.indentSize": "tabSize",
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false
 }

README.md

@@ -1,8 +1,8 @@
 # Katana - P2P file transfer in browser
 
-P2P file transfer using [peerjs](https://peerjs.com/) library. [Deployed](https://sekky61.github.io/Katana/) with GitHub pages.
+P2P file transfer using [peerjs](https://peerjs.com/) library. [Try it now!](https://sekky61.github.io/Katana/)
 
-Not in fully working state. Tested on current Google Chrome.
+Not in fully working state. Tested on current Google Chrome. Deployed using GitHub pages.
 
 ## Development
 

src/App.tsx

@@ -1,30 +1,31 @@
-import Peer from 'peerjs';
-import { ClientProvider, FileSharingClientContext, useFileSharingClientContext } from './util/FileSharingClientContext'
-import ClientInfo from './ClientInfo';
-import SendBubble from './SendBubble';
+import { ClientProvider, useFileSharingClientContext } from './misc/FileSharingClientContext'
+import ConnectionWindow from './components/ConnectionWindow';
+import SendBubble from './components/SendBubble';
 import { useEffect } from 'react';
-import ReceiveBubble from './ReceiveBubble';
-import { readUserIDFromParams } from './util/misc';
+import ReceiveBubble from './components/ReceiveBubble';
+import { readUserIDFromParams } from './misc/misc';
 
+// The main page, layout
 function Page() {
 
+  // Init the peer client
   const { client } = useFileSharingClientContext();
 
+  // Connect to the other peer if the id is in the URL
   const othersId = readUserIDFromParams();
-
   useEffect(() => {
     if (!client.isConnecting && !client.isConnected && othersId) {
       client.connectTo(othersId);
     }
-  }, [client]
+  }, [client, othersId]
   );
 
   return (
     <div className="container mx-auto px-4 mt-20">
       <h1 className='text-4xl mb-10'>Katana - a File sender</h1>
 
       <div className="mb-1">
-        <ClientInfo></ClientInfo>
+        <ConnectionWindow></ConnectionWindow>
       </div>
       <div className="grid grid-cols-2 gap-1">
         <SendBubble />