diff --git a/src/components/AssociationList.js b/src/components/AssociationList.js index b5edc98..0e58b17 100644 --- a/src/components/AssociationList.js +++ b/src/components/AssociationList.js @@ -4,7 +4,7 @@ import { Link, graphql } from 'gatsby' import Img from 'gatsby-image' export default class AssociationList extends React.Component { - render_association(association) { + static renderAssociation(association) { return ( {association.featured_media && association.featured_media.localFile && ( @@ -32,10 +32,14 @@ export default class AssociationList extends React.Component { return (

{title}

-

Her burde det være en generell tekst om foreningene. Hva er en forening? Hvordan kan man bli med i en forening? Hva gjør foreningene? Kan jeg se alt som arrangeres av Kulturutvalget, for eksempel?

+

+ Her burde det være en generell tekst om foreningene. Hva er en + forening? Hvordan kan man bli med i en forening? Hva gjør foreningene? + Kan jeg se alt som arrangeres av Kulturutvalget, for eksempel? +

{associations.map(({ node: association }) => - this.render_association(association) + this.renderAssociation(association) )}
diff --git a/src/components/EventList.js b/src/components/EventList.js index eee8124..452ac3f 100644 --- a/src/components/EventList.js +++ b/src/components/EventList.js @@ -3,40 +3,12 @@ import PropTypes from 'prop-types' import { Link, graphql } from 'gatsby' import Img from 'gatsby-image' import _ from 'lodash' - import moment from 'moment' import 'moment/locale/nb' + moment.locale('nb') export default class EventList extends React.Component { - render() { - const { events, title, onlyUpcoming, numDays, groupBy, showMore } = this.props - - const filteredEvents = 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 ( -
- {title &&

{title}

} - {groupBy && this.renderEventsByDate(filteredEvents, groupBy)} - {!groupBy && - filteredEvents.map(({ node: event }) => this.renderEvent(event))} - {showMore &&
Vis alle
} -
- ) - } - renderEventsByDate(filteredEvents, groupBy) { let groupByFormat = null if (groupBy === 'day') { @@ -77,7 +49,7 @@ export default class EventList extends React.Component {
{moment(event.start_time).format('dddd')}{' '} @@ -119,6 +91,47 @@ export default class EventList extends React.Component { ) } + + render() { + const { + events, + title, + onlyUpcoming, + numDays, + groupBy, + showMore, + } = this.props + + const filteredEvents = 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 ( +
+ {title &&

{title}

} + {groupBy && this.renderEventsByDate(filteredEvents, groupBy)} + {!groupBy && + filteredEvents.map(({ node: event }) => this.renderEvent(event))} + {showMore && ( +
+ + Vis alle + +
+ )} +
+ ) + } } EventList.propTypes = { @@ -128,7 +141,7 @@ EventList.propTypes = { numDays: PropTypes.number, groupBy: PropTypes.string, compactDate: PropTypes.bool, - showMore: PropTypes.bool + showMore: PropTypes.bool, } EventList.defaultProps = { diff --git a/src/components/Footer.js b/src/components/Footer.js index dfa3346..9373cad 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -11,17 +11,70 @@ const Footer = () => ( diff --git a/src/components/Layout.js b/src/components/Layout.js index 1bff128..b42120a 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -1,6 +1,6 @@ import React from 'react' +import PropTypes from 'prop-types' import Helmet from 'react-helmet' - import Navbar from './Navbar' import Footer from './Footer' import '../css/main.scss' @@ -14,4 +14,8 @@ const TemplateWrapper = ({ children }) => ( ) +TemplateWrapper.propTypes = { + children: PropTypes.shape({}).isRequired, +} + export default TemplateWrapper diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 719eee9..08f9822 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,6 +1,5 @@ import React from 'react' -import { Link, StaticQuery, graphql } from 'gatsby' -import github from '../img/github-icon.svg' +import { Link } from 'gatsby' import logo from '../img/logo/logo-s.svg' export default class Navbar extends React.Component { @@ -8,17 +7,17 @@ export default class Navbar extends React.Component { super(props) this.state = { showNav: false, - headerSize: 200 + headerSize: 200, } - this.resizeHeader = this.resizeHeader.bind(this); + this.resizeHeader = this.resizeHeader.bind(this) } componentDidMount() { - window.addEventListener('scroll', this.resizeHeader); + window.addEventListener('scroll', this.resizeHeader) } componentWillUnmount() { - window.removeEventListener('scroll', this.resizeHeader); + window.removeEventListener('scroll', this.resizeHeader) } toggleNav() { @@ -38,7 +37,9 @@ export default class Navbar extends React.Component { render() { return (