programatically generating job listing and pages

thirdandgrove · May 20, 2019 · c135333 · c135333
1 parent 2b127e0
commit c135333
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 9 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -169,4 +169,27 @@ exports.createPages = async ({ actions, graphql }) => {
       },
     })
   );
+
+  const jobs = await graphql(`
+    query {
+      allResumatorJob {
+        nodes {
+          title
+          description
+          department
+        }
+      }
+    }
+  `);
+
+  const JobTemplate = path.resolve(`src/templates/Job/index.js`);
+  jobs.data.allResumatorJob.nodes.map(job =>
+    createPage({
+      path: `/careers/${job.title.toLowerCase().replace(' ', '-')}`,
+      component: JobTemplate,
+      context: {
+        job,
+      },
+    })
+  );
 };
diff --git a/plugins/gatsby-source-resumator/gatsby-node.js b/plugins/gatsby-source-resumator/gatsby-node.js
@@ -14,7 +14,7 @@ exports.sourceNodes = async (
   const processDatum = node => {
     return {
       ...node,
-      id: createNodeId(node.id), // TODO: what do their IDs look like?
+      id: createNodeId(node.id),
       parent: null,
       children: [],
       internal: {

diff --git a/src/pages/careers.js b/src/pages/careers.js
@@ -1,13 +1,24 @@
 import React from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
 
 import { colors } from '../styles';
 import Layout from '../components/layout';
 import FullWidthSection from '../components/FullWidthSection';
 
 export default () => {
+  const data = useStaticQuery(graphql`
+    query {
+      allResumatorJob {
+        nodes {
+          title
+          description
+          department
+        }
+      }
+    }
+  `);
   const Filter = styled.nav`
     width: 100%;
     ul {
@@ -29,21 +40,36 @@ export default () => {
       text-align: right;
       line-height: 36px;
       padding-right: 15px;
-      cursor: pointer;
+      /* cursor: pointer; */
       &.active {
         color: ${colors.darkgray};
         text-decoration: underline;
       }
     }
   `;
+
+  const JobList = styled.ul`
+    margin: 0 auto;
+    li {
+      list-style: none;
+      font-family: Canela-Bold;
+      font-size: 57px;
+      color: #282829;
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 72px;
+      padding: 2rem;
+    }
+  `;
+
   return (
     <Layout
       headerData={{
         title: 'Careers',
         height: '450px',
       }}
     >
-      <Filter>
+      {/* <Filter>
         <ul
           css={css`
             margin: 0 auto !important;
@@ -61,16 +87,19 @@ export default () => {
           <li>creative</li>
           <li>delivery</li>
           <li>strategy</li>
-          <li className='active'>engineering</li>
+          <li>engineering</li>
         </ul>
-      </Filter>
-      <FullWidthSection>
-        <p>joblist</p>
+      </Filter> */}
+      <FullWidthSection height='100%'>
+        <JobList>
+          {data.allResumatorJob.nodes.map(job => (
+            <li>{job.title}</li>
+          ))}
+        </JobList>
       </FullWidthSection>
     </Layout>
   );
 };
 
-// TODO: fetch data from Jazz API
 // TODO: Build out individual job page
 // TODO: implement filtering
diff --git a/src/templates/Job/index.js b/src/templates/Job/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Layout from '../../components/layout';
+import FullWidthSection from '../../components/FullWidthSection';
+
+export default ({ pageContext }) => {
+  const { job } = pageContext;
+  return (
+    <Layout headerData={{ title: job.title }}>
+      <FullWidthSection>
+        <div dangerouslySetInnerHTML={{ __html: job.description }} />
+      </FullWidthSection>
+    </Layout>
+  );
+};