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 }