Merge pull request #17 from Callhub-Connect/chat-code-display

Added code display in chat
Callhub-Connect · Nov 9, 2023 · c21014c · c21014c
2 parents d12fc98 + 6848db6
commit c21014c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 46 deletions.
diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx
@@ -58,10 +58,9 @@ const EndButton = styled.button`
     border-radius: 30px;
     padding: 8px 16px;
     margin: auto;
-    margin-right: 2%;
+    margin-right: 8%;
     color: white;
     font-size: x-large;
-    height: fit-content;
     cursor: pointer;
     &:hover {
         background-color: #076a2d;
@@ -192,7 +191,10 @@ function Chat() {
     <Container>
       <Header>
         <Logo src="./img/callhubLogo2.svg" alt="Callhub Logo" />
-        <EndButton onClick={routeChange}>End Session</EndButton>
+        <div style={{ display: "flex", gap: "25px", alignItems: "center", width: "21%"}}>
+          <h2>{sessionStorage.getItem("sessionCode")}</h2>
+          <EndButton onClick={routeChange}>End Session</EndButton>
+        </div>
       </Header>
       <DualContainer>
         <Left>

diff --git a/src/components/GenerateSession.jsx b/src/components/GenerateSession.jsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { useNavigate } from "react-router-dom";
+import StartSessionButton from './StartSessionButton';
 
 const Container = styled.div`
     background-image: linear-gradient(to bottom right, #0a8e3d, #9fdb3f);
@@ -41,37 +41,13 @@ const Text = styled.h3`
     margin-bottom: 30px;
 `;
 
-const Button = styled.button`
-    height: 50px;
-    width: 60%;
-    background-color: #0b9f43;
-    border-radius: 30px 30px 30px 30px;
-    position: relative;
-    color: white;
-    font-family: 'League Spartan', sans-serif;
-    font-size: x-large;
-    border: 0px solid;
-    cursor: pointer;
-    &:hover {
-        background-color: #076a2d;
-    }
-`
-
 function GenerateSession() {
-    let navigate = useNavigate(); 
-
-    // this is just for demo purposes, we're going to need to integrate this with specific session
-    const routeChange = () =>{ 
-        let path = `/session`; 
-        navigate(path);
-    }
-
-    return(
+    return (
         <Container>
             <Logo src="./img/callhubLogo-cropped.svg" alt="Callhub Logo" />
             <CodeContainer>
                 <Text>Employee Side</Text>
-                <Button onClick={routeChange}>Generate Session</Button>
+                <StartSessionButton>Generate Session</StartSessionButton>
             </CodeContainer>
         </Container>
     );

diff --git a/src/components/StartSessionButton.jsx b/src/components/StartSessionButton.jsx
@@ -1,12 +1,30 @@
-import React, { Component } from 'react';
+import React from 'react';
 import "bootstrap/dist/css/bootstrap.min.css";
 import axios from 'axios';
+import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
 
-class StartSessionButton extends Component {
 
-  handleSubmit = (e) => {
+const Button = styled.button`
+    height: 50px;
+    width: 60%;
+    background-color: #0b9f43;
+    border-radius: 30px 30px 30px 30px;
+    position: relative;
+    color: white;
+    font-family: 'League Spartan', sans-serif;
+    font-size: x-large;
+    border: 0px solid;
+    cursor: pointer;
+    &:hover {
+        background-color: #076a2d;
+    }
+`
+function StartSessionButton() {
+  let navigate = useNavigate();
+  const handleSubmit = (e) => {
     e.preventDefault();
-    
+
     //TODO: replace with hosted address
     axios.get("http://localhost:8080/session/new-session")
       .then(function (response) {
@@ -16,23 +34,16 @@ class StartSessionButton extends Component {
         let sessionId = response.data.sessionId;
         sessionStorage.setItem('sessionId', sessionId);
         console.log(sessionCode);
+        let path = `/session`;
+        navigate(path);
       })
       .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>
-    );
-  }
+  return (
+    <Button onClick={handleSubmit}>Start Session</Button>
+  );
 }
 
 export default StartSessionButton;