prevents header and pill content from wrapping

adjusts type definitions to match new Coda table structures

next/components/thumbprint-roadmap/overview/overview.jsx

@@ -2,30 +2,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { format } from 'date-fns';
 import { Text, Pill } from '@thumbtack/thumbprint-react';
 import { tpColorGray300 } from '@thumbtack/thumbprint-tokens';
 import styles from './overview.module.scss';
 
-export const ComponentRow = ({ task, description, status, releaseDate}) => (
-    <>
+export const ComponentRow = ({ task, description, status, releaseDate }) => {
+    return (
         <tr className="bb b-gray-300 bw-2 tl">
-            <td className="">
-                {task}
-            </td>
+            <td className="b">{task}</td>
             <td className="pa2">
-                {description}
+                <Text size="2">{description}</Text>
             </td>
-            <td className="pa2">
+            <td className="pa2 nowrap">
                 <Pill color="blue">{status}</Pill>
             </td>
             <td className="pa2">
-                {releaseDate}
+                {/* <Text size="2">{format(new Date(releaseDate), 'M/dd/yy')}</Text> */}
             </td>
         </tr>
-    </>
-);
+    );
+};
 
 ComponentRow.propTypes = {
+    statuses: Object,
     task: String,
     description: String,
     status: String,
@@ -68,7 +68,7 @@ export const ComponentTable = ({ children }) => (
                     <Text size={2}>Status</Text>
                 </th>
                 <th
-                    className="pt3 ph2 pb2 v-top top0 bg-white"
+                    className="pt3 ph2 pb2 v-top top0 bg-white nowrap"
                     style={{
                         position: 'sticky',
                         boxShadow: `0px 2px 0px 0px ${tpColorGray300}`,

next/pages/overview/roadmap.tsx

@@ -36,6 +36,10 @@ interface Implementation {
         'Development status': string;
         'Design status': string;
         'Documentation status': string;
+        Objective: string;
+        Problem: string;
+        Status: string;
+        'End Date': string;
     };
 }
 
@@ -49,10 +53,10 @@ interface Roadmap {
     type: string;
     updatedAt: string;
     values: {
-        Task: string;
-        Description: string;
+        Objective: string;
+        Problem: string;
         Status: string;
-        'Release Date': string;
+        'End Date': string;
     };
 }
 
@@ -84,13 +88,12 @@ export default function Components({
 
             <ComponentTable>
                 {roadmaps.map(item => {
-
                     return (
                         <ComponentRow
-                            task={item.values.Task}
-                            description={item.values.Description}
+                            task={item.values.Objective}
+                            description={item.values.Problem}
                             status={item.values.Status}
-                            releaseDate={item.values['Release Date']}
+                            releaseDate={item.values['End Date']}
                         />
                     );
                 })}
@@ -102,7 +105,7 @@ export default function Components({
 export const getStaticProps = async () => {
     const listRowsRes = await fetch(
         // https://coda.io/developers/apis/v1#operation/listRows
-        `https://coda.io/apis/v1/docs/bXyUQb2tJW/tables/PublicRoadmap/rows?useColumnNames=true`,
+        `https://coda.io/apis/v1/docs/bXyUQb2tJW/tables/PublicRoadmap2/rows?useColumnNames=true`,
         {
             headers: {
                 Authorization: `Bearer ${process.env.CODA_API_TOKEN}`,
@@ -112,21 +115,23 @@ export const getStaticProps = async () => {
 
     const data = listRowsRes.ok ? await listRowsRes.json() : null;
     const roadmaps: Roadmap[] = data ? data.items : [];
+    // const roadmaps: Implementation[] = data ? data.items : [];
 
-    // const groupedImplementations = groupBy(roadmaps, implementation => {
-    //     return implementation.values.Name;
-    // });
+    const groupedImplementations = groupBy(roadmaps, implementation => {
+        return implementation.values.Status;
+    });
 
-    // const groupedAndSortedImplementations = Object.keys(groupedImplementations)
-    //     .sort()
-    //     .map(key => {
-    //         return groupedImplementations[key];
-    //     });
+    const groupedAndSortedImplementations = Object.keys(groupedImplementations)
+        .sort()
+        .map(key => {
+            return groupedImplementations[key];
+        });
 
     return {
         props: {
             layoutProps: getLayoutProps(),
             roadmaps: roadmaps,
+            // roadmaps: groupedAndSortedImplementations,
         },
     };
 };