Merge pull request #16 from Callhub-Connect/create-session

Added create and join session functionality

package.json

@@ -18,6 +18,7 @@
   },
   "scripts": {
     "start": "PORT=3000 react-scripts start",
+    "start-pc": "set PORT=3000 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",
     "eject": "react-scripts eject"

src/App.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import EnterCode from './components/EnterCode';
 import EndSession from './components/EndSession';
+import StartSessionButton from './components/StartSessionButton';
 import GenerateSession from './components/GenerateSession';
 import Welcome from './components/Welcome';
 import Chat from './components/Chat';
@@ -55,6 +56,10 @@ function App() {
                     path="*"
                     element={<Navigate to="/" />}
                 />
+                <Route
+                    path="/start-session"
+                    element={<StartSessionButton/>}
+                />
             </Routes>
         </Router>
     </>

src/components/EnterCode.jsx

@@ -1,5 +1,7 @@
 import styled from "styled-components";
+import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import axios from 'axios';
 
 const Container = styled.div`
     background-image: linear-gradient(to bottom right, #0a8e3d, #9fdb3f);
@@ -133,14 +135,34 @@ const Button = styled.button`
 `;
 
 function EnterCode() {
-    let navigate = useNavigate(); 
+    let navigate = useNavigate();
+    const [sessionInput, setSessionInput] = useState("");
 
     // this is just for demo purposes, we're going to need to integrate this with specific session
-    const routeChange = () =>{ 
-        let path = `/session`; 
-        navigate(path);
+    const joinSession = () => {
+        let joinUrl = "http://localhost:8080/session/join/" + sessionInput;
+
+        axios.get(joinUrl)
+            .then(function (response) {
+                console.log(response);
+                let sessionCode = response.data.sessionCode;
+                sessionStorage.setItem('sessionCode', sessionCode);
+                let sessionId = response.data.sessionId;
+                sessionStorage.setItem('sessionId', sessionId);
+                console.log(sessionCode);
+                let path = `/session`; 
+                navigate(path);
+            })
+            .catch(error => {
+                console.log('error', error);
+                alert('Invalid code');
+            });
     }
 
+    const handleInputChange = (e) => {
+        setSessionInput(e.target.value);
+    };
+
     const handleKeyPress = (e) => {
         if (e.key === "Enter") {
           routeChange();
@@ -154,8 +176,8 @@ function EnterCode() {
                 <Text>Enter your session code</Text>
                 <InputSection>
                     <Input placeholder="ex. abcd123" 
-                        onKeyPress={handleKeyPress}/>
-                    <Button onClick={routeChange}>Connect</Button>
+                        onKeyPress={handleKeyPress} onChange={handleInputChange}/>
+                    <Button onClick={joinSession}>Connect</Button>
                 </InputSection>
             </CodeContainer>
         </Container>

src/components/StartSessionButton.jsx

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import "bootstrap/dist/css/bootstrap.min.css";
+import axios from 'axios';
+
+class StartSessionButton extends Component {
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+
+    //TODO: replace with hosted address
+    axios.get("http://localhost:8080/session/new-session")
+      .then(function (response) {
+        console.log(response);
+        let sessionCode = response.data.sessionCode;
+        sessionStorage.setItem('sessionCode', sessionCode);
+        let sessionId = response.data.sessionId;
+        sessionStorage.setItem('sessionId', sessionId);
+        console.log(sessionCode);
+      })
+      .catch(error => {
+        console.log('error', error)
+      });
+  }
+
+  render() {
+    return (
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }}>
+        <button type="button" className="btn btn-success btn-lg" onClick={this.handleSubmit}>Start Session</button>
+      </div>
+    );
+  }
+}
+
+export default StartSessionButton;