yusufipek/RepoHub
1
0
Fork 0
mirror of https://github.com/yusufipk/RepoHub.git synced 2026-09-11 18:46:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement request cancellation for package fetching using AbortController in PackageBrowserV2 and update API client to support it.

Browse Source
This commit is contained in:
Yusuf İpek
2025-11-24 03:08:13 +03:00
parent 0e4716db54
commit d15e1c526e
3 changed files with 98 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PackageBrowserV2.tsx
+40 -29
View File
@@ -42,6 +42,8 @@ export function PackageBrowserV2({
// Load packages when platform changes // Load packages when platform changes
useEffect(() => { useEffect(() => {
const controller = new AbortController()
const loadPackages = async () => { const loadPackages = async () => {
if (!selectedPlatform) { if (!selectedPlatform) {
setPackages([]) setPackages([])
@@ -73,7 +75,7 @@ export function PackageBrowserV2({
} }
console.log('🔍 Frontend: API params:', params) console.log('🔍 Frontend: API params:', params)
const result = await apiClient.getPackages(params) const result = await apiClient.getPackages(params, controller.signal)
console.log('📦 Frontend: Received initial packages:', { console.log('📦 Frontend: Received initial packages:', {
total: result.total, total: result.total,
packageCount: result.packages.length, packageCount: result.packages.length,
@@ -83,14 +85,24 @@ export function PackageBrowserV2({
setTotalCount(result.total) setTotalCount(result.total)
setHasMore(result.packages.length < result.total) setHasMore(result.packages.length < result.total)
} catch (error) { } catch (error) {
if (error instanceof Error && error.name === 'AbortError') {
console.log('Request aborted')
return
}
console.error('Failed to load packages:', error) console.error('Failed to load packages:', error)
setPackages([]) setPackages([])
} finally { } finally {
setLoading(false) if (!controller.signal.aborted) {
setLoading(false)
}
} }
} }
loadPackages() loadPackages()
return () => {
controller.abort()
}
}, [selectedPlatform, typeFilter, repositoryFilter, isDebianUbuntu, isArch]) }, [selectedPlatform, typeFilter, repositoryFilter, isDebianUbuntu, isArch])
// Debounced search to prevent focus loss // Debounced search to prevent focus loss
@@ -256,30 +268,30 @@ export function PackageBrowserV2({
</div> </div>
{/* Type Filter (Debian/Ubuntu only) */} {/* Type Filter (Debian/Ubuntu only) */}
{isDebianUbuntu && ( {isDebianUbuntu && (
<Select value={typeFilter || "all"} onValueChange={(value) => setTypeFilter(value === "all" ? "" : value)}> <Select value={typeFilter || "all"} onValueChange={(value) => setTypeFilter(value === "all" ? "" : value)}>
<SelectTrigger className="w-full sm:w-40"> <SelectTrigger className="w-full sm:w-40">
<SelectValue placeholder="Type" /> <SelectValue placeholder="Type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">All Types</SelectItem> <SelectItem value="all">All Types</SelectItem>
<SelectItem value="gui">GUI</SelectItem> <SelectItem value="gui">GUI</SelectItem>
<SelectItem value="cli">CLI</SelectItem> <SelectItem value="cli">CLI</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
)} )}
{isArch && ( {isArch && (
<Select value={repositoryFilter || "all"} onValueChange={(value) => setRepositoryFilter(value === "all" ? "" : value)}> <Select value={repositoryFilter || "all"} onValueChange={(value) => setRepositoryFilter(value === "all" ? "" : value)}>
<SelectTrigger className="w-full sm:w-40"> <SelectTrigger className="w-full sm:w-40">
<SelectValue placeholder="Repository" /> <SelectValue placeholder="Repository" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">All</SelectItem> <SelectItem value="all">All</SelectItem>
<SelectItem value="official">Official</SelectItem> <SelectItem value="official">Official</SelectItem>
<SelectItem value="aur">AUR</SelectItem> <SelectItem value="aur">AUR</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
)} )}
</div> </div>
{/* Package List */} {/* Package List */}
@@ -303,11 +315,10 @@ export function PackageBrowserV2({
packages.map((pkg) => ( packages.map((pkg) => (
<div <div
key={pkg.id} key={pkg.id}
className={`flex items-start space-x-3 p-3 rounded-lg border transition-colors cursor-pointer ${ className={`flex items-start space-x-3 p-3 rounded-lg border transition-colors cursor-pointer ${isPackageSelected(pkg)
isPackageSelected(pkg)
? 'border-primary bg-primary/5' ? 'border-primary bg-primary/5'
: 'border-border hover:bg-secondary/50' : 'border-border hover:bg-secondary/50'
}`} }`}
onClick={() => onPackageToggle(pkg)} onClick={() => onPackageToggle(pkg)}
> >
<Checkbox <Checkbox
src/lib/api/client.ts
+5 -3
View File
@@ -6,7 +6,7 @@ import {
const API_BASE_URL = const API_BASE_URL =
process.env.NEXT_PUBLIC_API_URL && process.env.NEXT_PUBLIC_API_URL &&
process.env.NEXT_PUBLIC_API_URL.trim() !== "" process.env.NEXT_PUBLIC_API_URL.trim() !== ""
? process.env.NEXT_PUBLIC_API_URL.replace(/\/$/, "") ? process.env.NEXT_PUBLIC_API_URL.replace(/\/$/, "")
: "/api"; : "/api";
@@ -47,7 +47,8 @@ class ApiClient {
// Package operations // Package operations
async getPackages( async getPackages(
filters: FilterOptions = {} filters: FilterOptions = {},
signal?: AbortSignal
): Promise<{ packages: Package[]; total: number }> { ): Promise<{ packages: Package[]; total: number }> {
const params = new URLSearchParams(); const params = new URLSearchParams();
@@ -64,7 +65,8 @@ class ApiClient {
const query = params.toString() ? `?${params.toString()}` : ""; const query = params.toString() ? `?${params.toString()}` : "";
return this.request<{ packages: Package[]; total: number }>( return this.request<{ packages: Package[]; total: number }>(
`/packages${query}` `/packages${query}`,
{ signal }
); );
} }
src/services/archPackageFetcher.ts
+1 -19
View File
@@ -7,25 +7,7 @@ interface ArchPackage {
lastUpdated: string lastUpdated: string
} }
// Simple HTML parser without external dependencies
function parseHTML(html: string) {
return {
querySelector: (selector: string) => {
const regex = new RegExp(`<${selector}[^>]*>([\\s\\S]*?)<\\/${selector}>`, 'gi')
const match = regex.exec(html)
return match ? { textContent: match[1].replace(/<[^>]*>/g, '').trim() } : null
},
querySelectorAll: (selector: string) => {
const results: any[] = []
const regex = new RegExp(`<${selector}[^>]*>([\\s\\S]*?)<\\/${selector}>`, 'gi')
let match
while ((match = regex.exec(html)) !== null) {
results.push({ innerHTML: match[1], textContent: match[1].replace(/<[^>]*>/g, '').trim() })
}
return results
}
}
}
export class ArchPackageFetcher { export class ArchPackageFetcher {
private baseUrl = 'https://archlinux.org/packages' private baseUrl = 'https://archlinux.org/packages'