Code cleanup

Femi236 · Feb 11, 2021 · 8cba614 · 8cba614
1 parent 8a21a00
commit 8cba614
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 71 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-//import "./App.css";
 import "./cover.css";
 import LoadPage from "./components/loadPage";
 import Clock from "./components/clock";
@@ -8,7 +7,7 @@ import Weather from "./components/weather";
 import Spotify from "./components/spotify";
 import ImageSlideshow from "./components/imagelideshow";
 import Quote from "./components/quotes";
-import TextToSpeech from "./components/textToSpeech";
+import VoiceAssistant from "./components/VoiceAssistant";
 import Todo from "./components/todo";
 
 class App extends Component {
@@ -17,6 +16,8 @@ class App extends Component {
     this.state = {
       render: false, //Set render state to false
     };
+
+    // Create references to different components that we need to access their methods
     this.weatherRef = React.createRef();
     this.todoRef = React.createRef();
   }
@@ -31,11 +32,19 @@ class App extends Component {
     );
   }
 
+  /**
+   * Make voice assistant say the weather
+   */
   sayWeather = () => {
+    // Call say weather method in the Weather component
     this.weatherRef.current.sayWeather();
   };
 
+  /**
+   * Make voice assistant say the tasks
+   */
   sayTasks = () => {
+    // Call say tasks method in the Todo component
     this.todoRef.current.getAllTasks();
   };
 
@@ -71,7 +80,7 @@ class App extends Component {
             <Weather ref={this.weatherRef} />
           </div>
           <div className="col-3">
-            <TextToSpeech
+            <VoiceAssistant
               sayWeather={this.sayWeather}
               sayTasks={this.sayTasks}
             />

diff --git a/src/authProvider.js b/src/authProvider.js
@@ -5,7 +5,7 @@ import { MsalAuthProvider, LoginType } from "react-aad-msal";
 const config = {
   auth: {
     authority: "https://login.microsoftonline.com/common",
-    clientId: client - ID,
+    clientId: clientId,
     redirectUri: "http://localhost:3000",
   },
   cache: {

diff --git a/src/components/textToSpeech.jsx → src/components/VoiceAssistant.jsx b/src/components/textToSpeech.jsx → src/components/VoiceAssistant.jsx
@@ -5,17 +5,13 @@ import SpeechRecognition, {
 
 import axios from "axios";
 
+// JokeAPI consts
 const jokeBaseURL = "https://v2.jokeapi.dev";
 const jokeCategories = ["Programming", "Misc", "Pun", "Spooky", "Christmas"];
 const jokeParams = ["blacklistFlags=nsfw,religious,racist", "amount=1"];
 
-// import SpeechRecognition2, {
-//   useSpeechRecognition2,
-// } from "react-speech-recognition";
-
-const Dictaphone = (props) => {
+const VoiceAssistant = (props) => {
   let synth = window.speechSynthesis;
-  // const [message, setMessage] = useState("");
   const [listening, setListening] = useState(false);
   const [img, setImg] = useState("/images/mute.svg");
   const [speaking, setSpeaking] = useState(false);
@@ -26,7 +22,6 @@ const Dictaphone = (props) => {
       callback: (command) => {
         console.log("Command:");
         console.log(command);
-        // setMessage(`Hi there! You said: "${command}"`);
         if (command === undefined) {
           speak("What can I help you with?");
         } else if (command === "shut up") {
@@ -44,8 +39,6 @@ const Dictaphone = (props) => {
         } else if (command.includes("who is")) {
           let search = command.replace("who is", "");
           wikiSearch(search);
-          // console.log(response);
-          // speak(response);
         } else if (
           command.includes("why is") &&
           command.includes("so annoying")
@@ -64,17 +57,12 @@ const Dictaphone = (props) => {
         resetTranscript();
       },
       matchInterim: false,
-      // isFuzzyMatch: true,
-      // fuzzyMatchinThreshold: 0.8,
     },
     {
       command: "Hey Google",
       callback: () => {
-        // SpeechRecognition.startListening();
         speak("What can I help you with?");
         setCommands(commands2);
-        // useSpeechRecognition({ commands });
-        // SpeechRecognition2.startListening();
       },
     },
   ];
@@ -85,22 +73,15 @@ const Dictaphone = (props) => {
     {
       command: "How are you",
       callback: (command) => {
-        // SpeechRecognition2.stopListening();
         console.log(command);
         speak("I'm all good");
         setCommands(commands1);
-        // SpeechRecognition.startListening();
       },
       matchInterim: false,
     },
   ];
 
-  // let commands = commands1;
-  // setCommands(commands1);
-
   const { transcript, resetTranscript } = useSpeechRecognition({ commands });
-  // const { transcript2, resetTranscript2 } = useSpeechRecognition({ commands2 });
-  // useSpeechRecognition(secondaryCommands).transcript
 
   if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
     return null;
@@ -126,7 +107,6 @@ const Dictaphone = (props) => {
       setSpeaking(false);
     };
     synth.speak(utter);
-    // setSpeaking(false);
   };
 
   const startListening = () => {
@@ -149,7 +129,6 @@ const Dictaphone = (props) => {
         )}`
       )
       .then((res) => {
-        // console.log(res.data);
         const response = res.data;
         if (response.type === "twopart") {
           const setup = response.setup;
@@ -224,16 +203,8 @@ const Dictaphone = (props) => {
       <button onClick={() => speak("(NBA)")}>speak</button>
       <button onClick={() => tellJoke()}>Joke</button>
       <p>{transcript}</p>
-      <img
-        // src={() =>
-        //   speaking
-        //     ? process.env.PUBLIC_URL + "/images/voice.gif"
-        //     : process.env.PUBLIC_URL + "/images/no-voice.png"
-        // }
-        src={getSpeakImage()}
-      ></img>
-      {/* <p>{finalTranscript}</p> */}
+      <img src={getSpeakImage()}></img>
     </div>
   );
 };
-export default Dictaphone;
+export default VoiceAssistant;
diff --git a/src/components/spotify.jsx b/src/components/spotify.jsx
@@ -25,7 +25,6 @@ class Spotify extends Component {
       spotifyApi.setAccessToken(token);
     }
     this.state = {
-      // redirect: null,
       loggedIn: token ? true : false,
       nowPlaying: {
         name: "Checking...",
@@ -101,17 +100,10 @@ class Spotify extends Component {
   };
 
   simulateClick = (e) => {
-    // this.setState({ redirect: "http://localhost:3000/" });
     e.click();
   };
 
   render() {
-    // if (this.state.redirect) {
-    //   {
-    //     this.setState({ redirect: null });
-    //   }
-    //   return <Redirect to={this.state.redirect} />;
-    // }
     return (
       <React.Fragment>
         {!this.state.loggedIn && (

diff --git a/src/components/todo.jsx b/src/components/todo.jsx
@@ -4,6 +4,7 @@ import axios from "axios";
 import { AzureAD } from "react-aad-msal";
 import { authProvider } from "../authProvider";
 
+// The ID of my pi-app list in todo
 const taskListID =
   "AQMkADAwATMwMAItMjIAM2ItOGJkYi0wMAItMDAKAC4AAAPsE0bgVciJS53tz5qGuCfJAQD4bxjVsPprRZ7XeMcIESaWAAFORSDGAAAA/";
 const baseURL = "https://graph.microsoft.com/v1.0/me/todo/lists/";
@@ -14,35 +15,32 @@ class App extends Component {
     this.state = { tasks: [] };
   }
 
+  /**
+   * Get tasks from graph API
+   */
   getAllTasks = async () => {
     const token = await authProvider.getAccessToken();
-    // console.log(token.accessToken);
-
     axios
       .get(baseURL + taskListID + "tasks/", {
         headers: {
           Authorization: "Bearer " + token.accessToken,
-          // "Content-Type": "application/json",
         },
       })
       .then((res) => {
         let tasks = res.data.value;
-        console.log(typeof tasks);
-        // console.log(tasks);
         this.setState({ tasks });
-        console.log(this.state.tasks[0]);
-        for (let i = 0; i < this.state.tasks.length; i++) {
-          console.log(this.state.tasks[i].title);
-        }
         this.sayTasks();
       });
   };
 
+  /**
+   * Make Voice Assistant read out tasks
+   */
   sayTasks = () => {
     const synth = window.speechSynthesis;
     const utter = new SpeechSynthesisUtterance();
     utter.voice = synth.getVoices()[3];
-    utter.text = `Your tasks for today are`; // ${this.state.temp} degrees`;
+    utter.text = `Your tasks for today are`;
     let i = 0;
     for (i = 0; i < this.state.tasks.length - 1; i++) {
       utter.text += this.state.tasks[i].title + ", ";
@@ -54,9 +52,7 @@ class App extends Component {
   render() {
     return (
       <React.Fragment>
-        {/* <h1>Hi</h1>
-        {/* <span>{this.state.tasks}</span> */}
-        <button onClick={this.getAllTasks}>Click me</button>
+        <button onClick={this.getAllTasks}>Get Tasks</button>
       </React.Fragment>
     );
   }

diff --git a/src/components/weather.jsx b/src/components/weather.jsx
@@ -3,7 +3,7 @@ import React, { Component } from "react";
 import "weather-icons/css/weather-icons.css";
 
 // Open-Weather api key
-const apiKey = api - key;
+const apiKey = weather - api;
 
 class Weather extends Component {
   constructor() {

diff --git a/src/index.js b/src/index.js
@@ -5,30 +5,19 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import "bootstrap/dist/css/bootstrap.css";
 import "weather-icons/css/weather-icons.css";
-import TextToSpeech from "./components/textToSpeech";
-import Todo from "./components/todo";
 import { AzureAD, AuthenticationState } from "react-aad-msal";
 import { authProvider } from "./authProvider";
 
 ReactDOM.render(
   <React.StrictMode>
-    {/* <App />
-    <TextToSpeech /> */}
+    {/* Only display information if logged in  */}
     <AzureAD provider={authProvider} forceLogin={true}>
-      {/* <span>
-        <h1>You Are Authenticated</h1>
-      </span> */}
       {({ login, logout, authenticationState, error, accountInfo }) => {
         switch (authenticationState) {
           case AuthenticationState.Authenticated:
             return (
               <React.Fragment>
                 <App />
-                {/* <Todo /> */}
-                {/* <p>
-                  <span>Welcome, {accountInfo.account.name}!</span>
-                  <button onClick={logout}>Logout</button>
-                </p> */}
               </React.Fragment>
             );
           case AuthenticationState.Unauthenticated: