feat: ✨ convert api to REST, add commit cards
by Sivritkin Dmitriy
1@@ -16,30 +16,25 @@
2 "lint:ts:fix": "npx eslint \"**/*.{ts,tsx}\" --fix",
3 "format:check": "prettier --check .",
4 "format:fix": "prettier --write .",
5- "typecheck": "tsc --noEmit --pretty",
6- "generate-gql": "graphql-codegen -r dotenv/config --config ./src/api/codegen.yml && prettier --write ./src/api/__generated__.ts"
7+ "typecheck": "tsc --noEmit --pretty"
8 },
9 "dependencies": {
10 "@radix-ui/react-dropdown-menu": "^2.0.6",
11 "@radix-ui/react-icons": "^1.3.0",
12 "@radix-ui/react-slot": "^1.0.2",
13 "class-variance-authority": "^0.7.0",
14 "clsx": "^2.1.1",
15- "graphql": "^16.8.2",
16- "graphql-request": "^7.0.1",
17+ "dayjs": "^1.11.11",
18 "lucide-react": "^0.395.0",
19 "next": "14.2.4",
20 "next-themes": "^0.3.0",
21+ "octokit": "^4.0.2",
22 "react": "^18",
23 "react-dom": "^18",
24 "tailwind-merge": "^2.3.0",
25 "tailwindcss-animate": "^1.0.7"
26 },
27 "devDependencies": {
28- "@graphql-codegen/cli": "^5.0.2",
29- "@graphql-codegen/typescript": "^4.0.7",
30- "@graphql-codegen/typescript-graphql-request": "^6.2.0",
31- "@graphql-codegen/typescript-operations": "^4.2.1",
32 "@types/node": "^20",
33 "@types/react": "^18",
34 "@types/react-dom": "^18",@@ -1,16 +0,0 @@
35-overwrite: true
36-schema:
37- - https://api.github.com/graphql:
38- headers:
39- User-Agent: velenyx
40- Authorization: 'Bearer ${GITHUB_TOKEN}'
41-documents: './src/api/documents/**/*.gql'
42-generates:
43- ./src/api/__generated__.ts:
44- plugins:
45- - typescript
46- - typescript-operations
47- - typescript-graphql-request
48-config:
49- maybeValue: 'T'
50- immutableTypes: true@@ -1,30 +0,0 @@
51-# i need git diffs code
52-
53-query Commits($owner: String!, $name: String!, $branchName: String!) {
54- repository(owner: $owner, name: $name) {
55- ref(qualifiedName: $branchName) {
56- target {
57- ... on Commit {
58- history(last: 10) {
59- edges {
60- node {
61- parents(first: 10) {
62- nodes {
63- oid
64- }
65- }
66- messageHeadline
67- oid
68- author {
69- name
70- email
71- date
72- }
73- }
74- }
75- }
76- }
77- }
78- }
79- }
80-}@@ -1,6 +0,0 @@
81-schema:
82- - https://api.github.com/graphql:
83- headers:
84- User-Agent: velenyx
85- Authorization: 'Bearer ${GITHUB_TOKEN}'
86-documents: '**/*.graphql'@@ -1,10 +0,0 @@
87-import { GraphQLClient } from "graphql-request";
88-import { getSdk } from "~/api/__generated__";
89-
90-const client = new GraphQLClient(`https://api.github.com/graphql`, {
91- headers: {
92- Authorization: `Bearer ${process.env.GITHUB_TOKEN || ""}`,
93- },
94-});
95-
96-export const gql = getSdk(client);@@ -34,7 +34,7 @@ export default function RootLayout({
97 >
98 <div className="relative flex min-h-screen flex-col">
99 <Header />
100- <main className="flex-1">{children}</main>
101+ <main className="mb-10 flex-1">{children}</main>
102 </div>
103 </ThemeProvider>
104 </body>@@ -1,15 +1,49 @@
105-import { gql } from "~/api";
106+import { $api } from "~/shared/api";
107+import { Card } from "~/shared/ui/card";
108+import relativeTime from "dayjs/plugin/relativeTime";
109+import dayjs from "dayjs";
110+
111+dayjs.extend(relativeTime);
112
113 export default async function Home() {
114- const { repository } = await gql.Commits({
115+ const data = await $api.rest.repos.listCommits({
116 owner: "velenyx",
117- name: "github-commit-explorer",
118- branchName: "main",
119+ repo: "github-commit-explorer",
120 });
121
122+ const selCommit = await $api.rest.repos.getCommit({
123+ owner: "velenyx",
124+ repo: "github-commit-explorer",
125+ ref: data.data[0].sha,
126+ });
127+ // .then((response) =>
128+ // response?.data?.files?.map((file) => file.patch).join("\n"),
129+ // );
130+
131+ console.log("@files", selCommit.data.files);
132+
133 return (
134 <div className="container mt-3">
135- <h1 className="text-3xl text-green-600">Hello world!!!</h1>
136+ <h1 className="mt-8 text-center text-6xl font-semibold">
137+ <span className="text-blue-700">There are</span> {data.data.length}{" "}
138+ commits!
139+ </h1>
140+ <div className="mt-10">
141+ {data.data.map((commit) => (
142+ <Card
143+ key={commit.sha}
144+ className="mt-4 cursor-pointer p-5 transition-all hover:border-blue-400"
145+ >
146+ <h2 className="text-2xl">{commit.commit.message}</h2>
147+ <div className="mt-3 flex items-center justify-between">
148+ <p className="text-lg">by {commit.commit.author?.name}</p>
149+ <p className="text-lg">
150+ {dayjs(commit.commit.committer?.date).fromNow()}
151+ </p>
152+ </div>
153+ </Card>
154+ ))}
155+ </div>
156 </div>
157 );
158 }@@ -0,0 +1,3 @@
159+import { Octokit } from "octokit";
160+
161+export const $api = new Octokit({ auth: process.env.GITHUB_TOKEN });@@ -0,0 +1,76 @@
162+import * as React from "react"
163+
164+import { cn } from "~/shared/lib/utils"
165+
166+const Card = React.forwardRef<
167+ HTMLDivElement,
168+ React.HTMLAttributes<HTMLDivElement>
169+>(({ className, ...props }, ref) => (
170+ <div
171+ ref={ref}
172+ className={cn(
173+ "rounded-xl border bg-card text-card-foreground shadow",
174+ className
175+ )}
176+ {...props}
177+ />
178+))
179+Card.displayName = "Card"
180+
181+const CardHeader = React.forwardRef<
182+ HTMLDivElement,
183+ React.HTMLAttributes<HTMLDivElement>
184+>(({ className, ...props }, ref) => (
185+ <div
186+ ref={ref}
187+ className={cn("flex flex-col space-y-1.5 p-6", className)}
188+ {...props}
189+ />
190+))
191+CardHeader.displayName = "CardHeader"
192+
193+const CardTitle = React.forwardRef<
194+ HTMLParagraphElement,
195+ React.HTMLAttributes<HTMLHeadingElement>
196+>(({ className, ...props }, ref) => (
197+ <h3
198+ ref={ref}
199+ className={cn("font-semibold leading-none tracking-tight", className)}
200+ {...props}
201+ />
202+))
203+CardTitle.displayName = "CardTitle"
204+
205+const CardDescription = React.forwardRef<
206+ HTMLParagraphElement,
207+ React.HTMLAttributes<HTMLParagraphElement>
208+>(({ className, ...props }, ref) => (
209+ <p
210+ ref={ref}
211+ className={cn("text-sm text-muted-foreground", className)}
212+ {...props}
213+ />
214+))
215+CardDescription.displayName = "CardDescription"
216+
217+const CardContent = React.forwardRef<
218+ HTMLDivElement,
219+ React.HTMLAttributes<HTMLDivElement>
220+>(({ className, ...props }, ref) => (
221+ <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
222+))
223+CardContent.displayName = "CardContent"
224+
225+const CardFooter = React.forwardRef<
226+ HTMLDivElement,
227+ React.HTMLAttributes<HTMLDivElement>
228+>(({ className, ...props }, ref) => (
229+ <div
230+ ref={ref}
231+ className={cn("flex items-center p-6 pt-0", className)}
232+ {...props}
233+ />
234+))
235+CardFooter.displayName = "CardFooter"
236+
237+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }