GithubRepositoriesTable.tsx

GithubRepositoriesTable.tsx

'use client'

import { HTMLAttributes, useEffect, useState } from 'react'
import { Table } from '../atoms/Table'
import { fetchGithubRepositoriesByUsername } from '@/app/lib/fetch'
import { GithubRepo } from '@/lib/types/global'


export type GithubRepo = {
  name: any
  description: any
  topics: any
  stargazers_count: any
  homepage: any
  language: any
}

interface ProjectsProps extends HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode
  className?: string
}

export function Projects ({
  children,
  className,
  ...htmlAttributes

}: ProjectsProps): React.JSX.Element {
  const [displayedProjects, setDisplayedProjects] = useState<any[]>([])

  const tableHeaders = (): string[] => {
    if (displayedProjects.length <= 0) {
      return ['']
    }
    return Object.keys(displayedProjects[0])
  }

  useEffect(
    () => {
      fetchGithubRepositoriesByUsername('andersonbosa')
        .then((response) => {
          const tableRows = response.data.map((repo: GithubRepo) => (
            Object.values(repo)
          ))
          console.log(tableRows)
          setDisplayedProjects(tableRows)
        })
    },
    []
  )

  return (
    <>
      <div className={className} {...htmlAttributes} >
        <h1>Projetos</h1>
        <Table headers={tableHeaders()} items={displayedProjects} />
      </div>
    </>
  )
}


import { AwaitedReactNode, HTMLAttributes, JSXElementConstructor, Key, ReactElement, ReactNode, ReactPortal } from 'react'

interface TableProps extends HTMLAttributes<HTMLDivElement> {
  headers: string[]
  items: any[]
  htmlAttributes?: Partial<React.HTMLAttributes<any>>
}

type TipoMid = string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode> | null | undefined

export function Table ({
  headers,
  items = [],
  ...htmlAttributes
}: TableProps): React.JSX.Element {
  return (
    <>
      <div {...htmlAttributes} >
        <div className="overflow-x-auto">
          <table className="table">
            {/* head */}
            <thead>
              <tr>
                {
                  headers.length > 0 && headers?.map(
                    (header, index) => (
                      <th key={index}>{header}</th>
                    )
                  )
                }
              </tr>
            </thead>
            <tbody>
              {/* rows */}
              {
                items.length > 0 && items.map((item, index) => (
                  <tr key={index}>
                    {
                      item?.map(
                        (data: TipoMid, dataIndex: Key | number) => (
                          <td key={dataIndex}>{data}</td>
                        )
                      )
                    }
                  </tr>
                ))
              }
            </tbody>
          </table>
        </div>
      </div>
    </>
  )
}