stupid date

app/components/ThreadReply.jsx

@@ -1,6 +1,6 @@
 import { Link } from "@remix-run/react";
 
-export function ThreadReply({ post }) {
+export function ThreadReply({ post, setReplying }) {
   return (
     <li
       id={`${post.id}`}

app/routes/threads/$threadId.jsx

@@ -5,10 +5,11 @@ import {
   json,
 } from "@remix-run/node";
 import { useLoaderData, Form, useActionData, Link } from "@remix-run/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Overlay from "~/components/Overlay";
 import { ThreadReply } from "~/components/ThreadReply";
 import prisma from "~/utils/db.server";
+import { useNavigate } from "@remix-run/react";
 
 export async function action({ request, params }) {
   const threadId = params.threadId;
@@ -123,6 +124,19 @@ export default function Thread() {
   const data = useLoaderData();
   const actionData = useActionData();
   const [replying, setReplying] = useState();
+  const navigate = useNavigate();
+
+  const refresh = () => {
+    navigate(".", { replace: true });
+  };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      refresh();
+    }, 5000);
+
+    return () => clearInterval(timer);
+  }, []);
 
   return (
     <Overlay>
@@ -134,8 +148,8 @@ export default function Thread() {
           <span>
             <strong>{data.title}</strong> Post id: <strong>{data.id}</strong>{" "}
             Created at:{" "}
-            <strong>{new Date(data.createdAt).toLocaleString()}</strong> Reply
-            count: <strong>{data.posts.length}</strong>
+            <strong>{new Date(data.createdAt).toLocaleTimeString()}</strong>{" "}
+            Reply count: <strong>{data.posts.length}</strong>
           </span>
           <br />
           <div className="flex flex-col">
@@ -157,7 +171,7 @@ export default function Thread() {
         </div>
         <ul className="m-8 ">
           {data.posts.map((post) => (
-            <ThreadReply key={post.id} post={post} />
+            <ThreadReply key={post.id} setReplying={setReplying} post={post} />
           ))}
         </ul>
       </div>