diff --git a/next.config.js b/next.config.js index 767719fc4..658404ac6 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,4 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {} +const nextConfig = {}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/package.json b/package.json index 5a0f6706c..7b3b8f27c 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "dependencies": { "@carbon/react": "^1.35.0", + "@octokit/core": "4.2.0", "eslint": "8.44.0", "eslint-config-next": "13.4.9", "next": "13.4.9", diff --git a/src/app/globals.scss b/src/app/globals.scss index 35c8004cf..064ec19d5 100644 --- a/src/app/globals.scss +++ b/src/app/globals.scss @@ -21,7 +21,7 @@ .cds--content { margin-top: 3rem; padding: 0; -// background: var(--cds-background); + // background: var(--cds-background); } .cds--content .cds--css-grid { diff --git a/src/app/home/_mixins.scss b/src/app/home/_mixins.scss index b396b02d3..3db23842f 100644 --- a/src/app/home/_mixins.scss +++ b/src/app/home/_mixins.scss @@ -4,4 +4,4 @@ @mixin landing-page-background() { background-color: $layer-01; position: relative; -} \ No newline at end of file +} diff --git a/src/app/home/_overrides.scss b/src/app/home/_overrides.scss index 075209aa6..d52252089 100644 --- a/src/app/home/_overrides.scss +++ b/src/app/home/_overrides.scss @@ -15,4 +15,4 @@ .cds--subgrid--wide { //fix needed to keep the subgrid from scrolling horizontally margin-right: 1rem; -} \ No newline at end of file +} diff --git a/src/app/layout.js b/src/app/layout.js index 657492982..c8ae3123f 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,11 +1,11 @@ -import './globals.scss' +import './globals.scss'; import { Providers } from './providers'; export const metadata = { title: 'Carbon + Next 13', description: 'IBM Carbon Tutorial with NextJS 13', -} +}; export default function RootLayout({ children }) { return ( @@ -14,5 +14,5 @@ export default function RootLayout({ children }) { {children} - ) + ); } diff --git a/src/app/page.js b/src/app/page.js index f15b8132c..937a0b394 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,4 +1,4 @@ -import LandingPage from "./home/page"; +import LandingPage from './home/page'; export default function Page() { return ; diff --git a/src/app/providers.js b/src/app/providers.js index db931338f..3fcc895ea 100644 --- a/src/app/providers.js +++ b/src/app/providers.js @@ -1,4 +1,4 @@ -'use client' +'use client'; import { Content, Theme } from '@carbon/react'; @@ -7,12 +7,10 @@ import TutorialHeader from '@/components/TutorialHeader/TutorialHeader'; export function Providers({ children }) { return (
- - - - - {children} - + + + + {children}
- ) + ); } diff --git a/src/app/repos/RepoTable.js b/src/app/repos/RepoTable.js index dcc852c94..31cbdb799 100644 --- a/src/app/repos/RepoTable.js +++ b/src/app/repos/RepoTable.js @@ -16,6 +16,11 @@ import { } from '@carbon/react'; const RepoTable = ({ rows, headers }) => { + const getRowDescription = (rowId) => { + const row = rows.find(({ id }) => id === rowId); + return row ? row.description : ''; + }; + return ( { ))} -

Row description

+

{getRowDescription(row.id)}

 ))} diff --git a/src/app/repos/_repo-page.scss b/src/app/repos/_repo-page.scss index e988b0948..0f58c3f98 100644 --- a/src/app/repos/_repo-page.scss +++ b/src/app/repos/_repo-page.scss @@ -3,4 +3,4 @@ .repo-page__r1 { padding-top: $spacing-05; padding-bottom: $spacing-05; -} \ No newline at end of file +} diff --git a/src/app/repos/page.js b/src/app/repos/page.js index f6bdcfdcd..848de7ad9 100644 --- a/src/app/repos/page.js +++ b/src/app/repos/page.js @@ -1,7 +1,48 @@ 'use client'; +// importing links because data table will be a comma-separated list of repository and home page links, +import { + Link, + DataTableSkeleton, + Pagination, + Grid, + Column, +} from '@carbon/react'; import RepoTable from './RepoTable'; -import { Column, Grid } from '@carbon/react'; +import React, { useEffect, useState } from 'react'; +// Octokit package that allows us to query GitHub APIs easily. +import { Octokit } from '@octokit/core'; + +const octokitClient = new Octokit({}); + +// helper - has two props (url and homepageUrl) and returns an unordered list. +// If the repository does not have a home page URL, only render the repository link. +const LinkList = ({ url, homepageUrl }) => ( + +); + +// helper - let’s create a function that transforms row data to our expected header keys. + +const getRowItems = (rows) => + rows.map((row) => ({ + ...row, + key: row.id, + stars: row.stargazers_count, + issueCount: row.open_issues_count, + createdAt: new Date(row.created_at).toLocaleDateString(), + updatedAt: new Date(row.updated_at).toLocaleDateString(), + links: , + })); const headers = [ { @@ -30,41 +71,115 @@ const headers = [ }, ]; -const rows = [ - { - id: '1', - name: 'Repo 1', - createdAt: 'Date', - updatedAt: 'Date', - issueCount: '123', - stars: '456', - links: 'Links', - }, - { - id: '2', - name: 'Repo 2', - createdAt: 'Date', - updatedAt: 'Date', - issueCount: '123', - stars: '456', - links: 'Links', - }, - { - id: '3', - name: 'Repo 3', - createdAt: 'Date', - updatedAt: 'Date', - issueCount: '123', - stars: '456', - links: 'Links', - }, -]; +// const rows = [ +// { +// id: '1', +// name: 'Repo 1', +// createdAt: 'Date', +// updatedAt: 'Date', +// issueCount: '123', +// stars: '456', +// links: 'Links', +// }, +// { +// id: '2', +// name: 'Repo 2', +// createdAt: 'Date', +// updatedAt: 'Date', +// issueCount: '123', +// stars: '456', +// links: 'Links', +// }, +// { +// id: '3', +// name: 'Repo 3', +// createdAt: 'Date', +// updatedAt: 'Date', +// issueCount: '123', +// stars: '456', +// links: 'Links', +// }, +// ]; + +// function RepoPage() { +// return ( +// +// +// +// +// +// ); +// } function RepoPage() { + const [firstRowIndex, setFirstRowIndex] = useState(0); + const [currentPageSize, setCurrentPageSize] = useState(10); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(); + const [rows, setRows] = useState([]); + + useEffect(() => { + async function getCarbonRepos() { + const res = await octokitClient.request('GET /orgs/{org}/repos', { + org: 'carbon-design-system', + per_page: 75, + sort: 'updated', + direction: 'desc', + }); + + if (res.status === 200) { + setRows(getRowItems(res.data)); + + console.log(res.data); + } else { + setError('Error obtaining repository data'); + + console.log('Error obtaining repository data'); + } + } + + getCarbonRepos(); + }, []); + if (loading) { + return ( + + + + + + ); + } + + if (error) { + return `Error! ${error}`; + } + + // If we're here, we've got our data! return ( - + + { + if (pageSize !== currentPageSize) { + setCurrentPageSize(pageSize); + } + setFirstRowIndex(pageSize * (page - 1)); + }} + /> ); diff --git a/src/components/TutorialHeader/TutorialHeader.js b/src/components/TutorialHeader/TutorialHeader.js index c09b08be5..b13f45c06 100644 --- a/src/components/TutorialHeader/TutorialHeader.js +++ b/src/components/TutorialHeader/TutorialHeader.js @@ -1,4 +1,4 @@ -"use client"; +'use client'; import { Header, @@ -13,10 +13,10 @@ import { SideNav, SideNavItems, HeaderSideNavItems, -} from "@carbon/react"; -import { Switcher, Notification, UserAvatar } from "@carbon/icons-react"; +} from '@carbon/react'; +import { Switcher, Notification, UserAvatar } from '@carbon/icons-react'; -import Link from "next/link"; +import Link from 'next/link'; const TutorialHeader = () => (