Home refactor

gatsby-node.js

@@ -26,6 +26,13 @@ function truncate(n, useWordBoundary) {
 //
 // Get GitHub repos
 //
+const gitHubConfig = {
+  headers: {
+    'User-Agent': 'kremalicious/portfolio',
+    Authorization: `token ${process.env.GITHUB_TOKEN}`
+  }
+}
+
 async function getGithubRepos(data) {
   let repos = []
   let holder = {}
@@ -35,12 +42,7 @@ async function getGithubRepos(data) {
     const repoName = item.split('/')[1]
     const repo = await axios.get(
       `https://api.github.com/repos/${user}/${repoName}`,
-      {
+      gitHubConfig
-        headers: {
-          'User-Agent': 'kremalicious/portfolio',
-          Authorization: `token ${process.env.GITHUB_TOKEN}`
-        }
-      }
     )
 
     holder.name = repo.data.name

package.json

@@ -51,6 +51,7 @@
     "remark": "^11.0.1",
     "remark-html": "^10.0.0",
     "remark-parse": "^7.0.1",
+    "shortid": "^2.2.15",
     "suncalc": "^1.8.0",
     "vcf": "^2.0.6"
   },

src/pages/index.jsx

@@ -1,6 +1,7 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
+import shortid from 'shortid'
 import SEO from '../components/atoms/SEO'
 import ProjectImage from '../components/atoms/ProjectImage'
 import { ReactComponent as Images } from '../images/images.svg'
@@ -18,23 +19,16 @@ function getImageCount(images, slug) {
   return array.length
 }
 
-export default class Home extends PureComponent {
+Project.propTypes = {
-  static propTypes = {
+  node: PropTypes.shape({
-    data: PropTypes.object.isRequired,
+    slug: PropTypes.string.isRequired,
-    pageContext: PropTypes.object.isRequired
+    title: PropTypes.string.isRequired,
-  }
+    img: PropTypes.object.isRequired
+  }),
+  images: PropTypes.array.isRequired
+}
 
-  render() {
+function Project({ node, images }) {
-    const { data, pageContext } = this.props
-    const projects = data.allProjectsYaml.edges
-    const images = data.projectImageFiles.edges
-
-    return (
-      <>
-        <SEO />
-
-        <div className={styles.projects}>
-          {projects.map(({ node }) => {
   const { slug, title, img } = node
   const imageCount = getImageCount(images, slug)
 
@@ -55,13 +49,30 @@ export default class Home extends PureComponent {
       </Link>
     </article>
   )
-          })}
+}
+
+Home.propTypes = {
+  data: PropTypes.object.isRequired,
+  pageContext: PropTypes.object.isRequired
+}
+
+export default function Home({ data, pageContext }) {
+  const projects = data.allProjectsYaml.edges
+  const images = data.projectImageFiles.edges
+
+  return (
+    <>
+      <SEO />
+
+      <div className={styles.projects}>
+        {projects.map(({ node }) => (
+          <Project key={shortid.generate()} node={node} images={images} />
+        ))}
       </div>
 
       <Repositories repos={pageContext.repos} />
     </>
   )
-  }
 }
 
 export const IndexQuery = graphql`