JSFiddle - React, Tailwind, and code Playground

by mcsf

HTML

<div id="app"></div>

CSS

body {
  font-family: Helvetica;
}

li {
  margin-bottom: 15px;
}

header {
  font-weight: bold;
}

.label {
  margin: 0 1px;
  padding: 1px;
  background: lightgray;
}

React

class MergeList extends React.Component {
	constructor(props) {
  	super(props)
    this.state = {
    	merges: []
    }
  }
  componentDidMount() {
  	fetch(`https://api.github.com/repos/WordPress/gutenberg/pulls?state=closed&sort=updated&direction=desc`).then(response =>
    	response.json()
		).then(pulls => {
    	const merges = pulls.filter(pull => !! pull.merged_at)
      merges.sort((a, b) =>
      	(new Date(b.merged_at)) - (new Date(a.merged_at))
      )
    	this.setState({ merges })
    })
  }
  render() {
  	return (
    	<ul>{ this.state.merges.map(merge =>
      	<li>
          <Header { ...merge } />
          <Excerpt { ...merge } />
          { merge.labels.map(label => <Label {...label } />) }
        </li>
      ) }</ul>
    )
  }
}

Label = ({ name, url }) =>
	<a class="label" href={ fromApi(url) }>{ name }</a>
  
Header = ({ number, html_url, title }) =>
	<header><a href={ html_url }>#{ number }</a> { title }</header>
  
Excerpt = ({ body }) =>
	<p>
    { body.substring(0, 280) }
    { body.length > 280 && '…' }
  </p>

fromApi = url =>
	url.replace()

ReactDOM.render(<MergeList />, document.querySelector("#app"))