✨ redirecionando para o artigo com o slug

Author: PaoloProdossimoLopes

package-lock.json

@@ -13,10 +13,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.6.0",
-    "@next/font": "^14.2.4",
     "@sanity/client": "^6.20.1",
-    "@sanity/image-url": "^1.0.2",
-    "@sanity/vision": "^3.47.1",
     "@types/node": "20.14.5",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
@@ -38,7 +35,6 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.44.1",
-    "@rocketseat/eslint-config": "^2.2.2",
-    "@types/lodash.debounce": "^4.0.9"
+    "@rocketseat/eslint-config": "^2.2.2"
   }
 }

package.json

@@ -3,7 +3,7 @@ export interface Article {
   imageUrl: string
   title: string
   slug: string
-  excerpt: string
+  description: string
   author: string
   createdAt: string
 }

src/app/artigos/Article.ts

@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import Link from 'next/link'
 import { Article } from './Article'
 
 interface ArticleCardProps {
@@ -7,19 +8,23 @@ interface ArticleCardProps {
 
 export function ArticleCard(props: ArticleCardProps) {
   return (
-    <div className="cursor-pointer col-span-1 hover:bg-gray-700 transition-all p-2 rounded-lg hover:scale-105">
+    <Link
+      href={`artigos/${props.article.slug}`}
+      className="cursor-pointer col-span-1 hover:bg-gray-700 transition-all p-2 rounded-lg hover:scale-105"
+    >
       <Image
         alt={`capa do artigo ${props.article.title}`}
         src={props.article.imageUrl}
+        priority={true}
         height={400}
         width={500}
         className="rounded-md overflow-hidden object-cover h-24 line-clamp-2"
       />
       <h2 className="font-bold text-lg mt-2">{props.article.title}</h2>
-      <p className="line-clamp-3 text-gray-400">{props.article.excerpt}</p>
+      <p className="line-clamp-3 text-gray-400">{props.article.description}</p>
       <p className="text-sm text-gray-400 mt-2">
         {props.article.author} | {props.article.createdAt}
       </p>
-    </div>
+    </Link>
   )
 }

src/app/artigos/ArticleCard.tsx

@@ -0,0 +1,5 @@
+import { Article } from './Article'
+
+export interface ArticlesRepository {
+  findMany(): Promise<Article[]>
+}

src/app/artigos/ArticlesRepository.ts

@@ -0,0 +1,55 @@
+import { client } from 'programou/utils/sanity/client'
+import { z } from 'zod'
+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(),
+      }),
+    )
+    const CONTENT_QUERY = `*[_type == "post"] {
+        ...,
+        author->,
+        mainImage {
+          ...,
+          asset->
+        },
+        categories[]->,
+        body
+      }
+      `
+    const contentResponse = await client.fetch(CONTENT_QUERY)
+    console.log(contentResponse)
+    const articlesResponse = articleResponseSchema.parse(contentResponse)
+    return articlesResponse.map((article) => {
+      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
+    })
+  }
+}

src/app/artigos/SanityArticlesRepository.ts

@@ -0,0 +1,13 @@
+interface ArticlePageProps {
+  params: {
+    slug: string
+  }
+}
+
+export default function ArticlePage(props: ArticlePageProps) {
+  return (
+    <div>
+      <h1>{props.params.slug}</h1>
+    </div>
+  )
+}

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

@@ -1,85 +1,38 @@
 'use client'
 
-import { client } from 'programou/utils/sanity/client'
-import { useState } from 'react'
-import { z } from 'zod'
+import { useEffect, useState } from 'react'
 import { Article } from './Article'
 import { ArticleList } from './ArticleList'
 import { EmptyState } from './EmptyState'
+import { SanityArticlesRepository } from './SanityArticlesRepository'
 import { SeachInputField, SearchForm } from './SeachInputField'
 
-interface ArticlesRepository {
-  findMany(): Promise<Article[]>
-}
-
-class SanityArticlesRepository implements ArticlesRepository {
-  async findMany(): Promise<Article[]> {
-    const articleResponseSchema = z.array(
-      z.object({
-        title: 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(),
-      }),
-    )
-    const CONTENT_QUERY = `*[_type == "post"] {
-      ...,
-      author->,
-      mainImage {
-        ...,
-        asset->
-      },
-      categories[]->,
-      body
-    }
-    `
-    const contentResponse = await client.fetch(CONTENT_QUERY)
-    const articlesResponse = articleResponseSchema.parse(contentResponse)
-    return articlesResponse.map((article) => {
-      return {
-        id: article.slug.current,
-        title: article.title,
-        excerpt: article.title.substring(0, 40).concat('...'),
-        author: article.author.name,
-        createdAt: article.publishedAt,
-        imageUrl: 'https://cdn.sanity.io/'.concat(article.mainImage.asset.path),
-        slug: article.slug.current,
-      } as Article
-    })
-  }
-}
-
 const articlesRepository = new SanityArticlesRepository()
 
 export default function ArticlePage() {
   const [allArticles, setAllArticles] = useState<Article[]>([])
   const [articles, setArticles] = useState(allArticles)
 
-  articlesRepository.findMany().then((articles) => {
-    setAllArticles(articles)
-    setArticles(articles)
-  })
+  useEffect(() => {
+    articlesRepository.findMany().then((articles) => {
+      setAllArticles(articles)
+      setArticles(articles)
+    })
+  }, [setAllArticles, setArticles])
 
   function submitActionHandler(search: SearchForm) {
     if (search.query.length === 0) {
       setArticles(allArticles)
     } else {
       setArticles(
-        allArticles.filter(
-          (article) =>
-            article.title.includes(search.query) ||
-            article.excerpt.includes(search.query) ||
-            article.author.includes(search.query),
-        ),
+        allArticles.filter((article) => {
+          const searchLower = search.query.toLowerCase()
+          return (
+            article.title.toLowerCase().includes(searchLower) ||
+            article.description.toLowerCase().includes(searchLower) ||
+            article.author.toLowerCase().includes(searchLower)
+          )
+        }),
       )
     }
   }

src/app/artigos/page.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './globals.css'
 
 // eslint-disable-next-line camelcase