Add events to the front page, sort events properly, move main blog entrypoint

gatsby-node.js

@@ -102,7 +102,8 @@ exports.createPages = ({ actions, graphql }) => {
         createPage,
         items: posts,
         itemsPerPage: 10,
-        pathPrefix: ({ pageNumber }) => (pageNumber === 0 ? `/` : `/page`),
+        pathPrefix: ({ pageNumber }) =>
+          pageNumber === 0 ? `/nyheter/` : `/nyheter/page`,
         component: blogTemplate,
       })
     })
@@ -158,6 +159,14 @@ exports.createPages = ({ actions, graphql }) => {
         component: programTemplate,
       })
     })
+    .then(() => {
+      const indexTemplate = path.resolve(`./src/templates/front-page.js`)
+
+      createPage({
+        path: `/`,
+        component: indexTemplate,
+      })
+    })
     .then(() => {
       return graphql(`
         {

src/components/EventList.js

@@ -8,7 +8,34 @@ import 'moment/locale/nb'
 moment.locale('nb')
 
 export default class EventList extends React.Component {
-  render_event(event) {
+  render() {
+    const { events, title, onlyUpcoming, numDays } = this.props
+
+    const displayEvents = events.filter(({ node: event }) => {
+      const startTime = moment(event.start_time)
+      if (onlyUpcoming && !startTime.isSameOrAfter(new Date(), 'day')) {
+        return false
+      }
+      if (numDays) {
+        const lastDay = moment().add(numDays - 1, 'days')
+        if (!startTime.isSameOrBefore(lastDay, 'day')) {
+          return false
+        }
+      }
+      return true
+    })
+
+    return (
+      <section className="events">
+        {title && <h1 className="section-title">{title}</h1>}
+        <div className="event-list">
+          {displayEvents.map(({ node: event }) => this.renderEvent(event))}
+        </div>
+      </section>
+    )
+  }
+
+  renderEvent(event) {
     return (
       <Link to={event.fields.link} className="event" key={event.id}>
         <div className="event-image">
@@ -55,24 +82,18 @@ export default class EventList extends React.Component {
       </Link>
     )
   }
-
-  render() {
-    const { events, title } = this.props
-
-    return (
-      <section className="events">
-        <h1 className="section-title">{title}</h1>
-        <div className="event-list">
-          {events.map(({ node: event }) => this.render_event(event))}
-        </div>
-      </section>
-    )
-  }
 }
 
 EventList.propTypes = {
   events: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string,
+  onlyUpcoming: PropTypes.bool,
+  numDays: PropTypes.number,
+}
+
+EventList.defaultProps = {
+  onlyUpcoming: true,
+  numDays: 0,
 }
 
 export const pageQuery = graphql`

src/components/Navbar.js

@@ -21,7 +21,7 @@ const Navbar = () => (
       <header className="site-header">
         <nav className="site-nav">
           <Link to="/program/">Program</Link>
-          <Link to="/">Nyheter</Link>
+          <Link to="/nyheter/">Nyheter</Link>
           <Link to="/om-dns/">Praktisk</Link>
         </nav>
         <div className="logo">

src/components/PostList.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 
-export default class IndexPage extends React.Component {
+export default class PostList extends React.Component {
   render() {
     const { posts, title } = this.props
 
@@ -37,7 +37,7 @@ export default class IndexPage extends React.Component {
   }
 }
 
-IndexPage.propTypes = {
+PostList.propTypes = {
   posts: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string,
 }

src/templates/blog.js

@@ -5,21 +5,21 @@ import Layout from '../components/Layout'
 import PostList from '../components/PostList'
 import Pagination from '../components/Pagination'
 
-export default class IndexPage extends React.Component {
+export default class BlogPage extends React.Component {
   render() {
     const { data, pageContext } = this.props
     const { edges: posts } = data.allWordpressPost
 
     return (
       <Layout>
-        <PostList posts={posts} title="Aktuelt" />
+        <PostList posts={posts} title="Nyheter" />
         <Pagination pageContext={pageContext} pathPrefix="/" />
       </Layout>
     )
   }
 }
 
-IndexPage.propTypes = {
+BlogPage.propTypes = {
   data: PropTypes.shape({
     allWordpressPost: PropTypes.shape({
       edges: PropTypes.array,
@@ -32,7 +32,7 @@ IndexPage.propTypes = {
 }
 
 export const pageQuery = graphql`
-  query IndexQuery($limit: Int!, $skip: Int!) {
+  query BlogQuery($limit: Int!, $skip: Int!) {
     allWordpressPost(
       sort: { fields: date, order: DESC }
       limit: $limit

src/templates/event-program.js

@@ -27,7 +27,7 @@ EventProgram.propTypes = {
 
 export const pageQuery = graphql`
   query {
-    allWordpressWpEvents(sort: { fields: date, order: DESC }) {
+    allWordpressWpEvents(sort: { fields: start_time, order: ASC }) {
       edges {
         node {
           ...EventListFields

src/templates/event.js

@@ -118,7 +118,9 @@ const Event = ({ data }) => {
       <EventTemplate
         title={event.title}
         content={event.content}
-        hasFeaturedMedia={!!event.featured_media.localFile}
+        hasFeaturedMedia={
+          event.featured_media && !!event.featured_media.localFile
+        }
         featuredMedia={event.featured_media}
         startTime={event.start_time}
         endTime={event.end_time}

src/templates/front-page.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'gatsby'
+import Layout from '../components/Layout'
+import PostList from '../components/PostList'
+import EventList from '../components/EventList'
+
+export default class IndexPage extends React.Component {
+  render() {
+    const { data } = this.props
+    const { edges: events } = data.allWordpressWpEvents
+    const { edges: posts } = data.allWordpressPost
+
+    return (
+      <Layout>
+        <EventList events={events} numDays={7} />
+        <PostList posts={posts} title="Aktuelt" />
+      </Layout>
+    )
+  }
+}
+
+IndexPage.propTypes = {
+  data: PropTypes.shape({
+    allWordpressPost: PropTypes.shape({
+      edges: PropTypes.array,
+    }),
+    allWordpressWpEvents: PropTypes.shape({
+      edges: PropTypes.array,
+    }),
+  }),
+}
+
+export const pageQuery = graphql`
+  query {
+    allWordpressWpEvents(sort: { fields: start_time, order: ASC }) {
+      edges {
+        node {
+          ...EventListFields
+        }
+      }
+    }
+    allWordpressPost(sort: { fields: date, order: DESC }, limit: 4) {
+      edges {
+        node {
+          ...PostListFields
+        }
+      }
+    }
+  }
+`