import React from 'react';

import withCache from './withCache';
import newsFecher from './newsFetcher';
import Placeholder from './Placeholder';

@withCache
export default class News extends React.Component {
  static getDerivedStateFromProps = (nextProps, nextState) => ({
    news: newsFetcher(nextProps.cache)
  });
 
  render() {
    const { news } = this.state;
    
    return (
      <Placeholder delayMs={1000} fallback={<h1>Loading..</h1>}>
        {news.map(this.renderNewsItem)}
      </Placeholder>
    )
  }
  
  renderNewsItem = (nws, idx) => (
    <div key={`nws.${idx}-${nws.id}`}>
      <h2>{nws.title}</h2>
      <p>{nws.body}</p>
    </div>
  );
}