UI routing (#30)

* frontend routing fix#1 * UI(including coversational latencies) discrepancies removed Signed-off-by: aditya109 <[email protected]>
Akanksha810 · Mar 26, 2020 · 3580a16 · 3580a16
1 parent 29de489
commit 3580a16
Show file tree

Hide file tree

Showing 18 changed files with 221 additions and 189 deletions.
diff --git a/bot-ui/src/App.js b/bot-ui/src/App.js
@@ -1,8 +1,21 @@
 import React from 'react';
 
 import './App.css';
+import {
+  BrowserRouter as Router,
+  Route,
+} from 'react-router-dom';
 
-import HomeContainer from './containers/HomeContainer';
+import ControlIris from "./components/bots/ControlIris";
+import ControlCoral from './components/bots/ControlCoral';
+import ControlAzul from './components/bots/ControlAzul';
+import ControlRoux from './components/bots/ControlRoux';
+
+import InputPortal from './components/InputPortal';
+import ResultPortal from './components/ResultPortal';
+import SpiderViewPortal from './components/SpiderViewPortal';
+
+import EndPage from './components/EndPage';
 
 class App extends React.Component {
   componentDidMount() {
@@ -12,8 +25,22 @@ class App extends React.Component {
  render() {
     return (
       <div className="App">
-        <HomeContainer/>
-        {/* <InputContainer/> */}
+        <Router >
+          <div >
+                <Route exact path='/' component={ControlIris}></Route>
+                <Route exact path='/typeinput' component={ControlCoral}></Route>
+
+                <Route exact path="/takeinput/init" component={() => <ControlAzul/>}/>
+                <Route exact path="/takeinput/re" component={() => <ControlAzul/>}/>
+                <Route exact path="/takeinput/portal" component={InputPortal}/>
+
+                <Route exact path="/results" component={ControlRoux}/>
+                <Route exact path="/results/portal" component={ResultPortal}/>
+                <Route exact path="/results/portal/spiderView" component = {SpiderViewPortal}/>
+
+                <Route exact path="/end" component = {EndPage}/>
+          </div>
+        </Router>
       </div>
     )
  }

diff --git a/bot-ui/src/components/EndPage.js b/bot-ui/src/components/EndPage.js
@@ -1,22 +1,24 @@
 import React, { Component } from 'react'
+import Footer from './Footer';
+import Header from './Header';
 
 class EndPage extends React.Component {
     constructor(props) {
         super(props)
-        this.state = {
-
-        }
+
     }
     render() {
         return (
-            <div>
+            <div className= "home-container">
+                <Header/>
                <div className= "title-text"><h1>We had fun guys, Did you ??</h1> </div>
                <div class="subtitile-text">
 
                         <h6>If you did not, please write your suggestions on [email protected] and [email protected]</h6>
                         <a href="[email protected]"><h6></h6></a>
 
                 </div>
+                <Footer/>
             </div>
         )
     }

diff --git a/bot-ui/src/components/Footer.js b/bot-ui/src/components/Footer.js
@@ -10,7 +10,7 @@ class Footer extends React.Component {
         return (
           <footer className = "main-footer">
             <div className = "footer-text">
-              {this.props.text}
+              ©	This is a joint project by Aditya and Akanksha
             </div>
          </footer>
 

diff --git a/bot-ui/src/components/Header.js b/bot-ui/src/components/Header.js
@@ -1,6 +1,11 @@
 import React from 'react'
 
 class Header extends React.Component {
+    constructor(props) {
+        super()
+        this.state = {
+        }
+    }
     render() {
         return (
             <div className = "page-info">

diff --git a/bot-ui/src/components/Helper.js b/bot-ui/src/components/Helper.js
diff --git a/bot-ui/src/components/InputPortal.js b/bot-ui/src/components/InputPortal.js
@@ -1,9 +1,9 @@
 import React, {useState, useEffect} from 'react';
-import {fun} from './Helper';
-import{ Redirect } from 'react-router-dom';
-import history from './history';
 
-// http://localhost:3000/takeinput/portal
+import{ Redirect, Link } from 'react-router-dom';
+import Footer from './Footer';
+import Header from './Header';
+
 const BASE_URL ="http://localhost:5010/"
 class InputPortal extends React.Component {
     constructor(props) {
@@ -13,12 +13,7 @@ class InputPortal extends React.Component {
             redirect : false,
 
         };
-        this.handleChange = this.handleChange.bind(this)
-    }
-    handleSubmit = (user) => {
-        saveUser(user).then(()=> this.setState(()=> ({
-            redirect:true
-        })))
+
     }
     sendRequest(payload) {
         console.log("Request length " + payload.length)
@@ -34,12 +29,6 @@ class InputPortal extends React.Component {
         console.log(res)
     }
 
-    fun(data) {
-        // console.log(dat
-
-
-    }
-
     onSubmit = (event) => {
         this.renderRedirect()
         // event.preventDefault()
@@ -60,12 +49,14 @@ class InputPortal extends React.Component {
         }
 
         return (
+            <div className= "home-container">
+            <Header/>
             <div class="text-area">
                 <label>
                     <div className="textarea-label">Enter your Text here  &#11167;</div>
                 </label>
-
-                {/* <div className = "textarea-item">
+                {console.log(window.location.pathname)}
+                <div className = "textarea-item">
                     <textarea 
                         className="textarea-cl"
                         rows="16" 
@@ -75,16 +66,19 @@ class InputPortal extends React.Component {
                         onChange={event => this.handleChange(event)}
                         cols="100">
                     </textarea>
-                </div> */}
+                </div>
                 <div>
+                    <Link to="/takeinput/re">
                     <button className = "button" onClick={this.handleSubmit}>
                     {/* <span className="button-text" onClick={(e) => this.onSubmit(e)}>Summarize 'n' Classify&#10148;</span>    */}
                     <span className="button-text" >Summarize 'n' Classify&#10148;</span>
                     </button>
+                    </Link>
                 </div>
                 {this.renderRedirect}
             </div>
-
+            <Footer/>
+            </div>
         );
 
     }

diff --git a/bot-ui/src/components/ResultPortal.js b/bot-ui/src/components/ResultPortal.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import SpiderViewPortal from './SpiderViewPortal';
+import Header from './Header';
+import Footer from './Footer';
+import {Link} from "react-router-dom";
 
 class ResultPortal extends React.Component {
   constructor(props) {
@@ -20,39 +23,50 @@ class ResultPortal extends React.Component {
      Hanesta ota kas potkaus otetaan. Sanot ota tuvan yha kohta satoi jos voi. On viime me enhan se kylla ei. Koskaan hankkii et ei te ai viisiin avaimen juossut. "
 
         return (
-          <div className = "result-portal">
-            <div className = "summarize-div">
-                <div className = "textarea-title">
-                  <span className = "text-title">
-                    PROCESSED SUMMARY 
-                  </span>
-                </div>
-                <div className = "textarea-box">
-                  <textarea 
-                    rows="16" 
-                    cols="120"
-                  >
-                    {placeholder_text}
-                  </textarea>
-                </div>
-                <div className = "button-div">
-                  <div className = "button-left">
-                    <button className = "button-save">Click for Another Processing !</button>
+          <div className= "home-container">
+            <Header/>
+            <div className = "result-portal">
+              <div className = "summarize-div">
+                  <div className = "textarea-title">
+                    <span className = "text-title">
+                      PROCESSED SUMMARY 
+                    </span>
                   </div>
-                  <div className = "button-right">
-                    <button className = "button-save">Save Result to File !</button>
+                  <div className = "textarea-box">
+                    <textarea 
+                      rows="14" 
+                      cols="120"
+                    >
+                      {placeholder_text}
+                    </textarea>
                   </div>
-                </div>
-                <div className = "category-area">
-                  <div className = "category-result">
-                    <div className = "category-title">Category : </div>
-                    <div className = "category">Entertainment</div>
+                  <div className = "button-div">
+                    <Link to="/takeinput/init">
+                    <div className = "button-left">
+                      <button className = "button-save">Click for Another Processing</button>
+                    </div>
+                    </Link>
+                    <div className = "button-right">
+                      <button className = "button-save">Save Result to File</button>
+                    </div>
+                    <Link to="/end">
+                    <div className = "button-left">
+                      <button className = "button-save">Exit</button>
+                    </div>
+                    </Link>
                   </div>
-                    <div className="spider-graph" >
-                      <SpiderViewPortal/>
+                  <div className = "category-area">
+                    <div className = "category-result">
+                      <div className = "category-title">Category : </div>
+                      <div className = "category">Entertainment</div>
                     </div>
-                </div>            
+                      <div className="spider-graph" >
+                        <SpiderViewPortal/>
+                      </div>
+                  </div>            
+              </div>
             </div>
+            <Footer/>
           </div>
 
         )

diff --git a/bot-ui/src/components/SpiderViewPortal.js b/bot-ui/src/components/SpiderViewPortal.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import RadarChart from 'react-svg-radar-chart';
-// import 'react-svg-radar-chart/build/css/index.css';
-
 class SpiderViewPortal extends React.Component {
   render() {
 
@@ -55,7 +53,7 @@ class SpiderViewPortal extends React.Component {
         <RadarChart
             captions={captions}
             data={data}
-            size={500}
+            size={450}
             options = {defaultOptions}
           />