From c5bd37942c2c725fa4fd7a49a40f4fc45189ecd1 Mon Sep 17 00:00:00 2001
From: Your Name <youremail@yourdomain.com>
Date: Tue, 24 Jan 2023 10:37:57 +0200
Subject: [PATCH] switch to native remix api instead of some navigator thing

---
 app/routes/threads/$threadId.jsx | 50 ++++++++++++++++----------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/app/routes/threads/$threadId.jsx b/app/routes/threads/$threadId.jsx
index d8d4dfa..88339f2 100644
--- a/app/routes/threads/$threadId.jsx
+++ b/app/routes/threads/$threadId.jsx
@@ -16,6 +16,7 @@ import Overlay from "~/components/Overlay";
 import { ThreadReply } from "~/components/ThreadReply";
 import prisma from "~/utils/db.server";
 import { useNavigate } from "@remix-run/react";
+import { useRevalidator } from "@remix-run/react";
 
 export async function action({ request, params }) {
   const threadId = params.threadId;
@@ -131,15 +132,11 @@ export default function Thread() {
   const actionData = useActionData();
   const transition = useTransition();
   const [replying, setReplying] = useState();
-  const navigate = useNavigate();
-
-  const refresh = () => {
-    navigate(".", { replace: true });
-  };
+  const revalidator = useRevalidator();
 
   useEffect(() => {
     const timer = setInterval(() => {
-      refresh();
+      revalidator.revalidate();
     }, 5000);
 
     return () => clearInterval(timer);
@@ -147,25 +144,28 @@ export default function Thread() {
 
   return (
     <Overlay>
-      <div className="fixed top-0 right-0 m-4 space-x-4 rounded border bg-ctp-crust p-2">
-        <Link
-          onClick={(event) => {
-            event.preventDefault();
-            document.getElementById(`bottom`).scrollIntoView(true);
-          }}
-          to={`/threads/${data.id}#bottom`}
-        >
-          Bottom
-        </Link>
-        <Link
-          onClick={(event) => {
-            event.preventDefault();
-            document.getElementById(`top`).scrollIntoView(true);
-          }}
-          to={`/threads/${data.id}#top`}
-        >
-          Top
-        </Link>
+      <div className="fixed top-0 right-0 m-4 flex flex-col rounded border bg-ctp-crust p-2">
+        <div className="space-x-4">
+          <Link
+            onClick={(event) => {
+              event.preventDefault();
+              document.getElementById(`bottom`).scrollIntoView(true);
+            }}
+            to={`/threads/${data.id}#bottom`}
+          >
+            Bottom
+          </Link>
+          <Link
+            onClick={(event) => {
+              event.preventDefault();
+              document.getElementById(`top`).scrollIntoView(true);
+            }}
+            to={`/threads/${data.id}#top`}
+          >
+            Top
+          </Link>
+        </div>
+        <p>{revalidator.state === "loading" ? "Updating..." : ""}</p>
       </div>
       <div id="top" className="flex flex-col">
         <div