✨ melhorando o carregamento da pagina com ssr

Author: PaoloProdossimoLopes

.env.example

@@ -0,0 +1,3 @@
+SANITY_PROJECT_ID= #string
+SANITY_DATA_SET= #string
+SANITY_USE_CDN= #boolean

package-lock.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.6.0",
+    "@portabletext/react": "^3.1.0",
     "@sanity/client": "^6.20.1",
     "@types/node": "20.14.5",
     "@types/react": "18.3.3",

package.json

@@ -6,4 +6,6 @@ export interface Article {
   description: string
   author: string
   createdAt: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  body: any
 }

src/app/artigos/Article.ts

@@ -0,0 +1,60 @@
+'use client'
+
+import { useState } from 'react'
+import { Article } from './Article'
+import { ArticleList } from './ArticleList'
+import { EmptyState } from './EmptyState'
+import { SeachInputField, SearchForm } from './SeachInputField'
+
+interface ArticlesContentProps {
+  articles: Article[]
+}
+
+export function ArticlesContent(props: ArticlesContentProps) {
+  const { articles: allArticles } = props
+  const [articles, setArticles] = useState(allArticles)
+
+  function submitActionHandler(search: SearchForm) {
+    if (search.query.length === 0) {
+      setArticles(allArticles)
+    } else {
+      setArticles(
+        allArticles.filter((article) => {
+          const searchLower = search.query.toLowerCase()
+          return (
+            article.title.toLowerCase().includes(searchLower) ||
+            article.description.toLowerCase().includes(searchLower) ||
+            article.author.toLowerCase().includes(searchLower)
+          )
+        }),
+      )
+    }
+  }
+
+  function ListStateManager() {
+    if (articles.length === 0) {
+      return <EmptyState />
+    }
+
+    return <ArticleList articles={articles} />
+  }
+
+  return (
+    <>
+      <div className="text-center grid gap-6 max-w-md mx-auto">
+        <h2 className="font-bold text-4xl">Nossos artigos</h2>
+        <p className="max-sm:mx-4">
+          Aqui você econtra nossos artigos, onde trazemos os conhecimentos, para
+          a comunidade.
+        </p>
+        <SeachInputField onSubmit={submitActionHandler} />
+      </div>
+
+      <div className="h-[2px] bg-gray-600 mx-2 my-6" />
+
+      <div className="mt-16">
+        <ListStateManager />
+      </div>
+    </>
+  )
+}

src/app/artigos/ArticlesContent.tsx

@@ -19,11 +19,12 @@ export class SanityArticlesRepository implements ArticlesRepository {
       current: z.string(),
     }),
     publishedAt: z.string(),
+    body: z.any(),
   })
 
   async findMany(): Promise<Article[]> {
-    const articleResponseSchema = z.array(this.articleSchema)
-    const CONTENT_QUERY = `*[_type == "post"] {
+    const articlesSchema = z.array(this.articleSchema)
+    const query = `*[_type == "post"] {
         ...,
         author->,
         mainImage {
@@ -34,23 +35,9 @@ export class SanityArticlesRepository implements ArticlesRepository {
         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
-    })
+    const contentResponse = await client.fetch(query)
+    const articlesResponse = articlesSchema.parse(contentResponse)
+    return articlesResponse.map(this.map)
   }
 
   async findBySlug(slug: string) {
@@ -65,27 +52,24 @@ export class SanityArticlesRepository implements ArticlesRepository {
         body
     }`
 
-    const params = { slug }
+    const contentResponse = await client.fetch(query, { slug })
+    const article = this.articleSchema.parse(contentResponse)
+    return this.map(article)
+  }
 
-    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
+  private map(article: z.infer<typeof this.articleSchema>) {
+    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,
+      body: article.body,
     }
   }
 }

src/app/artigos/SanityArticlesRepository.ts

@@ -1,6 +1,10 @@
 import Image from 'next/image'
 import { articlesRepository } from '../SanityArticlesRepository'
 
+import { PortableText } from '@portabletext/react'
+import { ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
+
 interface ArticlePageProps {
   params: {
     slug: string
@@ -13,16 +17,23 @@ export default async function ArticlePage(props: ArticlePageProps) {
   if (!article) return <div>Not found</div>
 
   return (
-    <div className="max-w-4xl mx-auto mt-8 max-md:mx-4">
+    <div className="max-w-4xl mx-auto mt-8 max-md:mx-4 grid gap-2">
+      <Link
+        href="/artigos"
+        className="flex gap-2 items-center py-2 cursor-pointer"
+      >
+        <ArrowLeft /> Voltar
+      </Link>
       <div className="grid items-center gap-4">
         <Image
-          width={2200}
-          height={120}
+          width={1200}
+          height={80}
           src={article.imageUrl}
           alt=""
           className="rounded-3xl"
         />
         <h1 className="font-bold text-3xl">{article.title}</h1>
+        <PortableText value={article.body} />
       </div>
     </div>
   )

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

@@ -1,60 +1,12 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { Article } from './Article'
-import { ArticleList } from './ArticleList'
-import { EmptyState } from './EmptyState'
+import { ArticlesContent } from './ArticlesContent'
 import { articlesRepository } from './SanityArticlesRepository'
-import { SeachInputField, SearchForm } from './SeachInputField'
-
-export default function ArticlePage() {
-  const [allArticles, setAllArticles] = useState<Article[]>([])
-  const [articles, setArticles] = useState(allArticles)
-
-  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) => {
-          const searchLower = search.query.toLowerCase()
-          return (
-            article.title.toLowerCase().includes(searchLower) ||
-            article.description.toLowerCase().includes(searchLower) ||
-            article.author.toLowerCase().includes(searchLower)
-          )
-        }),
-      )
-    }
-  }
+export default async function ArticlePage() {
+  const articles = await articlesRepository.findMany()
 
   return (
     <div className="my-12 md:px-8">
-      <div className="text-center grid gap-6 max-w-md mx-auto">
-        <h2 className="font-bold text-4xl">Nossos artigos</h2>
-        <p className="max-sm:mx-4">
-          Aqui você econtra nossos artigos, onde trazemos os conhecimentos, para
-          a comunidade.
-        </p>
-        <SeachInputField onSubmit={submitActionHandler} />
-      </div>
-
-      <div className="h-[2px] bg-gray-600 mx-2 my-6" />
-
-      <div className="mt-16">
-        {articles.length === 0 ? (
-          <EmptyState />
-        ) : (
-          <ArticleList articles={articles} />
-        )}
-      </div>
+      <ArticlesContent articles={articles} />
     </div>
   )
 }

src/app/artigos/page.tsx

@@ -1,9 +1,8 @@
 import { createClient } from '@sanity/client'
 
 export const client = createClient({
-  projectId: 'y8jhl6zw',
-  dataset: 'production',
+  projectId: process.env.SANITY_PROJECT_ID,
+  dataset: process.env.SANITY_DATA_SET,
   apiVersion: '2024-03-11',
-  // Set to `true` for production environments
-  useCdn: false,
+  useCdn: process.env.SANITY_USE_CDN === 'true',
 })