feat: ✨ add refresh button

by Sivritkin Dmitriy

1@@ -0,0 +1,9 @@
2+"use server";
3+
4+import { revalidatePath } from "next/cache";
5+
6+export const refreshCommits = async () => {
7+  revalidatePath("/");
8+
9+  return { success: true };
10+};@@ -5,6 +5,7 @@ import dayjs from "dayjs";
11 import Link from "next/link";
12 import { Avatar, AvatarImage } from "~/shared/ui/avatar";
13 import { convertEmoji } from "~/shared/lib/convert-emoji";
14+import { RefreshButton } from "~/app/refresh-form";
15 
16 dayjs.extend(relativeTime);
17 
18@@ -14,26 +15,16 @@ export default async function Home() {
19     repo: "github-commit-explorer",
20   });
21 
22-  const selCommit = await $api.rest.repos.getCommit({
23-    owner: "velenyx",
24-    repo: "github-commit-explorer",
25-    ref: data.data[0].sha,
26-  });
27-
28-  const aggregatedDiff = selCommit.data.files?.reduce(
29-    (acc, file) => acc + (file.patch || ""),
30-    String.raw``,
31-  );
32-
33   return (
34     <div className="container">
35       <h1 className="mt-8 text-center text-6xl font-semibold">
36         <span className="text-blue-700">There are</span> {data.data.length}{" "}
37         commits!
38       </h1>
39+      <RefreshButton />
40       <div className="mt-10">
41         {data.data.map((commit) => (
42-          <Link href={`/sha/${commit.sha}`}>
43+          <Link key={"link" + commit.sha} href={`/sha/${commit.sha}`}>
44             <Card
45               key={commit.sha}
46               className="mt-4 cursor-pointer p-5 transition-all hover:border-blue-400 hover:text-blue-400"@@ -0,0 +1,29 @@
47+"use client";
48+
49+import { useFormState, useFormStatus } from "react-dom";
50+import { refreshCommits } from "~/app/actions";
51+import { Button } from "~/shared/ui/button";
52+
53+export const RefreshButton = () => {
54+  const [data, formAction] = useFormState(refreshCommits, {
55+    success: false,
56+  });
57+
58+  return (
59+    <form action={formAction}>
60+      <div className="flex items-center justify-end">
61+        <RefrButton />
62+      </div>
63+    </form>
64+  );
65+};
66+
67+const RefrButton = () => {
68+  const formStatus = useFormStatus();
69+
70+  return (
71+    <Button type="submit" disabled={formStatus.pending}>
72+      Refresh
73+    </Button>
74+  );
75+};