added formatting to pages

JessicaLim8 · Oct 31, 2019 · 601a8c3 · 601a8c3
1 parent 793e4a8
commit 601a8c3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 30 deletions.
diff --git a/client/src/pages/Recording.js b/client/src/pages/Recording.js
@@ -46,9 +46,11 @@ export default class Recording extends Component {
   recordAction = () => {
     const isPlaying = this.state.playing;
     if (!isPlaying) {
+      console.log("Recording has started");
       recognition.start();
     } else if (isPlaying) {
       recognition.stop();
+      console.log("Recording has stopped");
     }
     this.setState({ first: false, playing: !isPlaying });
   }
@@ -57,15 +59,15 @@ export default class Recording extends Component {
     return (
       <div className="main" style={{ paddingTop: 100 }}>
         <div>
-          <img src={logo} width="15%" alt="logo" />
-          <h2>
+          <img src={logo} width="25%" alt="logo" />
+          <h2 className="largePadding">
             " {this.state.question} "
-            </h2>
+          </h2>
         </div>
-        <div style={{ padding: 20 }}>
+        <div className="addPadding">
           <img src={this.state.playing === false ? play : pause} alt={this.state.playing ? "recordAction" : "PAUSED"} onClick={this.recordAction} style={{ cursor: "pointer" }} />
         </div>
-        <div style={{ padding: 20 }}>
+        <div className="addPadding">
           {this.state.transcript.length === 0 || this.state.playing === true ?
             <button className="button" onClick={this.recordAction}>
               <h2 style={{ cursor: "pointer" }}> {this.state.playing === true ? "Stop Recording" : "Start Recording"} </h2>
@@ -90,25 +92,28 @@ export default class Recording extends Component {
               </div>
             </div>
           }
-        <div style={{paddingTop: 15}}> {this.state.transcript.length === 0 && this.state.first === false && this.state.playing === false ? "No audio was found" : " "} </div>
+          <div className="errorMessage">
+            {this.state.transcript.length === 0 && this.state.first === false && this.state.playing === false ? "Sorry, no audio was found. Please try again" : "\t"}
+          </div>
         </div>
         <div>
-          <p> Don't like the question? Click <span onClick={this.changeQ} style={{ textDecoration: "underline", cursor: "pointer" }}>here</span> for a new one </p>
+          <p className="slogan">
+            Don't like the question? Click <span onClick={this.changeQ} style={{ textDecoration: "underline", cursor: "pointer" }}>here</span> for a new one
+          </p>
         </div>
       </div>
     );
   }
 }
 
 const questions = [
-  "Tell me about yourself",
-  "What is your strongest quality",
-  "What is your greatest weakness",
-  "Explain a time you overcame a challenge",
-  "Provide an example of a time you worked in a team environment",
-  "What is your proudest accomplishment",
-  "What is a passion of yours",
-  "What life lesson would you give to your former self",
-  "Who is your role model and why",
-  "What qualities do you look for in a company culture?"
+  "What qualities do you look for in a company's culture?",
+  "What life lesson would you give to your former self?",
+  "Describe an scenario in which you worked in a team environment?",
+  "Desrcibe a time in which you overcame a challenge",
+  "Who is your role model and why?",
+  "What is your greatest weakness?",
+  "What is your proudest accomplishment?",
+  "What is your strongest quality?",
+  "What are you most passionate about?",
 ]
diff --git a/client/src/pages/Results.js b/client/src/pages/Results.js
@@ -9,13 +9,13 @@ import { Link } from "react-router-dom";
 export default class Results extends Component {
   constructor(props) {
     super(props);
-    this.state = {percentage: "86"}
+    this.state = { percentage: "--", text: this.props.location.state ? this.props.location.state.data : "hello hello hello like um like um like" }
   }
 
   async componentDidMount() {
     const documents = [{
       id: '1',
-      text: this.props.location.state.data,
+      text: this.state.text,
       language: "en",
     }]
 
@@ -29,13 +29,13 @@ export default class Results extends Component {
       body: JSON.stringify(documents), // body data type must match "Content-Type" header
     })
 
-    const json = await response.json();
-    this.setState({percentage: Math.round(json.sentiment.documents[0].score*100)});
-    console.log(this.state)
+    const result = await response.json();
+    console.log(result);
+    this.setState({percentage: Math.round(result.sentiment.documents[0].score*100)});
   }
 
   render() {
-  console.log(this.props.location.state)
+    console.log(this.state);
     return (
       <Wrapper>
         <div className="main">
@@ -45,15 +45,14 @@ export default class Results extends Component {
                 <h2> Overall Positivity Score </h2>
                 <h2> { this.state.percentage + "%" } </h2>
                 <h2> Overused Filler Words </h2>
-                  {
-                  Object.entries(wordCounter(this.props.location.state.data)).map(([key,value])=>{
+                {
+                  Object.entries(wordCounter(this.state.text)).map(([key,value]) => {
                     if (value > 0) {
-                      return (
-                        <div>{key} : {value.toString()}</div>
-                    );
-                    }
+                      return (<div>{key} : {value.toString()}</div>);
+                    };
+                    return [];
                   })
-                  }
+                 }
             </div>
           </div>
           <div style={{padding: 10, right: 5, bottom: 5}}>

diff --git a/client/src/pages/style.css b/client/src/pages/style.css
@@ -25,6 +25,19 @@
   justify-content: center;
 }
 
+.largePadding{
+  padding=top: 50px;
+}
+
+.addPadding{
+  padding-top: 20px;
+}
+
+.errorMessage {
+  min-height: 20px;
+  padding-top: 20px;
+}
+
 .sideEl {
   padding: 20px;
 }