Skip to content

Commit

Permalink
Avances con la api
Browse files Browse the repository at this point in the history
  • Loading branch information
Jonathan committed Oct 12, 2023
1 parent e38281f commit 9201f1f
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 59 deletions.
2 changes: 1 addition & 1 deletion pruebas/02-bazar-universal/jfilgairacordon/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"extends": "next/core-web-vitals"
"extends": ["./node_modules/standard/eslintrc.json", "next/core-web-vitals"]
}
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import { NextRequest, NextResponse } from 'next/server'
import { NextResponse } from 'next/server'
import { findProductById } from '../../services/find'

export async function GET () {
const parameters = NextRequest.arguments;
console.log(parameters);

return NextResponse.json({
message: 'Hello World'
})
}
export async function GET (
request: Request,
{ params }: { params: { id: number } }
) {
const { id } = params
// usamos el service que irá a buscar el producto a la bbdd.
try {
const product = await findProductById({ id })
return NextResponse.json(product)
} catch (e) {
return NextResponse.json({ error: 'Product not found' }, { status: 404 })
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
import { NextResponse } from 'next/server'
import { findProductsByQuery } from '../services/find'

export async function GET (request: Request) {
const { searchParams } = new URL(request.url)
const search = searchParams.get('q')

if (search) {
const products = await findProductsByQuery({ query: search })
return NextResponse.json(products)
}

export async function GET () {
return NextResponse.json({
message: 'Hello World'
})
}
message: 'You should use param search in order to search items'
}, { status: 404 })
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { BaseProduct } from '@/types/product'
import * as productsList from '../../../../../products.json'

type FindProductByIdProps = {
id: number
}
export async function findProductById ({ id }: FindProductByIdProps) {
const product = productsList.products.find(x => x.id.toString() === id.toString())
if (!product) throw new Error('Product not found')

// Simulamos un delay de 1 segundo para que se vea el loading
await new Promise(resolve => setTimeout(resolve, 1000))

return product
}

type FindProductsByQueryProps = {
query: string
}
export async function findProductsByQuery ({ query }: FindProductsByQueryProps) {
const products = productsList.products.filter(x =>
x.title.toLowerCase().includes(query.toLowerCase()) ||
x.description.toLowerCase().includes(query.toLowerCase()))

// Los mapeamos a BaseProduct
const parsedProducts = products.map(x => ({
id: x.id,
title: x.title,
description: x.description,
price: x.price,
rating: x.rating,
image: x.images[0]
} as BaseProduct))

// Simulamos un delay de 1 segundo para que se vea el loading
await new Promise(resolve => setTimeout(resolve, 1000))

return parsedProducts
}
90 changes: 45 additions & 45 deletions pruebas/02-bazar-universal/jfilgairacordon/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import Image from 'next/image'

export default function Home() {
export default function Home () {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
<main className='flex min-h-screen flex-col items-center justify-between p-24'>
<div className='z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex'>
<p className='fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30'>
Get started by editing&nbsp;
<code className="font-mono font-bold">src/app/page.tsx</code>
<code className='font-mono font-bold'>src/app/page.tsx</code>
</p>
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
<div className='fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none'>
<a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className='pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0'
href='https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
target='_blank'
rel='noopener noreferrer'
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className="dark:invert"
src='/vercel.svg'
alt='Vercel Logo'
className='dark:invert'
width={100}
height={24}
priority
Expand All @@ -30,80 +30,80 @@ export default function Home() {

<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
src="/next.svg"
alt="Next.js Logo"
className='relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert'
src='/next.svg'
alt='Next.js Logo'
width={180}
height={37}
priority
/>
</div>

<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
<div className='mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left'>
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
href='https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
target='_blank'
rel='noopener noreferrer'
>
<h2 className={`mb-3 text-2xl font-semibold`}>
<h2 className='mb-3 text-2xl font-semibold'>
Docs{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
<span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
<p className='m-0 max-w-[30ch] text-sm opacity-50'>
Find in-depth information about Next.js features and API.
</p>
</a>

<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
href='https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
target='_blank'
rel='noopener noreferrer'
>
<h2 className={`mb-3 text-2xl font-semibold`}>
<h2 className='mb-3 text-2xl font-semibold'>
Learn{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
<span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
<p className='m-0 max-w-[30ch] text-sm opacity-50'>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>

<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
href='https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
target='_blank'
rel='noopener noreferrer'
>
<h2 className={`mb-3 text-2xl font-semibold`}>
<h2 className='mb-3 text-2xl font-semibold'>
Templates{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
<span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
<p className='m-0 max-w-[30ch] text-sm opacity-50'>
Explore the Next.js 13 playground.
</p>
</a>

<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
href='https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
target='_blank'
rel='noopener noreferrer'
>
<h2 className={`mb-3 text-2xl font-semibold`}>
<h2 className='mb-3 text-2xl font-semibold'>
Deploy{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
<span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
<p className='m-0 max-w-[30ch] text-sm opacity-50'>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
Expand Down
17 changes: 17 additions & 0 deletions pruebas/02-bazar-universal/jfilgairacordon/src/types/product.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export type BaseProduct = {
id: number,
title: string,
description: string,
price: number,
image: string,
rating: number
}

export type Product = Omit<BaseProduct, 'image'> & {
discountPercentage: number
stock: number
brand: string
category: string
thumbnail: string
images: string[]
}

0 comments on commit 9201f1f

Please sign in to comment.