Merge branch 'version-2-refactoring' into master

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local

README.md

@@ -1,70 +1,76 @@
-# Getting Started with Create React App
+# Home Board React App
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This is a personal project I created to help me get comfortable with Javascript, React and API calls.
 
-## Available Scripts
+## Functionalities
 
-In the project directory, you can run:
+- Show date and time
+- Show todo list made on Microsoft Todo
+- Show currently playing song in Spotify
+- Show weather
+- Show a random quote
+- Show a random background image
+- Tell a joke
+- Search the definition of something on Wikipedia
+- Voice assistant with more functionality
 
-### `npm start`
+## Pre-Requisites
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+- Node.js
+- Spotify Pro account
+- Microsoft account
+- OpenWeatherMap account
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+## Installing the project
 
-### `npm test`
+To download this project, cloan this Git repository and install the node dependencies by running:
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+    $ npm install
 
-### `npm run build`
+This project also depends on a Spotify server which you can download from [this repository](https://github.com/Femi236/pi-app-spotify-server)
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+## Setting up the application
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+Before being able to run the application, you will have to create a .env file in the root folder and define 2 variables:
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+    $ REACT_APP_WEATHER_API_KEY=""
+    $ REACT_APP_MICROSOFT_CLIENT_KEY=""
 
-### `npm run eject`
+The quotation marks can be replaced with the API keys you receive once creating accounts for [OpenWeatherMap Api](https://openweathermap.org/) and [Microsoft AzureAD](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app)
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+## Running the application
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+The [Spotify server](https://github.com/Femi236/pi-app-spotify-server) that you installed earlier has to be run first by following the instructions on that repository.
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+The application can then be run by typing the following in the terminal:
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+    $ npm start
 
-## Learn More
+This will open a new browser window in [localhost:3000](http://localhost:3000).
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+## Running the application as a desktop application
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+It is also possible to run the application as a desktop application by typing typing the following in the terminal:
 
-### Code Splitting
+    $ npm run-script electron-dev
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+## Resources used
 
-### Analyzing the Bundle Size
+There were numerous resources that had to be used in order to create this pplication but these are the ones that had the largest impact on the progress.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+- [Programming with Mosh ReactJs tutorial](https://youtu.be/Ke90Tje7VS0)
+- [Bootstrap Tutorial](https://youtu.be/9cKsq14Kfsw)
+- [ReactJs API tutorial](https://youtu.be/GuA0_Z1llYU)
+- [Electron Application Tutorial](https://youtu.be/VCl8li22mrA)
+- [React App to Electron Desktop App](https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3)
+- [Voice Assistant Tutorial in Python](https://youtu.be/AWvsXxDtEkU)
 
-### Making a Progressive Web App
+## API's Used
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+- [OpenWeatherMap](https://openweathermap.org/)
+- [AzureAD](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app)
+- [QuotesAPI](https://type.fit/api/quotes)
+- [Spotify](https://github.com/Femi236/pi-app-spotify-server)
+- [JokesAPI](https://sv443.net/jokeapi/v2/)
+- [Wikipedia](https://www.mediawiki.org/wiki/API:Main_page)
+- [Lorem Picsum](https://picsum.photos/)

src/App.js

@@ -7,14 +7,19 @@ import Weather from "./components/weather";
 import Spotify from "./components/spotify";
 import ImageSlideshow from "./components/imagelideshow";
 import Quote from "./components/quotes";
-import VoiceAssistant from "./components/VoiceAssistant";
+import VoiceAssistant from "./components/voiceAssistant";
 import Todo from "./components/todo";
 
+var myTimeout;
+let synth = window.speechSynthesis;
+
 class App extends Component {
   constructor() {
     super();
     this.state = {
-      render: false, //Set render state to false
+      render: true,
+      speaking: false,
+      loading: false, //Set render state to false
     };
 
     // Create references to different components that we need to access their methods
@@ -45,7 +50,41 @@ class App extends Component {
    */
   sayTasks = () => {
     // Call say tasks method in the Todo component
-    this.todoRef.current.getAllTasks();
+    this.todoRef.current.sayTasks();
+  };
+
+  //////////////////////////////////////////////////////SPEAKING//////////////////////////////////////////////////////////
+
+  /**
+   * Quickly stop and restart the speech synthesis because ti times out after around 10 seconds
+   */
+
+  myTimer = () => {
+    window.speechSynthesis.pause();
+    window.speechSynthesis.resume();
+    myTimeout = setTimeout(this.myTimer, 10000);
+  };
+
+  /**
+   * Make the speech synthesis say text while animating the speech gif
+   * @param text the text to say
+   */
+  speak = (text) => {
+    this.setState({ loading: true });
+    let utter = new SpeechSynthesisUtterance();
+    // Using the timeout function so it doesn't suddenly stop
+    myTimeout = setTimeout(this.myTimer, 10000);
+    utter.voice = synth.getVoices()[3];
+    utter.text = text;
+    utter.onstart = () => {
+      this.setState({ loading: false });
+      this.setState({ speaking: true });
+    };
+    utter.onend = () => {
+      clearTimeout(myTimeout);
+      this.setState({ speaking: false });
+    };
+    synth.speak(utter);
   };
 
   render() {
@@ -59,34 +98,54 @@ class App extends Component {
     return (
       <React.Fragment>
         <div className="row container-fluid pt-3">
-          <div className="col-3 h1 align-left">
-            <Clock type={1} />
+          <div className="col-4 h2 align-left text-left pl-5">
+            <Clock type={2} />
+            <div className="largerh1">
+              <Clock type={1} />
+            </div>
+
             <ImageSlideshow />
           </div>
 
-          <div className="col-6"></div>
-          <div className="col-3 h1 text-left">
-            <Clock type={2} />
-            <Clock type={3} />
+          <div className="col-5"></div>
+          <div className="col-3 h2 text-right pr-5">
+            <div className="largerh1">
+              <Weather type={1} ref={this.weatherRef} speak={this.speak} />
+            </div>
+            <Weather type={2} />
           </div>
 
           <div className="w-100 d-none d-md-block">
-            <Spotify />
+            <div className="uplift">
+              <Spotify />
+            </div>
           </div>
           <div className="w-100 d-none d-md-block"></div>
           <div className="w-100 d-none d-md-block"></div>
           <div className="w-100 d-none d-md-block"></div>
-          <div className="col-3 align-left">
-            <Weather ref={this.weatherRef} />
+          <div className="w-100 d-none d-md-block"></div>
+          <div className="w-100 d-none d-md-block"></div>
+          <div className="w-100 d-none d-md-block">
+            <br></br>
+            <br></br>
+            <br></br>
+            <br></br>
+            <br></br>
+            <br></br>
           </div>
-          <div className="col-3">
+          <div className="col-3 align-left pl-5">
+            <Todo ref={this.todoRef} speak={this.speak} />
+          </div>
+          <div className="col-3"></div>
+          <div className="col-2"></div>
+          <div className="col-4">
             <VoiceAssistant
+              speak={this.speak}
               sayWeather={this.sayWeather}
               sayTasks={this.sayTasks}
+              loading={this.state.loading}
+              speaking={this.state.speaking}
             />
-            <Todo ref={this.todoRef} />
-          </div>
-          <div className="col-6">
             <Quote />
           </div>
         </div>

src/authProvider.js

@@ -5,7 +5,7 @@ import { MsalAuthProvider, LoginType } from "react-aad-msal";
 const config = {
   auth: {
     authority: "https://login.microsoftonline.com/common",
-    clientId: clientId,
+    clientId: process.env.REACT_APP_MICROSOFT_CLIENT_KEY,
     redirectUri: "http://localhost:3000",
   },
   cache: {