Skip to content

Commit

Permalink
feat: show on index contributors from github
Browse files Browse the repository at this point in the history
  • Loading branch information
nsdonato committed Jan 28, 2024
1 parent 2119a59 commit 322de74
Show file tree
Hide file tree
Showing 12 changed files with 306 additions and 313 deletions.
32 changes: 18 additions & 14 deletions app/[...slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,28 @@ import { Contributors } from '@/components/contributors/contributors'
import { Divider } from '@/components/divider/divider'
import { Header } from '@/components/header/header'
import { getMenuItem } from '@/lib/mdx/get-menu-item'
import { Contributor } from '@/lib/mdx/mdx-utils'

export default async function Slug({ params }: { params: { slug: string[] } }) {
const { data } = await getMenuItem(params.slug)
const { data } = await getMenuItem(params.slug)

if (!data) return null
if (!data) return null

return (
<>
<Header title={data.title} description={data.description} />
return (
<>
<Header title={data.title} description={data.description} />

<div className='grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mt-8'>
{data.submenu.map(item => (
<Card key={item.imgPlaceholder} item={item} />
))}
</div>
<Divider className='p-4' />
<div className='grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mt-8'>
{data.submenu.map(item => (
<Card key={item.imgPlaceholder} item={item} />
))}
</div>
<Divider className='p-4' />

<Contributors contributors={data?.contributors ?? []} />
</>
)
<Contributors
isIndex={false}
contributors={data?.contributors as Contributor[]}
/>
</>
)
}
40 changes: 20 additions & 20 deletions app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Analytics } from '@vercel/analytics/react'
import type { Metadata } from 'next'
import { Analytics } from '@vercel/analytics/react';

import Navbar from '@/components/navbar/navbar'
import { SidebarMenu } from '@/components/sidebar-menu/sidebar-menu'
Expand All @@ -9,28 +9,28 @@ import { getTheme } from '../lib/getTheme'
import './globals.css'

export const metadata: Metadata = {
title: 'Recursos Tech',
description: 'Recursos tech para la comunidad',
title: 'Recursos Tech',
description: 'Recursos tech para la comunidad',
}

export default function RootLayout({
children,
children,
}: {
children: React.ReactNode
children: React.ReactNode
}) {
return (
<html lang='es' className={'font-popi font-popi-light'}>
<head>
<script dangerouslySetInnerHTML={{ __html: getTheme }} />
</head>
<body>
<Navbar />
<div className='grid grid-cols-1 gap-4 lg:grid-cols-6'>
<SidebarMenu className='' />
<main className='p-4 lg:col-span-5'>{children}</main>
</div>
<Analytics />
</body>
</html>
)
return (
<html lang='es' className={'font-popi font-popi-light'}>
<head>
<script dangerouslySetInnerHTML={{ __html: getTheme }} />
</head>
<body>
<Navbar />
<div className='grid grid-cols-1 gap-4 lg:grid-cols-6'>
<SidebarMenu className='' />
<main className='p-4 lg:col-span-5'>{children}</main>
</div>
<Analytics />
</body>
</html>
)
}
36 changes: 18 additions & 18 deletions app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,23 @@ import { WebLink } from '@/components/web-link/web-link'
import { getIndex } from '@/lib/mdx/get-index'

export default async function Home() {
const { data, source } = await getIndex()
const { source } = await getIndex()

return (
<div>
<MDXRemote
source={source}
components={{
Figure,
li: props => <li className='' {...props} />,
ul: props => <ul className='list-disc pl-6' {...props} />,
p: props => <p className='py-4' {...props} />,
WebLink,
Header,
}}
/>
<div className='divider'></div>
<Contributors contributors={data?.contributors} />
</div>
)
return (
<div>
<MDXRemote
source={source}
components={{
Figure,
li: props => <li className='' {...props} />,
ul: props => <ul className='list-disc pl-6' {...props} />,
p: props => <p className='py-4' {...props} />,
WebLink,
Header,
}}
/>
<div className='divider'></div>
<Contributors isIndex />
</div>
)
}
65 changes: 54 additions & 11 deletions components/contributors/contributors.test.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,62 @@
import { render, screen } from '@testing-library/react'

import { Contributor } from '@/lib/mdx/mdx-utils'

import { Contributors } from './contributors'

// HOW TO TEST ASYNC COMPONENTS: https://github.com/vercel/next.js/issues/47131
/**
* @param {function} Component
* @param {*} props
* @returns {Promise<()=>JSX.Element>}
*/
async function resolvedComponent(Component, props) {

Check failure on line 11 in components/contributors/contributors.test.tsx

View workflow job for this annotation

GitHub Actions / Typecheck 🧐

Parameter 'Component' implicitly has an 'any' type.

Check failure on line 11 in components/contributors/contributors.test.tsx

View workflow job for this annotation

GitHub Actions / Typecheck 🧐

Parameter 'props' implicitly has an 'any' type.
const ComponentResolved = await Component(props)
return () => ComponentResolved
}

describe('<Contributors />', () => {
test('renders correctly', () => {
const contributors: Contributor[] = [{ github_username: 'nsdonato' }]
global.fetch = jest.fn(() =>

Check failure on line 17 in components/contributors/contributors.test.tsx

View workflow job for this annotation

GitHub Actions / Typecheck 🧐

Type 'Mock<Promise<{ ok: true; json: () => Promise<{ id: number; login: string; avatar_url: string; html_url: string; contributions: number; }[]>; }>, [], any>' is not assignable to type '{ (input: URL | RequestInfo, init?: RequestInit | undefined): Promise<Response>; (input: string | URL | Request, init?: RequestInit | undefined): Promise<...>; }'.
Promise.resolve({
ok: true,
json: () =>
Promise.resolve([
{
id: 1,
login: 'nsdonato',
avatar_url: 'https://example.com/avatar1.jpg',
html_url: 'https://example.com/profile1',
contributions: 0,
},
]),
})
)

test('renders correctly from index', async () => {
const AsyncRscComponent = await resolvedComponent(Contributors, {
isIndex: true,
})
render(<AsyncRscComponent />)

const avatar = screen.getByTestId('contributor-nsdonato')

expect(screen.getByText('Colaboradores')).toBeInTheDocument()
expect(
screen.getByText('Gracias a todxs los que aportaron en este proyecto ✨')
).toBeInTheDocument()
expect(avatar).toBeInTheDocument()
})

render(<Contributors contributors={contributors} />)
const avatar = screen.getByRole('img', {
name: /nsdonato/i,
})
test('renders correctly from slug', async () => {
const AsyncRscComponent = await resolvedComponent(Contributors, {
isIndex: false,
contributors: [
{
github_username: 'vamoacodear',
},
],
})
render(<AsyncRscComponent />)

expect(screen.getByText('Colaboradores')).toBeInTheDocument()
expect(avatar).toBeInTheDocument()
})
const avatar = screen.getByTestId('contributor-vamoacodear')
expect(avatar).toBeInTheDocument()
})
})
77 changes: 44 additions & 33 deletions components/contributors/contributors.tsx
Original file line number Diff line number Diff line change
@@ -1,43 +1,54 @@
import Image from 'next/image'

import { Contributor } from '@/lib/mdx/mdx-utils'
import { adaptContributorsFromMdx } from '@/services/github/adapters'
import { getContributorsFromGitHub } from '@/services/github/get-contributors'

import { WebLink } from '../web-link/web-link'

type ContributorsProp = {
contributors: Contributor[] | []
contributors?: Contributor[]
isIndex?: boolean
}

export const Contributors = ({ contributors }: ContributorsProp) => {
if (!contributors?.length) {
return null
}
export const Contributors = async ({
contributors = [],
isIndex = false,
}: ContributorsProp) => {
let data = []

if (isIndex) {
data = await getContributorsFromGitHub()
} else {
data = adaptContributorsFromMdx(contributors)
}

return (
<div className='card bg-base-100 shadow-lg ring-1 mt-4 p-4 w-fit'>
<h2 className='card-title mb-4 text-xl'>Colaboradores</h2>
<p className='mb-4'>
Gracias a todxs los que aportaron en este documento! ✨
</p>
<ul className='flex flex-wrap gap-2'>
{contributors.map(({ github_username }) => {
return (
<li key={`contributor-${github_username}`}>
<WebLink
href={`https://github.com/${github_username}`}
>
<Image
loading='lazy'
src={`https://github.com/${github_username}.png?size=80`}
width='40'
height='40'
alt={`Usuarix contribuidxr - ${github_username}`}
className='rounded-full'
/>
</WebLink>
</li>
)
})}
</ul>
</div>
)
return (
<div className='card bg-base-100 shadow-lg ring-1 mt-4 p-4 w-fit'>
<h2 className='card-title mb-4 text-xl'>Colaboradores</h2>
<p className='mb-4'>
Gracias a todxs los que aportaron en este{' '}
{isIndex ? 'proyecto' : 'documento!'}
</p>
<ul className='flex flex-wrap gap-2'>
{data.map(contributor => {
return (
<li key={`contributor-${contributor.name}`}>
<WebLink href={contributor.profile}>
<Image
data-testid={`contributor-${contributor.name}`}
loading='lazy'
src={contributor.avatar}
width='40'
height='40'
alt={`Usuarix contribuidxr - ${contributor.name}`}
className='rounded-full'
/>
</WebLink>
</li>
)
})}
</ul>
</div>
)
}
Loading

0 comments on commit 322de74

Please sign in to comment.