add the data layer - localstorage, fetch calls, updater, etc

.gitignore

@@ -28,3 +28,9 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.env*
+
+.vercel
+
+now.json
+next.config.js

components/DateChangeContainer.js

@@ -0,0 +1,70 @@
+import { useState, useEffect } from 'react';
+import { format } from 'date-fns';
+import Hero from './Hero';
+
+const DateChangeWrapper = () => {
+  function dateIt() {
+    const dateForm = 'EEEE M-dd-yyyy h:mm aaaa';
+    const isNow = Date.now();
+    const prettyDate = format(isNow, dateForm);
+    const dateObj = {
+      isNow,
+      prettyDate
+    };
+    return dateObj;
+  }
+
+  // localStorage.getItem('2020-05') ||
+
+  const [date, setDate] = useState(dateIt());
+  const [tides, setTides] = useState('');
+
+  // set the time every minute
+  useEffect(() => {
+    const everySecond = setInterval(() => {
+      setDate(dateIt());
+      console.log('tick-tock');
+    }, 1000);
+    return () => clearInterval(everySecond);
+  }, []);
+
+  async function getMonthOfTides(month) {
+    try {
+      const res = await fetch(`/api/tides?month=${month}`);
+      const tideInfo = await res.json();
+      localStorage.setItem(month, JSON.stringify(tideInfo));
+      setTides(tideInfo);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  useEffect(() => {
+    const monthOfDate = format(date.isNow, 'yyyy-MM');
+    const monthSaved = localStorage.getItem(monthOfDate);
+    if (!monthSaved) {
+      console.log('no month saved');
+      getMonthOfTides(monthOfDate);
+      return;
+    }
+    console.log('month found');
+  }, [date]);
+
+  return (
+    <main className="border-2 border-green-600">
+      <Hero date={date.prettyDate} />
+      <style jsx>{`
+        main {
+          padding: 2rem 0;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          // justify-content: center;
+          // align-items: center;
+        }
+      `}</style>
+    </main>
+  );
+};
+
+export default DateChangeWrapper;

components/Header.js

@@ -0,0 +1,32 @@
+import Link from 'next/link';
+
+const Header = () => (
+  <div className="border-2 border-red-600 p-5 relative">
+    <Link href="/">
+      <a className="relative">
+        <div className="flex shrinkIt">
+          <h1 className="headingText text-blue-700 ml-2 text-2xl tracking-wide leading-7">
+            Eaton's Neck Tides
+          </h1>
+        </div>
+      </a>
+    </Link>
+    <style jsx>{`
+      .logo {
+        width: 65px;
+        height: 65px;
+      }
+      .headingText {
+        font-family: 'Open Sans', sans-serif;
+      }
+      @media only screen and (max-width: 485px) {
+        .shrinkIt > h1 {
+          font-size: 1.25rem;
+          margin-left: 0.5rem;
+        }
+      }
+    `}</style>
+  </div>
+);
+
+export default Header;

components/Hero.js

@@ -0,0 +1,23 @@
+const Header = ({ date }) => (
+  <div className="border-2 border-orange-600 p-5 relative">
+    <div className="flex">
+      <h1 className="headingText text-blue-700 ml-2 text-2xl tracking-wide leading-7">
+        Today: {date}
+      </h1>
+    </div>
+
+    <style jsx>{`
+      .headingText {
+        font-family: 'Open Sans', sans-serif;
+      }
+      @media only screen and (max-width: 485px) {
+        .shrinkIt > h1 {
+          font-size: 1.25rem;
+          margin-left: 0.5rem;
+        }
+      }
+    `}</style>
+  </div>
+);
+
+export default Header;

middleware/withErrorHandler.js

@@ -0,0 +1,13 @@
+const withErrorHandler = fn => async (req, res) => {
+  try {
+    return await fn(req, res);
+  } catch (error) {
+    if (error instanceof Error) {
+      res.status(500).json({ exception: { code: 500, message: error.message } });
+      return;
+    }
+    res.status(error.code || 500).json({ exception: error });
+  }
+};
+
+export default withErrorHandler;

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "date-fns": "^2.14.0",
     "next": "9.4.1",
     "react": "16.13.1",
     "react-dom": "16.13.1"

pages/api/tides.js

@@ -0,0 +1,15 @@
+import catchErrors from '../../middleware/withErrorHandler';
+
+const getTides = async (req, res) => {
+  const { month = '2020-01' } = req.query;
+  const dets = await fetch(
+    `https://www.tidessolunar.com/api/predictions/us/new-york/eatons-neck-point-long-island/${month}`
+  );
+
+  const data = await dets.json();
+
+  res.statusCode = 200;
+  res.json({ data });
+};
+
+export default catchErrors(getTides);