daeisbae · daeisbae · Jan 5, 2025 · Jan 5, 2025
diff --git a/src/app/api/queue/route.ts b/src/app/api/queue/route.ts
@@ -0,0 +1,29 @@
+import InsertQueue from "@/service/insert-queue";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+	const insertQueue = InsertQueue.getInstance();
+	const processing = insertQueue.processingItem;
+	const processingTime = insertQueue.processingTime;
+	const queue = insertQueue.queue;
+	if (processing || queue.length > 0) {
+		return NextResponse.json({
+			status: 200,
+			body: {
+				processing,
+				queue,
+				processingTime,
+			},
+		});
+	}
+	if (processing || queue.length == 0) {
+		return NextResponse.json({
+			status: 200,
+			body: {
+				processing,
+				processingTime,
+			},
+		});
+	}
+	return NextResponse.json({ error: "No repositories found" }, { status: 404 });
+}
diff --git a/src/app/get/queue/ProcessingItem.tsx b/src/app/get/queue/ProcessingItem.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import React, { useState, useEffect } from "react";
+
+interface ProcessingItemProps {
+	owner: string;
+	repo: string;
+	createdAt: string;
+}
+
+export default function ProcessingItem({
+	owner,
+	repo,
+	createdAt,
+}: ProcessingItemProps) {
+	const [elapsedTime, setElapsedTime] = useState(
+		calculateElapsedTime(createdAt),
+	);
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setElapsedTime(calculateElapsedTime(createdAt));
+		}, 1000);
+
+		return () => clearInterval(interval);
+	}, [createdAt]);
+
+	return (
+		<div>
+			<Card>
+				<CardHeader>
+					<CardTitle>
+						{owner}/{repo}
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<p className="text-sm text-muted-foreground mb-4">
+						Processing this item for: {elapsedTime}
+					</p>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}
+
+function calculateElapsedTime(createdAt: string): string {
+	const now = Date.now();
+	const createdTime = new Date(createdAt).getTime();
+	const elapsedTime = now - createdTime;
+
+	const seconds = Math.floor(elapsedTime / 1000);
+	const minutes = Math.floor(seconds / 60);
+	const hours = Math.floor(minutes / 60);
+	const days = Math.floor(hours / 24);
+
+	if (days > 0) return `${days} days`;
+	if (hours > 0) return `${hours} hours`;
+	if (minutes > 0) return `${minutes} minutes`;
+	return `${seconds} seconds`;
+}
diff --git a/src/app/get/queue/page.tsx b/src/app/get/queue/page.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { AlertCircle } from 'lucide-react';
+import ProcessingItem from "./ProcessingItem";
+import React from "react";
+
+export default function Page() {
+    const [queue, setQueue] = useState([]);
+    const [processing, setProcessing] = useState(null);
+    const [processingTime, setProcessingTime] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setIsLoading(true);
+            const response = await fetch("/api/queue");
+            if (response.ok) {
+                const { body } = await response.json();
+                setQueue(body.queue || []);
+                setProcessing(body.processing || null);
+                setProcessingTime(body.processingTime || "");
+            }
+            setIsLoading(false);
+        };
+        fetchData();
+    }, []);
+
+    if (isLoading) {
+        return <LoadingSkeleton />;
+    }
+
+    return (
+        <div className="container mx-auto p-4 h-[calc(80vh-2rem)] flex flex-col space-y-4">
+                        <h1>Currently Processing</h1>
+                        {processing ? (
+                            <ProcessingItem owner={processing.owner} repo={processing.repo} createdAt={processingTime} />
+                        ) : (
+                            <div className="flex items-center justify-center h-full text-muted-foreground">
+                                <AlertCircle className="mr-2 h-4 w-4" />
+                                No repository currently being processed
+                            </div>
+                        )}
+
+                        <h1>Queue</h1>
+                        {queue.length > 0 ? (
+                            <ol className="space-y-2 list-decimal list-inside list-numbered">
+                                {queue.map((item, index) => (
+                                    <li key={item.repo} className={`p-0 sm:p-2 rounded-md ${index % 2 === 0 ? 'bg-muted' : ''}`}>
+                                        <div className="flex items-center gap-2">
+                                            <span className="font-medium">{item.owner}/{item.repo}</span>
+                                        </div>
+                                    </li>
+                                ))}
+                            </ol>
+                        ) : (
+                            <div className="flex items-center justify-center h-full text-muted-foreground">
+                                <AlertCircle className="mr-2 h-4 w-4" />
+                                No repositories in the queue
+                            </div>
+                        )}
+        </div>
+    );
+}
+
+function LoadingSkeleton() {
+    return (
+        <div className="container mx-auto p-4 h-[calc(100vh-2rem)] flex flex-col space-y-4">
+            <Card className="h-1/4 min-h-[200px]">
+                <CardHeader>
+                    <Skeleton className="h-8 w-64" />
+                </CardHeader>
+                <CardContent>
+                    <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-full mt-2" />
+                </CardContent>
+            </Card>
+            <Card className="h-3/4">
+                <CardHeader>
+                    <Skeleton className="h-8 w-64" />
+                </CardHeader>
+                <CardContent>
+                    <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-full mt-2" />
+                    <Skeleton className="h-4 w-full mt-2" />
+                </CardContent>
+            </Card>
+        </div>
+    );
+}
+
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -80,6 +80,15 @@ export default function Navbar() {
 								</NavigationMenuLink>
 							</Link>
 						</NavigationMenuItem>
+						<NavigationMenuItem>
+							<Link href="/get/queue" legacyBehavior passHref>
+								<NavigationMenuLink
+									className={cn(navigationMenuTriggerStyle(), "w-28")}
+								>
+									Queue
+								</NavigationMenuLink>
+							</Link>
+						</NavigationMenuItem>
 					</NavigationMenuList>
 				</NavigationMenu>
 
@@ -128,6 +137,11 @@ export default function Navbar() {
 									Add Repo
 								</Link>
 								</SheetClose>
+								<SheetClose asChild>
+								<Link href="/get/queue" className="text-lg font-medium hover:text-primary transition-colors">
+									Queue
+								</Link>
+								</SheetClose>
 							</nav>
 						</SheetContent>
 					</Sheet>

diff --git a/src/service/insert-queue.ts b/src/service/insert-queue.ts
@@ -22,9 +22,10 @@ export default class InsertQueue {
     private _isProcessing: boolean = false
     private _repoService: InsertRepoService
     private _processingItem: InsertItem | null = null
+	private _processingTime: string | null = null
     private static _instance?: InsertQueue
     private _rateLimitBeforeStop: number = 500
-    private _maxQueueSize: number = 10
+    private _maxQueueSize: number = 25
     private _repository: Repository
 
     private constructor() {
@@ -45,6 +46,10 @@ export default class InsertQueue {
 		return this._instance;
 	}
 
+	get queue(): InsertItem[] {
+		return this._queue;
+	}
+
 	/**
 	 * Adds a new item to the queue
 	 */
@@ -102,6 +107,13 @@ export default class InsertQueue {
         return this._processingItem
     }
 
+	/**
+	 * Returns the current processing time in UTC timezone
+	 */
+	get processingTime(): string | null {
+		return this._processingTime
+	}
+
 	/**
 	 * Processes the queue, if rate limit is not reached
 	 * if rate limit is reached, it will wait for the reset time
@@ -132,6 +144,7 @@ export default class InsertQueue {
         item: InsertItem
     ): Promise<RepositoryData | null> {
         console.log(`Processing item: ${item.owner}/${item.repo}`)
+		this._processingTime = new Date().toISOString()
         this._processingItem = item
         let result: RepositoryData | null = null
         try {
@@ -145,6 +158,7 @@ export default class InsertQueue {
         }
 
         this._processingItem = null
+		this._processingTime = null
         return result
     }
 }