Webapp 1.0.0

WEB_APP/back_end/app.py

@@ -8,16 +8,17 @@
             static_folder='static')
 
 connections = {}
-
-socketio = SocketIO(app=app,cors_allowed_origins=["https://dev.reed.codes","http://localhost:5000"])
+# Socket.io will reject any connection that doesn't originate from one of the below domains,
+# if you're self-hosting, you may have to add your domain to the list below.
+socketio = SocketIO(app=app,cors_allowed_origins=["https://buzz.reed.codes","http://localhost:8000"])
 
 if __name__ == '__main__':
     socketio.run(app)
 
 @socketio.on('message')
 def handle_message(message):
+    # Register a new connection
     connections[message] = request.sid
-    print(connections)
 
 @app.route("/")
 def index():

WEB_APP/front_end/package.json

@@ -2,7 +2,7 @@
   "name": "front_end",
   "version": "0.1.0",
   "private": true,
-  "homepage":"https://dev.reed.codes/buzz",
+  "homepage":"https://buzz.reed.codes",
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

WEB_APP/front_end/src/App.js

@@ -2,18 +2,18 @@ import './App.css';
 import { io } from "socket.io-client";
 import { ReactComponent as Clock } from "./Clock.svg"
 import React, { useState, useEffect, useReducer, useRef } from 'react';
+
 function generateCode(){
   let characters = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
+  //This generates a random 6 length string made with characters from the characters array
   return Array.from(new Array(6)).map(() => characters[Math.floor(Math.random() * characters.length)]).join("");
 }
 
 const socket = io({
-  path: "/buzz/socket.io"
+  path: "/socket.io"
 });
 
-
-
-
+// Component for displaying an alert
 const Alert = (props) => {
   return (<div className="alert">
       <div className="alertLeft">
@@ -35,14 +35,16 @@ const PairNotice = (props) => {
 
 const App = () => {
   let code;
+  // First, check whether the user has a code stored in local storage
   if(localStorage.getItem("code") == null){
+    //If not, generate a new code and store it in local storage
     code = generateCode();
     localStorage.setItem("code",code);    
   }
   else{
     code = (localStorage.getItem("code"));
   }
-
+  // Use a reference, so that we can access the alerts array in the socker message event handler
   const alerts = useRef([]);
   const [useAlerts,_setAlerts] = useState([]);
   const [hasPaired,setPaired] = useState(false)
@@ -56,7 +58,6 @@ const App = () => {
               icon:"./logo192.png"
             });
             let now = new Date();
-
             alerts.current = [now.toLocaleTimeString(),...alerts.current];
             _setAlerts(alerts.current);
           }
@@ -66,7 +67,8 @@ const App = () => {
       }
     });
   },[]);
-
+
+  // Sends the current code to the server
   useEffect(()=>{
     socket.send(code);
   },[code]);