Begun changing the layout of the board

- moved all clocks to top left
- Moved weather to top right with a "feels like" section as well
- Moved the voice assistant controls and the motivational phrase to the bottom right

Issue: #2

src/App.js

@@ -14,7 +14,7 @@ class App extends Component {
   constructor() {
     super();
     this.state = {
-      render: false, //Set render state to false
+      render: true, //Set render state to false
     };
 
     // Create references to different components that we need to access their methods
@@ -59,34 +59,41 @@ 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} />
+            </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>
+          <div className="col-3 align-left"></div>
           <div className="col-3">
+            <Todo ref={this.todoRef} />
+          </div>
+          <div className="col-2"></div>
+          <div className="col-4">
             <VoiceAssistant
               sayWeather={this.sayWeather}
               sayTasks={this.sayTasks}
             />
-            <Todo ref={this.todoRef} />
-          </div>
-          <div className="col-6">
             <Quote />
           </div>
         </div>

src/components/VoiceAssistant.jsx

@@ -196,13 +196,13 @@ const VoiceAssistant = (props) => {
         onClick={() => (listening ? stopListening() : startListening())}
         src={process.env.PUBLIC_URL + img}
         alt=""
-        style={{ height: 80 }}
+        style={{ height: 40 }}
       ></img>
-      <button onClick={() => wikiSearch("michael jordan")}>search</button>
-      <button onClick={() => thisWikiSearch("Michael Jordan")}>speak</button>
-      <button onClick={() => thisTellJoke()}>Joke</button>
-      <p>{transcript}</p>
-      <img src={getSpeakImage()} alt=""></img>
+      {/* <button onClick={() => wikiSearch("michael jordan")}>search</button>
+      <button onClick={() => thisWikiSearch("Michael Jordan")}>speak</button> */}
+      {/* <button onClick={() => thisTellJoke()}>Joke</button> */}
+      {/* <p>{transcript}</p> */}
+      <img src={getSpeakImage()} alt="" style={{ height: 140 }}></img>
     </div>
   );
 };

src/components/clock.jsx

@@ -39,14 +39,24 @@ class Clock extends Component {
   returnedTime = (props) => {
     // Return different parts of the time depending on the type of component called
     if (this.props.type === 1) {
-      return this.state.date.toLocaleTimeString();
+      return (
+        <React.Fragment>
+          {this.state.date.getHours().toLocaleString() +
+            ":" +
+            (this.state.date.getMinutes() < 10
+              ? "0" + this.state.date.getMinutes().toLocaleString()
+              : this.state.date.getMinutes().toLocaleString())}{" "}
+          <sup>{this.state.date.getSeconds()}</sup>
+        </React.Fragment>
+      );
     } else if (this.props.type === 2) {
-      return this.state.weekday[this.state.date.getDay()];
-    } else if (this.props.type === 3) {
       return (
-        this.state.month[this.state.date.getMonth()] +
-        " " +
-        this.state.date.getDate()
+        <React.Fragment>
+          {this.state.weekday[this.state.date.getDay()] + " "}
+          {this.state.month[this.state.date.getMonth()] +
+            " " +
+            this.state.date.getDate()}
+        </React.Fragment>
       );
     }
   };

src/components/spotify.jsx

@@ -38,7 +38,7 @@ class Spotify extends Component {
 
   componentDidMount() {
     // Call from the API every half second
-    this.spotifyID = setInterval(() => this.getNowPlaying(), 500);
+    this.spotifyID = setInterval(() => this.getNowPlaying(), 2000);
   }
 
   /**

src/components/todo.jsx

@@ -5,7 +5,7 @@ import { authProvider } from "../authProvider";
 
 // The ID of my pi-app list in todo
 const taskListID =
-  "AQMkADAwATMwMAItMjIAM2ItOGJkYi0wMAItMDAKAC4AAAPsE0bgVciJS53tz5qGuCfJAQD4bxjVsPprRZ7XeMcIESaWAAFORSDGAAAA/";
+  "AQMkADAwATMwMAItMjIAM2ItOGJkYi0wMAItMDAKAC4AAAPsE0bgVciJS53tz5qGuCfJAQD4bxjVsPprRZ7XeMcIESaWAAFORSDGAAAA";
 const baseURL = "https://graph.microsoft.com/v1.0/me/todo/lists/";
 
 class App extends Component {
@@ -20,16 +20,21 @@ class App extends Component {
   getAllTasks = async () => {
     const token = await authProvider.getAccessToken();
     axios
-      .get(baseURL + taskListID + "tasks/", {
+      .get(baseURL + taskListID + "/tasks", {
         headers: {
           Authorization: "Bearer " + token.accessToken,
         },
       })
       .then((res) => {
+        console.log(res);
         let tasks = res.data.value;
-        this.setState({ tasks });
-        console.log(tasks);
-        this.sayTasks();
+        // let filteredTasks = tasks.filter((x) => x.status !== "completed");
+        this.setState({ tasks: tasks });
+
+        // this.sayTasks();
+        for (let i = 0; i < this.state.tasks.length; i++) {
+          console.log(this.state.tasks[i].title);
+        }
       });
   };
 

src/components/weather.jsx

@@ -8,7 +8,7 @@ const apiKey = process.env.REACT_APP_WEATHER_API_KEY;
 class Weather extends Component {
   constructor() {
     super();
-    this.state = { temp: 0.0, icon: "04d" };
+    this.state = { temp: 0.0, icon: "04d", feels_like: 0.0 };
   }
 
   componentDidMount() {
@@ -28,6 +28,7 @@ class Weather extends Component {
     this.setState({
       temp: Math.round((response.main.temp - 273.15) * 10) / 10,
       icon: response.weather[0].icon,
+      feels_like: Math.round((response.main.feels_like - 273.15) * 10) / 10,
     });
   };
 
@@ -44,17 +45,22 @@ class Weather extends Component {
   };
 
   render() {
-    return (
-      <React.Fragment>
-        <div className="h1">
-          {this.state.temp}°C
+    if (this.props.type == 1) {
+      return (
+        <React.Fragment>
           <img
             src={`http://openweathermap.org/img/wn/${this.state.icon}@2x.png`}
             alt=""
           ></img>
-        </div>
-      </React.Fragment>
-    );
+          {this.state.temp}°C
+        </React.Fragment>
+      );
+    }
+    if (this.props.type == 2) {
+      return (
+        <React.Fragment>Feels Like {this.state.feels_like}°C</React.Fragment>
+      );
+    }
   }
 }
 

src/cover.css

@@ -89,3 +89,14 @@ body {
   position: absolute;
   z-index: -1;
 }
+
+.largerh1 {
+  font-size: 60px;
+}
+
+.uplift {
+  position: absolute;
+  left: 40%;
+  top: 15%;
+  z-index: 1;
+}