From 9ccbf577eb3b85dbfa87fe006a323c54a455a845 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 21 Aug 2026 12:11:06 -0700
Subject: [PATCH] Now the page hash

---
 src/__tests__/pages/index.test.jsx | 13 ++++++--
 src/pages/index.jsx                | 49 +++++++++++++++---------------
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/__tests__/pages/index.test.jsx b/src/__tests__/pages/index.test.jsx
index 1d8c03240..d4ff79830 100644
--- a/src/__tests__/pages/index.test.jsx
+++ b/src/__tests__/pages/index.test.jsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import { ColorContext } from "utils/contexts/color";
@@ -25,6 +25,7 @@ const {
     throwIn: null,
     validateData: [],
     hashData: null,
+    hashConfig: null,
     mutateHash: vi.fn(),
     servicesData: [],
     bookmarksData: [],
@@ -59,9 +60,12 @@ const {
   const serverSideTranslations = vi.fn(async (language) => ({ _translations: language }));
   const logger = { error: vi.fn() };
 
-  const useSWR = vi.fn((key) => {
+  const useSWR = vi.fn((key, config) => {
     if (key === "/api/validate") return { data: state.validateData };
-    if (key === "/api/hash") return { data: state.hashData, mutate: state.mutateHash };
+    if (key === "/api/hash") {
+      state.hashConfig = config;
+      return { data: state.hashData, mutate: state.mutateHash };
+    }
     if (key === "/api/services") return { data: state.servicesData };
     if (key === "/api/bookmarks") return { data: state.bookmarksData };
     if (key === "/api/widgets") return { data: state.widgetsData };
@@ -172,6 +176,7 @@ describe("pages/index getStaticProps", () => {
     state.throwIn = null;
     state.validateData = [];
     state.hashData = null;
+    state.hashConfig = null;
     state.servicesData = [];
     state.bookmarksData = [];
     state.widgetsData = [];
@@ -351,6 +356,7 @@ describe("pages/index Index routing + SWR branches", () => {
     }
 
     await renderIndex({ initialSettings: { title: "Homepage", layout: {} }, settings: { layout: {} } });
+    act(() => state.hashConfig.onSuccess(state.hashData));
 
     await waitFor(() => {
       expect(fetchSpy).toHaveBeenCalledWith("/api/revalidate");
@@ -379,6 +385,7 @@ describe("pages/index Index routing + SWR branches", () => {
     localStorage.removeItem("hash");
 
     await renderIndex({ initialSettings: { title: "Homepage", layout: {} }, settings: { layout: {} } });
+    act(() => state.hashConfig.onSuccess(state.hashData));
 
     await waitFor(() => {
       expect(localStorage.getItem("hash")).toBe("first-hash");
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index d5c5296cf..013628ee5 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -12,7 +12,7 @@ import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import Script from "next/script";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { BiError } from "react-icons/bi";
 import useSWR, { SWRConfig } from "swr";
 import { ColorContext } from "utils/contexts/color";
@@ -102,7 +102,29 @@ function Index({ initialSettings, fallback }) {
   const [stale, setStale] = useState(false);
   const { data: errorsData } = useSWR("/api/validate");
   const { error: validateError } = errorsData || {};
-  const { data: hashData, mutate: mutateHash } = useSWR("/api/hash");
+
+  const handleHashData = useCallback((hashData) => {
+    if (typeof window === "undefined") return;
+
+    const previousHash = localStorage.getItem("hash");
+
+    if (!previousHash) {
+      localStorage.setItem("hash", hashData.hash);
+    }
+
+    if (previousHash && previousHash !== hashData.hash) {
+      setStale(true);
+      localStorage.setItem("hash", hashData.hash);
+
+      fetch("/api/revalidate").then((res) => {
+        if (res.ok) {
+          window.location.reload();
+        }
+      });
+    }
+  }, []);
+
+  const { mutate: mutateHash } = useSWR("/api/hash", { onSuccess: handleHashData });
 
   useEffect(() => {
     if (windowFocused) {
@@ -110,29 +132,6 @@ function Index({ initialSettings, fallback }) {
     }
   }, [windowFocused, mutateHash]);
 
-  useEffect(() => {
-    if (hashData) {
-      if (typeof window !== "undefined") {
-        const previousHash = localStorage.getItem("hash");
-
-        if (!previousHash) {
-          localStorage.setItem("hash", hashData.hash);
-        }
-
-        if (previousHash && previousHash !== hashData.hash) {
-          setStale(true);
-          localStorage.setItem("hash", hashData.hash);
-
-          fetch("/api/revalidate").then((res) => {
-            if (res.ok) {
-              window.location.reload();
-            }
-          });
-        }
-      }
-    }
-  }, [hashData]);
-
   if (validateError) {
     return (
       <div className="w-full h-screen container m-auto justify-center p-10 pointer-events-none">