Separate contributors props into logins+latestCommit (#758)

theme/gatsby-node.js

@@ -62,7 +62,7 @@ exports.createPages = async ({graphql, actions}, {repo, showContributors}) => {
       const relativePath = path.relative(rootAbsolutePath, fileAbsolutePath)
       const editUrl = getEditUrl(repo, relativePath, frontmatter)
 
-      const contributors = showContributors ? await fetchContributors(repo, relativePath, frontmatter) : []
+      const contributors = showContributors ? await fetchContributors(repo, relativePath, frontmatter) : {}
 
       // Fix some old CLI pages which have mismatched headings at the top level.
       // All top level headings should be the same level.

theme/src/components/__tests__/contributors.test.js

@@ -5,13 +5,11 @@ import Contributors from '../contributors'
 test('renders contributors', () => {
   const {queryByText} = render(
     <Contributors
-      contributors={{
-        logins: ['colebemis', 'emplums'],
-        latestCommit: {
-          login: 'colebemis',
-          url: '#',
-          date: '2019-08-15T23:40:19Z',
-        },
+      logins={['colebemis', 'emplums']}
+      latestCommit={{
+        login: 'colebemis',
+        url: '#',
+        date: '2019-08-15T23:40:19Z',
       }}
     />,
   )
@@ -23,16 +21,8 @@ test('renders contributors', () => {
 })
 
 test('does not render "last edited by" if latest contributor does not have a latest commit', () => {
-  const {queryByText} = render(<Contributors contributors={{logins: ['ashygee']}} />)
+  const {queryByText} = render(<Contributors logins={['ashygee']} />)
 
   expect(queryByText(/1 contributor/)).toBeInTheDocument()
   expect(queryByText(/Last edited by/)).toBeNull()
 })
-
-// The `Contributors` component is unlikely to be passed an empty array
-// but it should be able to handle an empty array gracefully just in case.
-test('handles no contributors', () => {
-  const {queryByText} = render(<Contributors contributors={[]} />)
-
-  expect(queryByText(/0 contributors/)).toBeInTheDocument()
-})

theme/src/components/__tests__/page-footer.test.js

@@ -3,7 +3,7 @@ import React from 'react'
 import PageFooter from '../page-footer'
 
 test('renders correctly when editUrl and contributors are defined', () => {
-  const {queryByText} = render(<PageFooter editUrl="#" contributors={[{login: 'broccolini'}]} />)
+  const {queryByText} = render(<PageFooter editUrl="#" contributors={{logins: ['broccolini']}} />)
 
   expect(queryByText(/Edit this page on GitHub/)).toBeInTheDocument()
   expect(queryByText(/contributor/)).toBeInTheDocument()
@@ -24,14 +24,20 @@ test('renders correctly when editUrl is defined but contributors is undefined',
 })
 
 test('renders correctly when contributors is defined but editUrl is undefined', () => {
-  const {queryByText} = render(<PageFooter contributors={[{login: 'broccolini'}]} />)
+  const {queryByText} = render(<PageFooter contributors={{logins: ['broccolini']}} />)
 
   expect(queryByText(/Edit this page on GitHub/)).toBeNull()
   expect(queryByText(/contributor/)).toBeInTheDocument()
 })
 
 test('does not render contributors if contributors is an empty array', () => {
-  const {queryByText} = render(<PageFooter contributors={[]} />)
+  const {queryByText} = render(<PageFooter contributors={{logins: []}} />)
+
+  expect(queryByText(/contributor/)).toBeNull()
+})
+
+test('does not render contributors if contributors is empty object', () => {
+  const {queryByText} = render(<PageFooter contributors={{}} />)
 
   expect(queryByText(/contributor/)).toBeNull()
 })

theme/src/components/contributors.js

@@ -19,8 +19,7 @@ const months = [
 ]
 const format = d => `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`
 
-function Contributors({contributors}) {
-  const {logins = [], latestCommit} = contributors
+function Contributors({logins, latestCommit}) {
   return (
     <div>
       <Flex alignItems="center">

theme/src/components/details.js

@@ -29,7 +29,7 @@ function getRenderer(children) {
   return typeof children === 'function' ? children : () => children
 }
 
-function Details({children, overlay, render = getRenderer(children), ...rest}) {
+function Details({children, overlay = false, render = getRenderer(children), ...rest}) {
   const [open, setOpen] = React.useState(Boolean(rest.open))
 
   function toggle(event) {
@@ -62,8 +62,4 @@ function Details({children, overlay, render = getRenderer(children), ...rest}) {
   )
 }
 
-Details.defaultProps = {
-  overlay: false,
-}
-
 export default Details

theme/src/components/page-footer.js

@@ -3,8 +3,9 @@ import {PencilIcon} from '@primer/octicons-react'
 import React from 'react'
 import Contributors from './contributors'
 
-function PageFooter({editUrl, contributors}) {
-  return editUrl || contributors.length > 0 ? (
+function PageFooter({editUrl, contributors = {}}) {
+  const {logins = [], latestCommit} = contributors
+  return editUrl || logins.length ? (
     <BorderBox borderWidth={0} borderTopWidth={1} mt={8} py={5}>
       <Grid gridGap={4}>
         {editUrl != null ? (
@@ -13,15 +14,10 @@ function PageFooter({editUrl, contributors}) {
             Edit this page on GitHub
           </Link>
         ) : null}
-
-        {contributors.length ? <Contributors contributors={contributors} /> : null}
+        {logins.length ? <Contributors logins={logins} latestCommit={latestCommit} /> : null}
       </Grid>
     </BorderBox>
   ) : null
 }
 
-PageFooter.defaultProps = {
-  contributors: [],
-}
-
 export default PageFooter

theme/src/components/table-of-contents.js

@@ -1,7 +1,7 @@
 import {Box, Link} from '@primer/components'
 import React from 'react'
 
-function TableOfContents({items, depth, labelId}) {
+function TableOfContents({items, depth = 0, labelId}) {
   return (
     <Box
       key={items}
@@ -24,8 +24,4 @@ function TableOfContents({items, depth, labelId}) {
   )
 }
 
-TableOfContents.defaultProps = {
-  depth: 0,
-}
-
 export default TableOfContents