Skip to content

Commit 589e5db

Browse files
PaoloProdossimoLopesPaoloProdossimoLopes
committed
✨ aconectando com o sanity
1 parent b99b332 commit 589e5db

File tree

7 files changed

+94
-209
lines changed

7 files changed

+94
-209
lines changed

‎Dockerfile‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎docker-compose.yml‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎next.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const nextConfig = {
44
remotePatterns: [
55
{
66
protocol: 'https',
7-
hostname: 'images.unsplash.com',
7+
hostname: 'cdn.sanity.io',
88
port: '',
99
pathname: '/**',
1010
},

‎package.json‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "1.1.0",
44
"private": true,
55
"scripts": {
6-
"dev": "next dev",
6+
"dev": "next dev -p 3333",
77
"build": "next build",
88
"start": "next start",
99
"lint": "next lint",
@@ -13,28 +13,32 @@
1313
},
1414
"dependencies": {
1515
"@hookform/resolvers": "^3.6.0",
16-
"@next/font": "^13.4.1",
17-
"@types/node": "20.1.0",
18-
"@types/react": "18.2.6",
19-
"@types/react-dom": "18.2.4",
20-
"autoprefixer": "10.4.14",
21-
"eslint": "8.40.0",
22-
"eslint-config-next": "13.4.1",
23-
"lodash.debounce": "^4.0.8",
24-
"lucide-react": "^0.383.0",
25-
"next": "13.4.1",
26-
"postcss": "8.4.23",
27-
"react": "18.2.0",
28-
"react-dom": "18.2.0",
16+
"@next/font": "^14.2.4",
17+
"@sanity/client": "^6.20.1",
18+
"@sanity/image-url": "^1.0.2",
19+
"@sanity/vision": "^3.47.1",
20+
"@types/node": "20.14.5",
21+
"@types/react": "18.3.3",
22+
"@types/react-dom": "18.3.0",
23+
"autoprefixer": "10.4.19",
24+
"eslint": "8.0.0",
25+
"eslint-config-next": "14.2.4",
26+
"lucide-react": "^0.395.0",
27+
"next": "14.2.4",
28+
"postcss": "8.4.38",
29+
"react": "18.3.1",
30+
"react-dom": "18.3.1",
2931
"react-hook-form": "^7.52.0",
30-
"react-icons": "^4.8.0",
31-
"tailwindcss": "3.3.2",
32-
"typescript": "5.0.4",
32+
"react-icons": "^5.2.1",
33+
"sanity": "^3.47.1",
34+
"styled-components": "^6.1.11",
35+
"tailwindcss": "3.4.4",
36+
"typescript": "5.4.5",
3337
"zod": "^3.23.8"
3438
},
3539
"devDependencies": {
3640
"@playwright/test": "^1.44.1",
37-
"@rocketseat/eslint-config": "^1.2.0",
41+
"@rocketseat/eslint-config": "^2.2.2",
3842
"@types/lodash.debounce": "^4.0.9"
3943
}
4044
}

‎src/app/artigos/page.tsx‎

Lines changed: 61 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,74 @@
11
'use client'
22

3+
import { client } from 'programou/utils/sanity/client'
34
import { useState } from 'react'
5+
import { z } from 'zod'
6+
import { Article } from './Article'
47
import { ArticleList } from './ArticleList'
58
import { EmptyState } from './EmptyState'
69
import { SeachInputField, SearchForm } from './SeachInputField'
710

11+
interface ArticlesRepository {
12+
findMany(): Promise<Article[]>
13+
}
14+
15+
class SanityArticlesRepository implements ArticlesRepository {
16+
async findMany(): Promise<Article[]> {
17+
const articleResponseSchema = z.array(
18+
z.object({
19+
title: z.string(),
20+
author: z.object({
21+
name: z.string(),
22+
}),
23+
mainImage: z.object({
24+
asset: z.object({
25+
path: z.string(),
26+
}),
27+
}),
28+
slug: z.object({
29+
current: z.string(),
30+
}),
31+
publishedAt: z.string(),
32+
}),
33+
)
34+
const CONTENT_QUERY = `*[_type == "post"] {
35+
...,
36+
author->,
37+
mainImage {
38+
...,
39+
asset->
40+
},
41+
categories[]->,
42+
body
43+
}
44+
`
45+
const contentResponse = await client.fetch(CONTENT_QUERY)
46+
const articlesResponse = articleResponseSchema.parse(contentResponse)
47+
return articlesResponse.map((article) => {
48+
return {
49+
id: article.slug.current,
50+
title: article.title,
51+
excerpt: article.title.substring(0, 40).concat('...'),
52+
author: article.author.name,
53+
createdAt: article.publishedAt,
54+
imageUrl: 'https://cdn.sanity.io/'.concat(article.mainImage.asset.path),
55+
slug: article.slug.current,
56+
} as Article
57+
})
58+
}
59+
}
60+
61+
const articlesRepository = new SanityArticlesRepository()
62+
863
export default function ArticlePage() {
9-
const allArticles = [
10-
{
11-
id: '1',
12-
imageUrl:
13-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
14-
title: 'How to create a complete component using view code for Swift',
15-
slug: 'article-1',
16-
excerpt:
17-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
18-
author: 'Paolo Prodossimo Lopes',
19-
createdAt: '10 Apr 2024',
20-
},
21-
{
22-
id: '2',
23-
imageUrl:
24-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
25-
title: 'How to create a complete component using view code for Swift',
26-
slug: 'article-2',
27-
excerpt:
28-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
29-
author: 'Paolo Prodossimo Lopes',
30-
createdAt: '10 Apr 2024',
31-
},
32-
{
33-
id: '3',
34-
imageUrl:
35-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
36-
title: 'How to create a complete component using view code for Swift',
37-
slug: 'article-3',
38-
excerpt:
39-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
40-
author: 'Paolo Prodossimo Lopes',
41-
createdAt: '10 Apr 2024',
42-
},
43-
{
44-
id: '4',
45-
imageUrl:
46-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
47-
title: 'How to create a complete component using view code for Swift',
48-
slug: 'article-1',
49-
excerpt:
50-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
51-
author: 'Paolo Prodossimo Lopes',
52-
createdAt: '10 Apr 2024',
53-
},
54-
{
55-
id: '5',
56-
imageUrl:
57-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
58-
title: 'How to create a complete component using view code for Swift',
59-
slug: 'article-2',
60-
excerpt:
61-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
62-
author: 'Paolo Prodossimo Lopes',
63-
createdAt: '10 Apr 2024',
64-
},
65-
{
66-
id: '6',
67-
imageUrl:
68-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
69-
title: 'How to create a complete component using view code for Swift 2',
70-
slug: 'article-3',
71-
excerpt:
72-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
73-
author: 'Paolo Prodossimo Lopes',
74-
createdAt: '10 Apr 2024',
75-
},
76-
{
77-
id: '7',
78-
imageUrl:
79-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
80-
title: 'How to create a complete component using view code for Swift 1',
81-
slug: 'article-1',
82-
excerpt:
83-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
84-
author: 'Paolo Prodossimo Lopes',
85-
createdAt: '10 Apr 2024',
86-
},
87-
{
88-
id: '8',
89-
imageUrl:
90-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
91-
title: 'How to create a complete component using view code for Swift 3',
92-
slug: 'article-2',
93-
excerpt:
94-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
95-
author: 'Paolo Prodossimo Lopes',
96-
createdAt: '10 Apr 2024',
97-
},
98-
{
99-
id: '9',
100-
imageUrl:
101-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
102-
title: 'How to create a complete component using view code for Swift',
103-
slug: 'article-3',
104-
excerpt:
105-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
106-
author: 'Paolo Prodossimo Lopes',
107-
createdAt: '10 Apr 2024',
108-
},
109-
{
110-
id: '10',
111-
imageUrl:
112-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
113-
title: 'How to create a complete component using view code for Swift',
114-
slug: 'article-1',
115-
excerpt:
116-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
117-
author: 'Paolo Prodossimo Lopes',
118-
createdAt: '10 Apr 2024',
119-
},
120-
{
121-
id: '11',
122-
imageUrl:
123-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
124-
title: 'How to create a complete component using view code for Swift',
125-
slug: 'article-2',
126-
excerpt:
127-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
128-
author: 'Paolo Prodossimo Lopes',
129-
createdAt: '10 Apr 2024',
130-
},
131-
{
132-
id: '12',
133-
imageUrl:
134-
'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
135-
title:
136-
'How to create a complete component using view code for Swift Batata',
137-
slug: 'article-3',
138-
excerpt:
139-
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex incidunt, excepturi porro vel repellat deserunt culpa veritatis tempora, fugit consectetur expedita fuga hic odio! Molestias necessitatibus hic non maxime itaque...',
140-
author: 'Paolo Prodossimo Lopes',
141-
createdAt: '10 Apr 2024',
142-
},
143-
]
64+
const [allArticles, setAllArticles] = useState<Article[]>([])
14465
const [articles, setArticles] = useState(allArticles)
14566

67+
articlesRepository.findMany().then((articles) => {
68+
setAllArticles(articles)
69+
setArticles(articles)
70+
})
71+
14672
function submitActionHandler(search: SearchForm) {
14773
if (search.query.length === 0) {
14874
setArticles(allArticles)

‎src/utils/sanity/client.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { createClient } from '@sanity/client'
2+
3+
export const client = createClient({
4+
projectId: 'y8jhl6zw',
5+
dataset: 'production',
6+
apiVersion: '2024-03-11',
7+
// Set to `true` for production environments
8+
useCdn: false,
9+
})

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"compilerOptions": {
3-
"target": "es5",
3+
"target": "ES2017",
44
"lib": ["dom", "dom.iterable", "esnext"],
55
"allowJs": true,
66
"skipLibCheck": true,

0 commit comments

Comments
 (0)