Merge pull request #55 from daeisbae/54-modularize-into-components-to-use-react-suspense-for-repository-summarization-view-page

Modularize the components to show loading state (#54) - Repository summarization view page

Author: daeisbae

src/app/[ownerSlug]/[repoSlug]/contents.tsx

@@ -0,0 +1,36 @@
+import { RepoCard } from '@/components/RepoCard'
+import { FetchRepoService } from '@/service/get-db'
+import { MarkdownContent } from '@/components/MarkdownContent'
+import { notFound } from 'next/navigation'
+import { formatToMarkdown } from '@/app/[ownerSlug]/[repoSlug]/formatter'
+
+interface RepositorySummarizationContentProps {
+    owner: string
+    repo: string
+}
+
+export default async function RepositorySummarizationContent({
+    owner,
+    repo,
+}: RepositorySummarizationContentProps) {
+    const fetchRepoService = new FetchRepoService()
+    const repoDetails = await fetchRepoService.getFullRepositoryTree(
+        owner,
+        repo
+    )
+
+    if (!repoDetails) {
+        notFound()
+    }
+
+    return (
+        <>
+            <div className="flex-1">
+                <MarkdownContent content={formatToMarkdown(repoDetails)} />
+            </div>
+            <div className="w-[300px]">
+                <RepoCard repoInfo={repoDetails.repository} />
+            </div>
+        </>
+    )
+}

src/app/[ownerSlug]/[repoSlug]/page.tsx

@@ -1,42 +1,26 @@
 import { JSX, Suspense } from 'react'
-import { RepoCard } from '@/components/RepoCard'
-import { FetchRepoService } from '@/service/get-db'
-import { MarkdownContent } from '@/components/MarkdownContent'
-import { notFound } from 'next/navigation'
-import { formatToMarkdown } from '@/app/[ownerSlug]/[repoSlug]/formatter'
 import Loading from '@/app/[ownerSlug]/[repoSlug]/loading'
+import RepositorySummarizationContent from '@/app/[ownerSlug]/[repoSlug]/contents';
 
-// Define the correct page props type for Next.js 13+
 interface PageProps {
     params: Promise<{ ownerSlug: string; repoSlug: string }>
 }
 
-// Main page component
 export default async function Page({
     params,
 }: PageProps): Promise<JSX.Element> {
     const { ownerSlug, repoSlug } = await params
 
-    const fetchRepoService = new FetchRepoService()
-    const repoDetails = await fetchRepoService.getFullRepositoryTree(
-        ownerSlug,
-        repoSlug
-    )
 
-    if (!repoDetails) {
-        notFound()
-    }
 
     return (
         <div className="flex gap-6 p-6">
             <Suspense fallback={<Loading />}>
-                <div className="flex-1">
-                    <MarkdownContent content={formatToMarkdown(repoDetails)} />
-                </div>
-                <div className="w-[300px]">
-                    <RepoCard repoInfo={repoDetails.repository} />
-                </div>
-            </Suspense>
+                <RepositorySummarizationContent
+                    owner={ownerSlug}
+                    repo={repoSlug}
+                    />
+            </ Suspense>
         </div>
     )
 }