Improvements

src/components/Background.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Fetch from 'unfetch';
+
+const getCookie = (cookiename) =>  {
+    const cookiestring = RegExp('' + cookiename + '[^;]+').exec(document.cookie);
+    return unescape(!!cookiestring ? cookiestring.toString().replace(/^[^=]+./,'') : '');
+};
+  
+const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
+  
+export default class Background extends React.Component {
+  // Set background: Attempt to get one from the API first, and if that fails then use the offline ones.
+  async getAndSetBackground() {
+    const root = document.getElementById('root');
+    
+    try {
+      let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
+      data     = await data.json(); 
+
+      const checkRepeat = getCookie('backgroundimageurl');
+      document.getElementById('photographer').innerText = `Photo by ${data.photographer}`;
+      document.getElementById('location').innerText     = `${data.location}`;
+
+      if (checkRepeat !== root.style.backgroundImage) root.style.backgroundImage = `url(${data.file})`;
+      else {
+        /*let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
+        data = await data.json();*/ 
+        document.cookie            = 'backgroundimageurl; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+        root.style.backgroundImage = `url(${data.file})`;
+        document.cookie            = `backgroundimageurl=${data.file}`;
+      }
+    } catch (e) {
+      document.getElementById('backgroundCredits').style.display = 'none';
+      document.getElementById('photographer').innerText          = 'Photo from Pexels';
+      root.style.backgroundImage = `url(../offline-images/${randomInt(1, 25)}.jpeg)`;
+    }
+  }
+
+  componentDidMount() {
+    this.getAndSetBackground();
+  }
+
+  render() {
+    return null;
+  }
+}

src/components/Clock.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+export default class Clock extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      date: ``,
+      ampm: ``,
+    };
+  }
+
+  startTime() {
+    const today = new Date(); // Get the current date 
+    let h = today.getHours(); // Get hours
+    const ampm = h >= 12 ? 'PM' : 'AM'; // Set AM/PM
+    const m = today.getMinutes(); // Get minutes
+    // const s = today.getSeconds();
+
+    if (h > 12) h = h - 12;
+
+    this.setState({ date: `${('0' + h).slice(-2)}:${('0' + m).slice(-2)}`, ampm: ampm });
+
+    this.timeout = setTimeout(() => this.startTime(), 500);
+  }
+
+  componentDidMount() {
+    this.startTime();
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  render() {
+    return <h1 className='App-clock'>
+      {this.state.date}
+      <span className='App-ampm-specifier'>
+        {this.state.ampm}  
+      </span>
+    </h1>;
+  }
+}

src/components/Credit.jsx

@@ -0,0 +1,17 @@
+/* eslint-disable */
+import RoomIcon from '@material-ui/icons/Room';
+import React from 'react';
+
+export default class Search extends React.Component {
+  render() {
+    return (
+      <div className='credits'>
+          {/* <h1 id='location'></h1> */}
+          <h1 id='photographer'></h1>
+          <div id='backgroundCredits' className='tooltip'><RoomIcon className='locationicon'/>
+            <span className='tooltiptext' id='location'></span>
+          </div>
+     </div>
+    );
+  }
+}

src/components/Greeting.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export default class Greeting extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        greeting: ``
+    };
+ }
+
+  getGreeting() {
+    const h = new Date().getHours();
+    let t = 'Good evening'; // Set the default time string to "Good evening"	
+    if (h < 12) t = 'Good morning'; // If it's before 12am, set the time string to "Good morning"
+    else if (h < 18) t = 'Good afternoon'; // If it's before 6pm, set the time string to "Good afternoon"
+    this.setState({ greeting: t }); // Set the state to the time string
+  }
+
+  componentDidMount() {
+    this.getGreeting();
+  }
+  
+  render() {
+    return <h1 className='App-greeting'>{this.state.greeting}</h1>;
+  }
+}

src/components/Quote.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Fetch from 'unfetch';
+import quotes from '../quotes.json';
+
+export default class Quote extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        quote: ``,
+        author: ``
+    };
+  }
+
+  async getQuote() {
+    try {
+      let data = await Fetch('https://api.muetab.xyz/getQuote');
+      data = await data.json();
+      this.setState({ quote: data.quote, author: data.author });
+    } catch (e) {
+      const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
+      const num = randomInt(1, 20);
+      this.setState({ quote: quotes[num].quote, author: quotes[num].author });
+    }
+  }
+
+  componentDidMount() {
+    this.getQuote();
+  }
+
+  render() {
+    return [
+    <h1 className='App-quote'>{`"${this.state.quote}"`}</h1>,
+    // <i class="material-icons">perm_identity</i>,
+    <h1 className='App-quote-author'>{`${this.state.author}`}</h1>,
+    ];
+  }
+}

src/components/Search.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default class Search extends React.Component {
+  render() {
+    return (
+    <div id='searchBar' className='search-bar'>
+    <form id='searchBar' className='searchbarform' action='https://duckduckgo.com/' onSubmit={('search();')}>
+        <input type='text' placeholder='Search' name='q' id='searchText' className='searchText' />
+        <div className='blursearcbBG' />
+      </form>
+      </div>
+    );
+  }
+}