Use dynamic loading navigation to prevent agresive caching

petrkucerak · Feb 19, 2024 · 7c7ae7d · 7c7ae7d
1 parent 09009a3
commit 7c7ae7d
Showing 1 changed file with 45 additions and 32 deletions.
diff --git a/components/utils/nav-buttons.js b/components/utils/nav-buttons.js
@@ -1,49 +1,62 @@
 import Link from "next/link";
+import { useEffect } from "react";
 
 function formateDayNum(num) {
   if (num < 10) return `0${num}`;
   else return `${num}`;
 }
 
 export default function NavButtons({ posts }) {
-  // const now = new Date("2022-11-28"); // testing date
-  const now = new Date();
-  const nowDate = `${now.getFullYear()}-${formateDayNum(
-    now.getMonth() + 1
-  )}-${formateDayNum(now.getDate())}`;
-
-  const yesterday = new Date(now.setDate(now.getDate() - 1));
-  const yesterdayDate = `${yesterday.getFullYear()}-${formateDayNum(
-    yesterday.getMonth() + 1
-  )}-${formateDayNum(yesterday.getDate())}`;
-
-  const tomorrow = new Date(now.setDate(now.getDate() + 2));
-  const tomorrowDate = `${tomorrow.getFullYear()}-${formateDayNum(
-    tomorrow.getMonth() + 1
-  )}-${formateDayNum(tomorrow.getDate())}`;
-
-  // console.log(yesterdayDate, nowDate, tomorrowDate);
-  let yesterdayStatus, nowStatus, tomorrowStatus;
-  yesterdayStatus = nowStatus = tomorrowStatus = "hidden";
-
-  // console.log(tomorrowDate);
-
-  posts.map((post) => {
-    if (nowDate === post.slug) nowStatus = "";
-    if (yesterdayDate === post.slug) yesterdayStatus = "";
-    if (tomorrowDate === post.slug) tomorrowStatus = "";
+  useEffect(() => {
+    // const now = new Date("2022-11-28"); // testing date
+    const now = new Date();
+    const nowDate = `${now.getFullYear()}-${formateDayNum(
+      now.getMonth() + 1
+    )}-${formateDayNum(now.getDate())}`;
+
+    const yesterday = new Date(now.setDate(now.getDate() - 1));
+    const yesterdayDate = `${yesterday.getFullYear()}-${formateDayNum(
+      yesterday.getMonth() + 1
+    )}-${formateDayNum(yesterday.getDate())}`;
+
+    const tomorrow = new Date(now.setDate(now.getDate() + 2));
+    const tomorrowDate = `${tomorrow.getFullYear()}-${formateDayNum(
+      tomorrow.getMonth() + 1
+    )}-${formateDayNum(tomorrow.getDate())}`;
+
+    // console.log(yesterdayDate, nowDate, tomorrowDate);
+    let yesterdayStatus, nowStatus, tomorrowStatus;
+    yesterdayStatus = nowStatus = tomorrowStatus = "hidden";
+
+    posts.map((post) => {
+      if (nowDate === post.slug) nowStatus = "";
+      if (yesterdayDate === post.slug) yesterdayStatus = "";
+      if (tomorrowDate === post.slug) tomorrowStatus = "";
+    });
+
+    const yesterdayEl = document.getElementById("yesterdayEl");
+    const todayEl = document.getElementById("todayEl");
+    const tomorowEl = document.getElementById("tomorowEl");
+
+    yesterdayEl.setAttribute("href", `/den/${yesterdayDate}`);
+    todayEl.setAttribute("href", `/den/${nowDate}`);
+    tomorowEl.setAttribute("href", `/den/${tomorrowDate}`);
+
+    yesterdayEl.setAttribute("class", yesterdayStatus);
+    todayEl.setAttribute("class", nowStatus);
+    tomorowEl.setAttribute("class", tomorrowStatus);
   });
   return (
     <div className="mx-6 flex flex-row justify-around mt-6">
-      <Link href={`/den/${yesterdayDate}`} className={yesterdayStatus}>
+      <a id="yesterdayEl" href={`/`}>
         <Button className={"bg-primary-light"}>včera</Button>
-      </Link>
-      <Link href={`/den/${nowDate}`} className={nowStatus}>
+      </a>
+      <a id="todayEl" href={`/`}>
         <Button className={"bg-primary-dark"}>dnes</Button>
-      </Link>
-      <Link href={`/den/${tomorrowDate}`} className={tomorrowStatus}>
+      </a>
+      <a id="tomorowEl" href={`/`}>
         <Button className={"bg-primary-light"}>zítra</Button>
-      </Link>
+      </a>
     </div>
   );
 }