Merge branch 'development' of github.com:chingu-voyage5/Geckos-Team-0…

… into feature-Link-modal-#78-kiran
chingu-voyage5 · Jul 27, 2018 · 10c3b13 · 10c3b13
2 parents ade1bbe + b73c470
commit 10c3b13
Show file tree

Hide file tree

Showing 17 changed files with 311 additions and 130 deletions.
diff --git a/public/Background.js b/public/Background.js
@@ -0,0 +1,44 @@
+function changeBackground() {
+    // Array of backgrounds
+    let backgrounds = [
+        { name: 'White Sand Beach', author: 'Monica Silvestre', location: './img/white_beach_monica_silvestre.jpeg' },
+        { name: 'Toronto', author: 'Next Voyage', location: './img/toronto_by_next_voyage.jpeg' },
+        { name: 'Snow Covered Mountains by Lake', author: 'Ricardo Bresciani', location: './img/snow_mountains_by_ricardo_bresciani.jpeg' },
+        { name: 'Boats', author: 'Callebe Miranda', location: './img/boats_by_callebe_miranda.jpeg' }
+    ];
+
+    // Get current date
+    let date = new Date();
+    let month, dayOfMonth, background;
+
+    // Check if there is a date already in localStorage
+    if (localStorage.getItem('backgroundMonth')) {
+        // Grab the month and day from localStorage
+        month = localStorage.getItem('backgroundMonth');
+        dayOfMonth = localStorage.getItem('backgroundDay');
+
+        // Check if the current day is equal to stored date
+        if (month != date.getMonth() && dayOfMonth != date.getDate()) {
+            setBackgroundData(date, backgrounds);
+        }
+    } else {
+        setBackgroundData(date, backgrounds);
+    }
+
+    background = "url(" + localStorage.getItem('background') + ")";
+
+    document.body.style.backgroundImage = background;    
+}
+
+// Function to set the new month, day, and background path
+function setBackgroundData(currentDate, backgroundArray) {
+    let randomNum = Math.floor(Math.random() * backgroundArray.length);
+
+    localStorage.setItem('backgroundMonth', currentDate.getMonth());
+    localStorage.setItem('backgroundDay', currentDate.getDate());
+    localStorage.setItem('background', backgroundArray[randomNum].location);
+    localStorage.setItem('backgroundName', backgroundArray[randomNum].name);
+    localStorage.setItem('backgroundAuthor', backgroundArray[randomNum].author);
+}
+
+changeBackground();
diff --git a/public/img/boats_by_callebe_miranda.jpeg b/public/img/boats_by_callebe_miranda.jpeg
diff --git a/public/img/snow_mountains_by_ricardo_bresciani.jpeg b/public/img/snow_mountains_by_ricardo_bresciani.jpeg
diff --git a/public/img/toronto_by_next_voyage.jpeg b/public/img/toronto_by_next_voyage.jpeg
diff --git a/public/img/white_beach_monica_silvestre.jpeg b/public/img/white_beach_monica_silvestre.jpeg
diff --git a/public/index.html b/public/index.html
@@ -8,12 +8,12 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
-
     <title>Momentum Clone</title>
   </head>
   <body>
     <noscript>
     </noscript>
     <div id="root"></div>
+    <script src="Background.js"></script>
   </body>
 </html>
diff --git a/src/components/App.js b/src/components/App.js
@@ -7,7 +7,7 @@ import Focus from "./Focus";
 import ToDo from "./ToDo.js";
 import Links from "./Links";
 import Search from "./Search";
-import Quotes from "./Quotes";
+import QuoteContainer from "./QuoteContainer";
 import Settings from "./Settings";
 import WallpaperInfo from "./WallpaperInfo";
 import WeatherContainer from "./WeatherContainer";
@@ -33,12 +33,12 @@ class App extends Component {
 						<Settings />
 						<WallpaperInfo />
 					</div>
-					<Quotes />
+          <QuoteContainer />
 					<ToDo />
 				</div>
 			</div>
 		);
 	}
 }
 
-export default App;
+export default App;
diff --git a/src/components/Quote.js b/src/components/Quote.js
@@ -0,0 +1,70 @@
+import React from "react";
+import "../styles/Quote.css";
+
+import { TiHeartOutline, TiHeartFullOutline } from "react-icons/lib/ti";
+import FaTwitter from "react-icons/lib/fa/twitter";
+import GoQuote from "react-icons/lib/go/quote";
+
+class Quote extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { isClicked: false }
+  }
+
+  toggleHeart = () => {
+    this.setState({ isClicked: !this.state.isClicked });
+  }
+
+  shareOnTwitter = () => {
+    const quoteLine = `"${this.props.quote.trim()}" — ${this.props.author}`;
+    const href = `https://twitter.com/intent/tweet?text=${quoteLine}`;
+    window.open(
+      href,
+      "Twitter",
+      "height=420, width=550, top=190px, left=365px"
+    );
+  }
+
+  render() {
+    const { quote, author } = this.props;
+
+    return (
+      <div id="Quote">
+        <div className="Quote__Container">
+          <p>
+            <span>
+              <GoQuote />
+            </span>
+            {quote}
+          </p>
+        </div>
+        <div className="Action__Container">
+          <Actions
+            author={author}
+            isClicked={this.state.isClicked}
+            toggleHeart={this.toggleHeart}
+            shareOnTwitter={this.shareOnTwitter}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+function Actions({ isClicked, author, toggleHeart, shareOnTwitter }) {
+	return (
+		<div className="Actions">
+      <span id="quote-author">
+        {author}
+      </span>
+			<span id="quote-heart" onClick={() => toggleHeart()}>
+				{isClicked ? <TiHeartFullOutline /> : <TiHeartOutline />}
+			</span>
+      <span id="quote-twitter" onClick={() => shareOnTwitter()}>
+				<FaTwitter />
+			</span>
+		</div>
+	);
+}
+
+export default Quote;
diff --git a/src/components/QuoteContainer.js b/src/components/QuoteContainer.js
@@ -0,0 +1,92 @@
+import React from "react";
+import Quote from "./Quote";
+import "../styles/Quote.css";
+
+class QuoteContainer extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = { 
+      quoteText: "", 
+      quoteAuthor: "",
+    };
+	}
+
+	componentDidMount() {
+    this.loadQuote();
+    this.callAtMidnight();
+  }
+
+  // Schedule to get a new quote every midnight
+  callAtMidnight = () => {
+    const currentTime = new Date().getTime();
+    const setTime = new Date().setHours(24, 0, 0, 0); // set to midnight
+    let timeLeft;
+
+    // It's before midnight,
+    if (currentTime < setTime) {
+      timeLeft = setTime - currentTime;
+    // It's after midnight, schedule for tomorrow at 12:00am
+    } else {
+      timeLeft = setTime + 86400000 - currentTime;
+    }
+    // Call the function 3 hours later from now (if timeLeft = 3h)
+    // console.log("timeLeft", timeLeft)
+    setTimeout(() => {
+      // Repeat every 24h
+      setInterval(() => {
+				this.getQuote();
+			}, 86400000);
+    }, timeLeft); 
+  };
+
+  // If there is no quote stored, call getQuote function.
+  loadQuote = async () => {
+    try {
+      const quoteObj = await localStorage.getItem("quoteObj");
+      if (quoteObj) {
+        const parsedQuote = JSON.parse(quoteObj);
+        const { quoteText, quoteAuthor } = parsedQuote;
+
+        this.setState({ quoteText, quoteAuthor });
+        console.log("loading from local storage", this.state);
+      } else {
+        this.getQuote();
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+	getQuote = () => {
+    // 👇 Enables cross-origin requests. More info: https://cors-anywhere.herokuapp.com/
+    const proxyUrl = "https://cors-anywhere.herokuapp.com/";
+    const endPoint = `https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en`;
+
+    fetch(proxyUrl + endPoint)
+			.then(response => response.json())
+			.then(json => {
+				console.log(json);
+        const { quoteText, quoteAuthor } = json;
+        this.setState({ quoteText, quoteAuthor });
+        this.saveQuote(this.state);
+        console.log("loading from state", this.state)
+			})
+			.catch(err => {
+				console.log(err);
+			});
+	};
+
+	saveQuote = quoteState => {
+    localStorage.setItem("quoteObj", JSON.stringify(quoteState));
+  };
+
+	render() {
+    const { quoteText, quoteAuthor } = this.state;
+
+		return (
+      <Quote quote={quoteText} author={quoteAuthor} />
+    );
+	}
+}
+
+export default QuoteContainer;
diff --git a/src/components/Quotes.js b/src/components/Quotes.js
diff --git a/src/components/Search.js b/src/components/Search.js
@@ -21,7 +21,7 @@ class Search extends React.Component {
 
   render() {
     const { showForm } = this.state;
-    const addClass = showForm ? "add-line" : "";
+    const addClass = showForm && "add-line";
 
     return <div id="Search">
 				<div className={`Search__Wrapper ${addClass}`}>
@@ -34,16 +34,14 @@ class Search extends React.Component {
   }
 }
 
-class SearchForm extends React.Component {
-  render() {
-    return (
-      <div id="Search__Form">
-        <form action="https://www.google.com/search?">
-          <input type="text" name="q"/>
-        </form>
-      </div>
-    );
-  }
+function SearchForm() {
+  return (
+    <div id="Search__Form">
+      <form action="https://www.google.com/search?">
+        <input type="text" name="q"/>
+      </form>
+    </div>
+  );
 }
 
 export default Search;