feat: ✨ add auto-update time
by Sivritkin Dmitriy
1@@ -9,6 +9,7 @@ Explore your Git commit history with ease! `GitHubCommitExplorer` is a sleek, re
2 ## Features 🌟
3
4 - ✅ **User-Friendly Interface**: Built with Tailwind for a responsive, intuitive design.
5+- ✅ **Real-Time Updates**: Timestamps update live, without needing to refresh the page.
6 - ✅ **Refresh Button**: Fetch the latest commits without reloading the page, complete with a smooth loading indicator.
7 - ✅ **View Code Changes**: Explore changes in the code for each commit, providing an understanding of what was modified, added, or removed.
8 ---@@ -1,20 +1,22 @@
9 "use client";
10
11+import { useEffect, useState } from "react";
12+import { useRouter } from "next/navigation";
13+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
14+import { RestEndpointMethodTypes } from "@octokit/plugin-rest-endpoint-methods";
15+
16 import {
17 Dialog,
18 DialogContent,
19 DialogDescription,
20 DialogHeader,
21 DialogTitle,
22 } from "~/shared/ui/dialog";
23-import { useRouter } from "next/navigation";
24-import { useEffect, useState } from "react";
25 import { $api } from "~/shared/api";
26-import { RestEndpointMethodTypes } from "@octokit/plugin-rest-endpoint-methods";
27-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
28-import { materialDark as style } from "react-syntax-highlighter/dist/esm/styles/prism";
29 import { convertEmoji } from "~/shared/lib/convert-emoji";
30
31+import { materialDark as style } from "react-syntax-highlighter/dist/esm/styles/prism";
32+
33 export default function CommitModal({
34 params: { sha },
35 }: {@@ -6,7 +6,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
36
37 dayjs.extend(relativeTime);
38
39-export const Date = ({ date }: { date: string }) => {
40+export const AutoUpdatedDate = ({ date }: { date: string }) => {
41 const [currentDate, setCurrentDate] = useState(dayjs(date).fromNow());
42
43 useEffect(() => {
44@@ -17,11 +17,5 @@ export const Date = ({ date }: { date: string }) => {
45 return () => clearInterval(intervalId);
46 }, []);
47
48- console.log("@log", currentDate);
49-
50- return (
51- <div>
52- <h1>{currentDate}</h1>
53- </div>
54- );
55+ return <span className="text-lg">{currentDate}</span>;
56 };@@ -1,7 +1,9 @@
57 import type { Metadata } from "next";
58 import { Rubik as FontSans } from "next/font/google";
59-import { ThemeProvider } from "~/app/providers/theme";
60+
61 import { cn } from "~/shared/lib/utils";
62+
63+import { ThemeProvider } from "~/app/providers/theme";
64 import { Header } from "~/components/header";
65
66 import "./globals.css";@@ -1,12 +1,14 @@
67-import { $api } from "~/shared/api";
68-import { Card } from "~/shared/ui/card";
69-import relativeTime from "dayjs/plugin/relativeTime";
70 import dayjs from "dayjs";
71 import Link from "next/link";
72+import relativeTime from "dayjs/plugin/relativeTime";
73+
74+import { $api } from "~/shared/api";
75+import { Card } from "~/shared/ui/card";
76 import { Avatar, AvatarImage } from "~/shared/ui/avatar";
77 import { convertEmoji } from "~/shared/lib/convert-emoji";
78-import { RefreshButton } from "~/app/refresh-form";
79-import { Date } from "~/app/date";
80+
81+import { RefreshButton } from "./refresh-form";
82+import { AutoUpdatedDate } from "./auto-updated-date";
83
84 dayjs.extend(relativeTime);
85
86@@ -41,7 +43,9 @@ export default async function Home() {
87 </Avatar>
88 <span className="text-lg">{commit.commit.author?.name}</span>
89 </div>
90- <Date date={commit.commit.committer?.date || ""} />
91+ <AutoUpdatedDate
92+ date={commit.commit.committer?.date || dayjs().toString()}
93+ />
94 </div>
95 </Card>
96 </Link>@@ -2,9 +2,11 @@
97
98 import { RotateCw } from "lucide-react";
99 import { useFormState, useFormStatus } from "react-dom";
100-import { refreshCommits } from "~/app/actions";
101+
102 import { Button } from "~/shared/ui/button";
103
104+import { refreshCommits } from "~/app/actions";
105+
106 export const RefreshButton = () => {
107 const [data, formAction] = useFormState(refreshCommits, {
108 success: false,@@ -1,6 +1,8 @@
109+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
110+
111 import { $api } from "~/shared/api";
112 import { convertEmoji } from "~/shared/lib/convert-emoji";
113-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
114+
115 import { materialDark as style } from "react-syntax-highlighter/dist/esm/styles/prism";
116
117 export default async function CommitModal({