feat(tutorial): complete step 3

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;

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",

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 {

src/app/home/_mixins.scss

@@ -4,4 +4,4 @@
 @mixin landing-page-background() {
   background-color: $layer-01;
   position: relative;
-}
+}

src/app/home/_overrides.scss

@@ -15,4 +15,4 @@
 .cds--subgrid--wide {
   //fix needed to keep the subgrid from scrolling horizontally
   margin-right: 1rem;
-}
+}

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 }) {
         <Providers>{children}</Providers>
       </body>
     </html>
-  )
+  );
 }

src/app/page.js

@@ -1,4 +1,4 @@
-import LandingPage from "./home/page";
+import LandingPage from './home/page';
 
 export default function Page() {
   return <LandingPage />;

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 (
     <div>
-        <Theme theme="g100">
-          <TutorialHeader />
-        </Theme>
-        <Content>
-          {children}
-        </Content>
+      <Theme theme="g100">
+        <TutorialHeader />
+      </Theme>
+      <Content>{children}</Content>
     </div>
-  )
+  );
 }

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 (
     <DataTable
       rows={rows}
@@ -51,7 +56,7 @@ const RepoTable = ({ rows, headers }) => {
                     ))}
                   </TableExpandRow>
                   <TableExpandedRow colSpan={headers.length + 1}>
-                    <p>Row description</p>
+                    <p>{getRowDescription(row.id)}</p>
                   </TableExpandedRow>
                 </React.Fragment>
               ))}

src/app/repos/_repo-page.scss

@@ -3,4 +3,4 @@
 .repo-page__r1 {
   padding-top: $spacing-05;
   padding-bottom: $spacing-05;
-}
+}

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 }) => (
+  <ul style={{ display: 'flex' }}>
+    <li>
+      <Link href={url}>GitHub</Link>
+    </li>
+    {homepageUrl && (
+      <li>
+        <span>&nbsp;|&nbsp;</span>
+        <Link href={homepageUrl}>Homepage</Link>
+      </li>
+    )}
+  </ul>
+);
+
+// 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: <LinkList url={row.html_url} homepageUrl={row.homepage} />,
+  }));
 
 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 (
+//     <Grid className="repo-page">
+//       <Column lg={16} md={8} sm={4} className="repo-page__r1">
+//         <RepoTable headers={headers} rows={rows} />
+//       </Column>
+//     </Grid>
+//   );
+// }
 
 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 (
+      <Grid className="repo-page">
+        <Column lg={16} md={8} sm={4} className="repo-page__r1">
+          <DataTableSkeleton
+            columnCount={headers.length + 1}
+            rowCount={10}
+            headers={headers}
+          />
+        </Column>
+      </Grid>
+    );
+  }
+
+  if (error) {
+    return `Error! ${error}`;
+  }
+
+  // If we're here, we've got our data!
   return (
     <Grid className="repo-page">
       <Column lg={16} md={8} sm={4} className="repo-page__r1">
-        <RepoTable headers={headers} rows={rows} />
+        <RepoTable
+          headers={headers}
+          rows={rows.slice(firstRowIndex, firstRowIndex + currentPageSize)}
+        />
+        <Pagination
+          totalItems={rows.length}
+          backwardText="Previous page"
+          forwardText="Next page"
+          pageSize={currentPageSize}
+          pageSizes={[5, 10, 15, 25]}
+          itemsPerPageText="Items per page"
+          onChange={({ page, pageSize }) => {
+            if (pageSize !== currentPageSize) {
+              setCurrentPageSize(pageSize);
+            }
+            setFirstRowIndex(pageSize * (page - 1));
+          }}
+        />
       </Column>
     </Grid>
   );

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 = () => (
   <HeaderContainer

src/components/TutorialHeader/_tutorial-header.scss

@@ -15,4 +15,4 @@
   .action-icons {
     display: none;
   }
-}
+}