react-issuemd-poc

react-issuemd-poc.carbide.md

react-issuemd-poc

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.

cell0.js

import React from 'react'
import ReactDOM from 'react-dom'
import $ from 'jquery'
import issuestring from './cell1.js'
console.clear();

let $app = $('<div id="app" />');
$(document.body).html($app);

const IssueItem = props =>
    <div className="issue" dangerouslySetInnerHTML={{ __html: props.content }} style={props.style} />

const IssueList = props =>
    <div className="collection">
    {props.issues.map(issue =>
        <IssueItem style={{
            backgroundColor: ['defect', 'bug'].indexOf(issue.attr('type')) !== -1 ? 'red' : 'silver',
            padding: props.padding || '1em'
        }} content={issue.html()} />
    )}
    </div>

$.getScript('https://cdn.jsdelivr.net/g/issuemd', () => {

    issuemd.fn.map = function(cb) {
        let list = [];
        this.each(item => {
            list.push(cb(item));
        });
        return list;
    };

	var issues = issuemd(issuestring);
    
    console.log(issues.map(item => item.hash()))

    ReactDOM.render(<IssueList issues={issues} padding="0.5em 2em" />, document.getElementById('app'))

});

cell1.js

export default `## some random issue
+ created: 2014-02-03T22:33:00.000+0000
+ creator: Billy Moon

Just a super simple issue with no type

## some other random issue
+ created: 2014-02-03T22:33:00.000+0000
+ creator: Billy Moon
+ type: bug

Just a super simple issue with a type this time

`;