add toggle for one day or week ago

2 files changed, 14 insertions, 4 deletions

diff --git a/src/App.js b/src/App.js
index 3c0b486..68d7f08 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,3 +1,4 @@
+import React from "react";
 import useSWR from "swr";
 import { DateTime } from "luxon";
 import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
@@ -10,6 +11,8 @@ const url = "https://ritcoviddashboard.com/api/v0/history";
 function App() {
     const { data: data, error: error } = useSWR(url);
 
+    const [timeDifference, setTimeDifference] = React.useState(1);
+
     if (error)
         return (
             <div className="App">
@@ -26,7 +29,7 @@ function App() {
         );
 
     const latest = data[data.length - 1];
-    const prior = data[data.length - 2];
+    const prior = data[data.length - (1 + timeDifference)];
     const local = DateTime.local().zoneName;
     const lastUpdate = DateTime.fromSQL(latest.last_updated, { zone: "UTC" }).setZone(local);
     const priorUpdate = DateTime.fromSQL(prior.last_updated, { zone: "UTC" }).setZone(local);
@@ -57,6 +60,13 @@ function App() {
                         minute: "2-digit",
                     })}
                 </h4>
+
+                <button
+                    onClick={() => setTimeDifference(timeDifference == 1 ? 5 : 1)}
+                    class="bg-transparent text-sm hover:bg-orange-400 text-gray-600 hover:text-white py-1 my-1 px-2 border border-orange-300 hover:border-transparent rounded transition ease-in-out duration-300"
+                >
+                    Use one {timeDifference == 1 ? "week" : "day"} ago
+                </button>
                 <br />
                 <Switch>
                     <Route exact path="/">
diff --git a/src/Card.js b/src/Card.js
index 86ee54d..a296681 100644
--- a/src/Card.js
+++ b/src/Card.js
@@ -8,8 +8,8 @@ const Card = (props) => {
         diff = "+" + diff.toString();
     }
     return (
-        <Link className="Card" style={{padding: 0}} to={props.link}>
-        <div className="group bg-white hover:bg-orange-400 rounded-lg border-2 border-orange-300 hover:border-orange-400 p-4 m-6 transition ease-in-out duration-300">
+        <Link className="Card" style={{ padding: 0 }} to={props.link}>
+            <div className="group bg-white hover:bg-orange-400 rounded-lg border-2 border-orange-300 hover:border-orange-400 p-4 m-6 transition ease-in-out duration-300">
                 <p>
                     <span className="text-2xl group-hover:text-white transition ease-in-out duration-300">
                         {props.latest}
@@ -21,7 +21,7 @@ const Card = (props) => {
                     </span>
                 </p>
                 <h3 className="text-base group-hover:text-white transition ease-in-out duration-300">{props.name}</h3>
-        </div>
+            </div>
         </Link>
     );
 };