news.tsx

import * as React from 'react'
import Deanna from '../../assets/images/news/Deanna-thumb.jpg'
import LightsWW18 from '../../assets/images/news/LightsWW18-thm.jpg'
import causerresearch from '../../assets/images/news/commoncauseresearch-thumb.jpg'
import impossiblegarden from '../../assets/images/news/Impossible-garden-thumb.jpg'
import LazyLoad from 'react-lazyload'
import rssParser from 'rss-parser'
let parser = new rssParser()

export interface IAppProps {}

export interface IAppState {
  items: object[]
}

// TO DO:

// * Change to container component and pass data down as props
// *  Add loading placeholder for when data is being loaded (maybe look at suspense)
// * Lazy load images
// * add proper state and props interfaces
// Add destructuring for cleaner syntax
export default class News extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps) {
    super(props)

    this.state = {
      items: []
    }
  }
  public async componentDidMount(): any {
    const feed = await parser.parseURL('http://localhost:8000/news-feed.rss')

    const top4items = feed.items.slice(0, 4)

    this.setState({
      items: feed.items.slice(0, 4)
    })
  }

  public render() {
    const {items} = this.state
    const renderNewsMarkup = items.map(item => {
      return (
        <React.Fragment>
          <div className="card card-basic bg-white card-news faux-link-container">
            <img src={Deanna} className="card-img" />
            <div className="card-text">
              <p>
                <a href={item.link}>{item.title}</a>
              </p>
            </div>
            <a href={item.link} className="faux-link" aria-hidden="true">
              {item.title}
            </a>
          </div>
        </React.Fragment>
      )
    })

    return (
      <section className="container">
        <div className="content-slice bg-uob-grey">
          <div className="content-max-width">
            <h2 className="slice-heading text-xxl">News</h2>
            <p className="dt-2-3">
              Our academics and students regularly make the headlines. From
              life-changing research to enterprising partnerships, major awards
              to charitable endeavours, Bristol is bursting with inspiration.
            </p>
            <div className="cards cards-news">{renderNewsMarkup}</div>
          </div>
        </div>
      </section>
    )
  }
}