test: 🧪 add auto-refresh

by Sivritkin Dmitriy

1@@ -6,12 +6,10 @@ import Link from "next/link";
2 import { Avatar, AvatarImage } from "~/shared/ui/avatar";
3 import { convertEmoji } from "~/shared/lib/convert-emoji";
4 import { RefreshButton } from "~/app/refresh-form";
5+import { Time } from "~/app/time";
6 
7 dayjs.extend(relativeTime);
8 
9-export const runtime = "nodejs";
10-export const revalidate = 5;
11-
12 export default async function Home() {
13   const data = await $api.rest.repos.listCommits({
14     owner: "velenyx",
15@@ -24,6 +22,7 @@ export default async function Home() {
16         <span className="text-blue-700">There are</span> {data.data.length}{" "}
17         commits!
18       </h1>
19+      {dayjs().toString()}
20       <RefreshButton />
21       <div className="mt-10">
22         {data.data.map((commit) => (
23@@ -44,7 +43,7 @@ export default async function Home() {
24                   <span className="text-lg">{commit.commit.author?.name}</span>
25                 </div>
26                 <p className="text-lg">
27-                  {dayjs(commit.commit.committer?.date).fromNow()}
28+                  <Time date={commit.commit.committer?.date} />
29                 </p>
30               </div>
31             </Card>@@ -0,0 +1,22 @@
32+"use client";
33+
34+import { useEffect, useState } from "react";
35+import dayjs from "dayjs";
36+import relativeTime from "dayjs/plugin/relativeTime";
37+
38+dayjs.extend(relativeTime);
39+
40+export const Time = ({ date }: { date: string }) => {
41+  const [relativeTime, setRelativeTime] = useState(dayjs(date).fromNow());
42+
43+  useEffect(() => {
44+    const intervalId = setInterval(() => {
45+      setRelativeTime(dayjs(date).fromNow());
46+    }, 6000);
47+    // }, 60000);
48+
49+    return () => clearInterval(intervalId);
50+  }, []);
51+
52+  return <p>{relativeTime}</p>;
53+};