Code refactoring - app/get/repositories (#161)

Author: daeisbae

src/app/get/repositories/ListAvailableWiki.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import React, {JSX, useEffect, useState } from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import Link from "next/link";
+import { GitFork, Star } from "lucide-react";
+
+export default function RepositoryList() {
+	const [repositories, setRepositories] = useState<Repository[]>([]);
+
+	useEffect(() => {
+		const fetchRepos = async () => {
+			const response = await fetch("/api/repository");
+			if (!response.ok) {
+				return;
+			}
+			const data = await response.json();
+			setRepositories(data);
+		};
+		fetchRepos();
+	}, []);
+
+	return (
+		<div>
+			{repositories.map((repository) => (
+				<AvailableRepositoryCard key={repository.url} repository={repository} />
+			))}
+		</div>
+	)
+}
+
+interface Repository {
+	owner: string
+	repo: string
+	description: string
+	stars: number
+	forks: number
+	url: string
+}
+interface RepositoryProps {
+	repository: Repository
+}
+
+export function AvailableRepositoryCard({ repository }: RepositoryProps): JSX.Element {
+	// @ts-ignore
+	return (
+		<div key={repository.url} className="p-1">
+			<Link href={`/${repository.owner}/${repository.repo}`}>
+				<Card>
+					<CardHeader>
+						<CardTitle>
+							{repository.owner}/{repository.repo}
+						</CardTitle>
+						<CardDescription>{repository.description}</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<div className="flex items-center gap-4 mb-4">
+							<div className="flex items-center">
+								<Star className="w-4 h-4 mr-1" />
+								<span>{repository.stars}</span>
+							</div>
+							<div className="flex items-center">
+								<GitFork className="w-4 h-4 mr-1" />
+								<span>{repository.forks}</span>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</Link>
+		</div>
+	);
+}

src/app/get/repositories/RepositoryList.tsx

@@ -1,13 +1,14 @@
-'use client'
 import React, { Suspense } from 'react'
 import Loading from '@/app/get/repositories/loading'
-import ListAvailableWiki from '@/app/get/repositories/ListAvailableWiki'
+import RepositoryList from '@/app/get/repositories/RepositoryList'
 
 export default function Page() {
     return (
         <div>
             <h1 className="text-3xl font-bold p-4 text-center" >Available Wiki Pages</h1>
-                <ListAvailableWiki />
+            <Suspense fallback={<Loading />}>
+                <RepositoryList />
+            </Suspense>
         </div>
     )
 }