Reaction tabs adjustments

BeyondLabsEY · Jun 27, 2019 · ecf368d · ecf368d
1 parent 6aa7057
commit ecf368d
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.5.1",
+    "axios": "^0.19.0",
     "babel-loader": "^8.0.5",
     "bootstrap": "^4.3.1",
     "css-loader": "^2.1.1",

diff --git a/src/assets/scss/base.scss b/src/assets/scss/base.scss
@@ -1,4 +1,3 @@
-@import "./abstracts/ey-colors";
 @import "./abstracts/variables";
 
 html {
@@ -18,14 +17,4 @@ small {
   strong {
     font-weight: $regular-font;
   }
-}
-
-hr {
-  border: 1px $ey-yellow solid;
-  margin: -1px 0;
-}
-
-*:focus {
-  outline: $ey-yellow-50 auto 4px !important;
-  outline-offset: 2px;
 }
diff --git a/src/components/Reaction/Reaction.jsx b/src/components/Reaction/Reaction.jsx
@@ -8,6 +8,8 @@ import Icon from "../Icon/Icon.jsx";
 class Reaction extends Component {
   constructor(props) {
     super(props);
+
+    console.log(props.match.params.meetingCode);
 
     this.leaveMeeting = this.leaveMeeting.bind(this);
   }
@@ -16,13 +18,21 @@ class Reaction extends Component {
     this.props.history.push("/");
   }
 
+  componentDidMount() {
+    if (! this.props.match.params.meetingCode) {
+      this.leaveMeeting();
+    }
+  }
+
   render() {
+    const { meetingCode } = this.props.match.params;
+
     return (
       <PageWrapper>
         <Container>
           <Row>
             <Col>
-              <p className="my-0 text-center">The code for this meeting is <strong>6IVACO</strong></p>
+              <p className="my-0 text-center">The code for this meeting is <strong>{meetingCode}</strong></p>
             </Col>
           </Row>
           <Row className="justify-content-center">
@@ -37,7 +47,7 @@ class Reaction extends Component {
           </Row>
           <Row>
             <Col>
-              <ReactionTabs />
+              <ReactionTabs code={meetingCode} />
             </Col>
           </Row>
         </Container>

diff --git a/src/components/ReactionTabs/ReactionTabs.jsx b/src/components/ReactionTabs/ReactionTabs.jsx
@@ -1,29 +1,77 @@
 import React, { Component, Fragment } from "react";
-import { Nav } from "react-bootstrap";
+import { Nav, Tabs, Tab } from "react-bootstrap";
+import Axios from "axios";
 
 import "./ReactionTabs.scss";
 
 import Icon from "../Icon/Icon.jsx";
 
 class ReactionTabs extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      switch: true,
+      words: null
+    };
+    this.changeTab = this.changeTab.bind(this);
+  }
+
+  changeTab() {
+    this.setState({
+      switch: ! this.state.switch
+    });
+  }
+
+  fetchWordCloudData() {
+    Axios.get(`https://meeting-reaction.azurewebsites.net/api/getWordCloud?code=${this.props.code}`).catch(() => {
+      console.warn("Unable to fetch meeting data. Please check your connection and try again.");
+    }).then(response => {
+      const { status, words } = response.data;
+      console.log(response.data);
+      if (status) {
+        this.setState({
+          words
+        });
+      }
+    });
+  }
+
+  fetchData() {
+    this.fetchWordCloudData();
+  }
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
   render() {
     return (
       <Fragment>
-        <Nav as="ul" variant="pills" justify bsPrefix="tabs" onSelect={this.changeTab}>
-          <Nav.Item bsPrefix="tab">
-            <Nav.Link as="button" role="tab" active={true} bsPrefix="tab-button" id="btnWordCloudTab">
-              <Icon name="word-cloud" size="24" />
-              <span className="tab-title">Word cloud</span>
-            </Nav.Link>
-          </Nav.Item>
-          <Nav.Item bsPrefix="tab">
-            <Nav.Link as="button" role="tab" active={false} bsPrefix="tab-button" id="btnLiveReactionTab">
-              <Icon name="reaction" size="24" />
-              <span className="tab-title">Live reaction</span>
-            </Nav.Link>
-          </Nav.Item>
-        </Nav>
-        <hr />
+        <Tab.Container defaultActiveKey="word-cloud" id="reactionTabs">
+          <Nav as="ul" variant="pills" justify bsPrefix="tabs">
+            <Nav.Item bsPrefix="tab">
+              <Nav.Link as="button" eventKey="word-cloud" role="tab" bsPrefix="tab-button" id="btnWordCloudTab">
+                <Icon name="word-cloud" size="24" />
+                <span className="tab-title">Word cloud</span>
+              </Nav.Link>
+            </Nav.Item>
+            <Nav.Item bsPrefix="tab">
+              <Nav.Link as="button" eventKey="live-reaction" role="tab" bsPrefix="tab-button" id="btnLiveReactionTab">
+                <Icon name="reaction" size="24" />
+                <span className="tab-title">Live reaction</span>
+              </Nav.Link>
+            </Nav.Item>
+          </Nav>
+          <Tab.Content>
+            <Tab.Pane eventKey="word-cloud">
+              <p>word cloud tab</p>
+            </Tab.Pane>
+            <Tab.Pane eventKey="live-reaction">
+              <p>live reaction</p>
+            </Tab.Pane>
+          </Tab.Content>
+        </Tab.Container>
       </Fragment>
     );
   }

diff --git a/src/components/ReactionTabs/ReactionTabs.scss b/src/components/ReactionTabs/ReactionTabs.scss
@@ -9,30 +9,35 @@
   list-style: none;
 }
 
-.tabs-justified .tab {
-  flex-grow: 1;
-  flex-basis: 0;
-  text-align: center;
+.tabs-justified {
+  .tab {
+    flex-grow: 1;
+    flex-basis: 0;
+    text-align: center;
+  }
 }
+
 .tab-button {
   display: block;
   width: 100%;
   border: 1px solid transparent;
-  border-top-left-radius: $default-border-radius;
-  border-top-right-radius: $default-border-radius;
+  border-radius: $default-border-radius;
   background-color: transparent;
   padding: .75rem;
   line-height: 1.5;
   color: transparentize($white, 0.7);
   font-size: .875em;
   text-transform: uppercase;
   transition: background-color $default-transition, color $default-transition;
+  &:focus {
+    outline: none;
+  }
   &:hover {
     color: transparentize($white, 0.4);
   }
   &.active {
-    background-color: transparentize($ey-yellow, 0.9);
-    color: lighten($ey-yellow, 10%);
+    background-color: transparentize($ey-yellow, 0.8);
+    color: lighten($ey-yellow, 20%);
     pointer-events: none;
   }
 }
@@ -49,13 +54,5 @@
 }
 
 .tab-content {
-  width: 550px;
-  height: 400px;
-  .content-loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
+
 }