✨ carregando os dados da pagina

Author: PaoloProdossimoLopes

src/app/artigos/ArticlesRepository.ts

@@ -2,4 +2,5 @@ import { Article } from './Article'
 
 export interface ArticlesRepository {
   findMany(): Promise<Article[]>
+  findBySlug(slug: string): Promise<Article | null>
 }

src/app/artigos/SanityArticlesRepository.ts

@@ -4,25 +4,25 @@ import { Article } from './Article'
 import { ArticlesRepository } from './ArticlesRepository'
 
 export class SanityArticlesRepository implements ArticlesRepository {
-  async findMany(): Promise<Article[]> {
-    const articleResponseSchema = z.array(
-      z.object({
-        title: z.string(),
-        description: z.string(),
-        author: z.object({
-          name: z.string(),
-        }),
-        mainImage: z.object({
-          asset: z.object({
-            path: z.string(),
-          }),
-        }),
-        slug: z.object({
-          current: z.string(),
-        }),
-        publishedAt: z.string(),
+  private readonly articleSchema = z.object({
+    title: z.string(),
+    description: z.string(),
+    author: z.object({
+      name: z.string(),
+    }),
+    mainImage: z.object({
+      asset: z.object({
+        path: z.string(),
       }),
-    )
+    }),
+    slug: z.object({
+      current: z.string(),
+    }),
+    publishedAt: z.string(),
+  })
+
+  async findMany(): Promise<Article[]> {
+    const articleResponseSchema = z.array(this.articleSchema)
     const CONTENT_QUERY = `*[_type == "post"] {
         ...,
         author->,
@@ -52,4 +52,42 @@ export class SanityArticlesRepository implements ArticlesRepository {
       } as Article
     })
   }
+
+  async findBySlug(slug: string) {
+    const query = `*[_type == "post" && slug.current == $slug][0] {
+      ...,
+        author->,
+        mainImage {
+          ...,
+          asset->
+        },
+        categories[]->,
+        body
+    }`
+
+    const params = { slug }
+
+    try {
+      const contentResponse = await client.fetch(query, params)
+      console.log('Artigo:', contentResponse)
+      const article = this.articleSchema.parse(contentResponse)
+      return {
+        id: article.slug.current,
+        title: article.title,
+        description:
+          article.description.length > 120
+            ? article.description.substring(0, 120).concat('...')
+            : article.description,
+        author: article.author.name,
+        createdAt: article.publishedAt,
+        imageUrl: 'https://cdn.sanity.io/'.concat(article.mainImage.asset.path),
+        slug: article.slug.current,
+      } as Article
+    } catch (error) {
+      console.error('Erro ao buscar artigo:', error)
+      return null
+    }
+  }
 }
+
+export const articlesRepository = new SanityArticlesRepository()

src/app/artigos/[slug]/page.tsx

@@ -1,13 +1,29 @@
+import Image from 'next/image'
+import { articlesRepository } from '../SanityArticlesRepository'
+
 interface ArticlePageProps {
   params: {
     slug: string
   }
 }
 
-export default function ArticlePage(props: ArticlePageProps) {
+export default async function ArticlePage(props: ArticlePageProps) {
+  const article = await articlesRepository.findBySlug(props.params.slug)
+
+  if (!article) return <div>Not found</div>
+
   return (
-    <div>
-      <h1>{props.params.slug}</h1>
+    <div className="max-w-4xl mx-auto mt-8 max-md:mx-4">
+      <div className="grid items-center gap-4">
+        <Image
+          width={2200}
+          height={120}
+          src={article.imageUrl}
+          alt=""
+          className="rounded-3xl"
+        />
+        <h1 className="font-bold text-3xl">{article.title}</h1>
+      </div>
     </div>
   )
 }

src/app/artigos/page.tsx

@@ -4,11 +4,9 @@ import { useEffect, useState } from 'react'
 import { Article } from './Article'
 import { ArticleList } from './ArticleList'
 import { EmptyState } from './EmptyState'
-import { SanityArticlesRepository } from './SanityArticlesRepository'
+import { articlesRepository } from './SanityArticlesRepository'
 import { SeachInputField, SearchForm } from './SeachInputField'
 
-const articlesRepository = new SanityArticlesRepository()
-
 export default function ArticlePage() {
   const [allArticles, setAllArticles] = useState<Article[]>([])
   const [articles, setArticles] = useState(allArticles)