feat: repo query

Tushar98644 · Tushar98644 · commit 139f8b23faa8 · 2025-10-19T23:32:26.000+05:30
diff --git a/web/bun.lock b/web/bun.lock
diff --git a/web/package.json b/web/package.json
@@ -13,11 +13,13 @@
     "@copilotkit/react-core": "^1.10.6",
     "@copilotkit/react-ui": "^1.10.6",
     "@copilotkit/runtime": "^1.10.6",
+    "@octokit/rest": "^22.0.0",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@shikijs/transformers": "^3.13.0",
+    "@tanstack/react-query": "^5.90.5",
     "@xyflow/react": "^12.8.6",
     "better-auth": "^1.3.27",
     "class-variance-authority": "^0.7.1",
diff --git a/web/src/app/dashboard/page.tsx b/web/src/app/dashboard/page.tsx
@@ -6,44 +6,47 @@ import { Search } from 'lucide-react';
 import { DashboardSkeleton } from '@/features/dashboard/skeleton';
 import { RepositoryCard } from '@/features/dashboard/repo-card';
 import { ConnectGitHubView } from '@/features/dashboard/connect-github';
-
-const MOCK_REPOS = [
-    { id: 1, title: 'Code Lens Pro', issueNumber: '#55', branch: 'main', avatar: 'https://avatars.githubusercontent.com/u/9919?s=40&v=4' },
-    { id: 2, title: 'Design System V2', issueNumber: '#102', branch: 'main', avatar: 'https://avatars.githubusercontent.com/u/1024025?s=40&v=4' },
-    { id: 3, title: 'API Service Refactor', issueNumber: '#89', branch: 'feat/new-auth', avatar: 'https://avatars.githubusercontent.com/u/9919?s=40&v=4' },
-    { id: 4, title: 'Documentation Site', issueNumber: '#21', branch: 'docs-update', avatar: 'https://avatars.githubusercontent.com/u/1024025?s=40&v=4' },
-    { id: 5, title: 'Mobile App POC', issueNumber: '#12', branch: 'main', avatar: 'https://avatars.githubusercontent.com/u/9919?s=40&v=4' },
-    { id: 6, title: 'E2E Testing Suite', issueNumber: '#76', branch: 'ci/playwright', avatar: 'https://avatars.githubusercontent.com/u/1024025?s=40&v=4' },
-];
+import { useRepoQuery } from '@/hooks/queries/useRepoQuery';
+import { authClient } from '@/lib/auth-client';
 
 export default function GitHubIntegrationPage() {
     const [accounts, setAccounts] = useState<any[]>([]);
     const [searchQuery, setSearchQuery] = useState('');
-    const [isLoading, setIsLoading] = useState(true);
+
+    const { data: repos, isPending, error } = useRepoQuery();
 
     useEffect(() => {
         const fetchAccounts = async () => {
-            await new Promise(resolve => setTimeout(resolve, 1000));
-            setAccounts([{ providerId: 'github', accountId: 'user-123' }]);
-            setIsLoading(false);
-        };
+            try {
+                const { data: accountsList, error } = await authClient.listAccounts();
+                if (accountsList) {
+                    console.log('Accounts:', accountsList);
+                    setAccounts(accountsList);
+                }
+                if (error) {
+                    console.error('Failed to fetch accounts:', error);
+                }
+            } catch (error) {
+                console.error('Failed to fetch accounts:', error);
+            }
+        }
         fetchAccounts();
     }, []);
 
     const isConnected = !!accounts.find(acc => acc.providerId === 'github');
 
     const connectGitHub = async () => {
-        setIsLoading(true);
-        await new Promise(resolve => setTimeout(resolve, 1500));
-        setAccounts([{ providerId: 'github', accountId: 'user-123' }]);
-        setIsLoading(false);
+        await authClient.linkSocial({
+            provider: "github",
+            callbackURL: '/dashboard'
+        })
     };
 
-    const filteredRepos = MOCK_REPOS.filter(repo =>
-        repo.title.toLowerCase().includes(searchQuery.toLowerCase())
+    const filteredRepos = repos?.filter((repo: any) =>
+        repo.name.toLowerCase().includes(searchQuery.toLowerCase())
     );
 
-    if (isLoading) {
+    if (isPending) {
         return <DashboardSkeleton />;
     }
 
@@ -76,7 +79,7 @@ export default function GitHubIntegrationPage() {
 
             {/* --- Repository Grid --- */}
             <div className="overflow-y-auto grid grid-cols-1 md:grid-cols-3 gap-6 pt-6">
-                {filteredRepos.map(repo => (
+                {filteredRepos?.map((repo: any) => (
                     <RepositoryCard key={repo.id} repo={repo} />
                 ))}
             </div>
diff --git a/web/src/features/dashboard/repo-card.tsx b/web/src/features/dashboard/repo-card.tsx
@@ -1,31 +1,81 @@
 import { Button } from "@/components/ui/button";
-import { GitFork, Github, GitPullRequestArrow } from "lucide-react";
+import { GitFork, Star, Lock, Unlock, ExternalLink, BarChart3 } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
+
+interface Repo {
+  name: string;
+  description: string | null;
+  html_url: string;
+  private: boolean;
+  language: string | null;
+  stargazers_count: number;
+  forks_count: number;
+  owner: {
+    avatar_url: string;
+  };
+}
+
+export const RepositoryCard = ({ repo }: { repo: Repo }) => {
+    const handleAnalyze = () => {
+        console.log(`Analyzing repository: ${repo.name}`);
+    };
 
-export const RepositoryCard = ({ repo }: any) => {
     return (
-        <div className="flex h-max flex-col rounded-xl bg-black p-4 border border-zinc-800/80 transition-all duration-300 hover:border-zinc-700">
-            <div className="flex-1">
-                <p className="text-sm text-neutral-400 mb-1">Repository</p>
-                <h3 className="text-md font-semibold text-neutral-100">{repo.title}</h3>
+        <div className="
+            relative flex h-full flex-col rounded-xl p-4 transition-all duration-300
+            bg-white/5 backdrop-blur-lg
+            border border-white/10
+            hover:border-white/20 hover:bg-white/10
+        ">
+            <Link 
+              href={repo.html_url} 
+              target="_blank" 
+              rel="noopener noreferrer" 
+              className="absolute top-4 right-4 text-neutral-500 hover:text-neutral-200 transition-colors"
+              aria-label="Open repository on GitHub"
+            >
+                <ExternalLink className="h-4 w-4" />
+            </Link>
+
+            <div className="flex items-center gap-2 pr-8">
+                <h3 className="text-md font-semibold text-neutral-100 truncate">{repo.name}</h3>
+                {repo.private ? <Lock className="h-3 w-3 text-neutral-500" /> : <Unlock className="h-3 w-3 text-neutral-500" />}
             </div>
+            
+            <p className="text-sm text-neutral-400 mt-1 flex-1">
+                {repo.description || "No description provided."}
+            </p>
+
             <div className="flex items-center justify-between mt-4">
                 <div className="flex items-center gap-4 text-neutral-400 text-sm">
+                    {repo.language && (
+                        <span className="flex items-center gap-1.5 text-xs">
+                            <div className="w-2.5 h-2.5 rounded-full bg-blue-500" />
+                            {repo.language}
+                        </span>
+                    )}
                     <span className="flex items-center gap-1.5 text-xs">
-                      <Github className="h-4 w-4" />{repo.issueNumber}
+                      <Star className="h-4 w-4" />{repo.stargazers_count}
                     </span>
                     <span className="flex items-center gap-1.5 text-xs">
-                      <GitFork className="h-4 w-4" />{repo.branch}
+                      <GitFork className="h-4 w-4" />{repo.forks_count}
                     </span>
                 </div>
                 <div className="flex items-center gap-2">
-                    <Button variant="outline" size="sm" className="bg-zinc-800 hover:bg-zinc-700 text-neutral-200 border-zinc-700 text-xs">
-                        <GitPullRequestArrow className="h-4 w-4 mr-2" />
-                        Open
+                    <Button onClick={handleAnalyze} size="sm" className="cursor-pointer font-semibold text-xs bg-neutral-100 dark:bg-[#1C212D] text-neutral-900 dark:text-blue-400 border border-neutral-200 dark:border-blue-500/20">
+                        <BarChart3 className="h-4 w-4 mr-2" />
+                        Analyze
                     </Button>
-                    <Image src={repo.avatar} alt="User Avatar" width={28} height={28} className="rounded-full" />
+                    <Image 
+                      src={repo.owner.avatar_url} 
+                      alt="Owner Avatar" 
+                      width={28} 
+                      height={28} 
+                      className="rounded-full" 
+                    />
                 </div>
             </div>
         </div>
     );
-};
+};
diff --git a/web/src/hooks/queries/useRepoQuery.ts b/web/src/hooks/queries/useRepoQuery.ts
@@ -0,0 +1,36 @@
+import { authClient } from "@/lib/auth-client";
+import { useQuery } from "@tanstack/react-query";
+import { Octokit } from "@octokit/rest";
+
+const fetchRepos = async () => {
+ 
+  const { data } = await authClient.getAccessToken({
+    providerId: "github",
+  });
+
+  const accessToken = data?.accessToken;
+
+  if (!accessToken) {
+    throw new Error("No access token found");
+  }
+
+  const octokit = new Octokit({ auth: accessToken });
+
+  const repos = await octokit.paginate(
+    octokit.rest.repos.listForAuthenticatedUser,
+    {
+      per_page: 100,
+      sort: "updated",
+      direction: "desc",
+    }
+  );
+
+  return repos;
+};
+
+export const useRepoQuery = () => {
+  return useQuery({
+    queryKey: ["repo"],
+    queryFn: () => fetchRepos(),
+  });
+};
diff --git a/web/src/lib/auth.ts b/web/src/lib/auth.ts
@@ -1,14 +1,14 @@
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { db } from "@/db";
-import * as schema from "@/db/schema/auth"; 
+import * as schema from "@/db/schema/auth";
 
 export const auth = betterAuth({
   account: {
-        accountLinking: {
-            allowDifferentEmails: true,
-            updateUserInfoOnLink: true
-        }
+    accountLinking: {
+      allowDifferentEmails: true,
+      updateUserInfoOnLink: true,
+    },
   },
   database: drizzleAdapter(db, {
     provider: "pg",
@@ -24,6 +24,7 @@ export const auth = betterAuth({
     github: {
       clientId: process.env.GITHUB_CLIENT_ID!,
       clientSecret: process.env.GITHUB_CLIENT_SECRET!,
+      scope: ["repo"]
     },
   },
 });
diff --git a/web/src/providers/app-provider.tsx b/web/src/providers/app-provider.tsx
@@ -2,19 +2,24 @@ import { ClerkProvider } from "@clerk/nextjs";
 import { CopilotKit } from "@copilotkit/react-core";
 import "@copilotkit/react-ui/styles.css";
 import { ThemeProvider } from "next-themes";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryProvider } from "./query-provider";
 
 export const AppProvider = ({ children }: { children: React.ReactNode }) => {
+
     return (
         <ClerkProvider>
             <CopilotKit runtimeUrl="/api/copilotkit" agent="starterAgent">
-                <ThemeProvider
-                    attribute="class"
-                    defaultTheme="dark"
-                    enableSystem
-                    disableTransitionOnChange
-                >
-                    {children}
-                </ThemeProvider>
+                <QueryProvider>
+                    <ThemeProvider
+                        attribute="class"
+                        defaultTheme="dark"
+                        enableSystem
+                        disableTransitionOnChange
+                    >
+                        {children}
+                    </ThemeProvider>
+                </QueryProvider>
             </CopilotKit>
         </ClerkProvider>
     );
diff --git a/web/src/providers/query-provider.tsx b/web/src/providers/query-provider.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+            refetchOnMount: false,
+            refetchOnReconnect: false,
+            staleTime: 1000 * 60 * 5,
+        },
+    },
+})
+
+export const QueryProvider = ({ children }: { children: React.ReactNode }) => {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+}
