React and Gun showing list of Github issues

main.js

/**
  * Main.js
  */
'use strict';

import React from 'react'
import { render } from 'react-dom'

const gun = Gun(location.origin +'/gun');
const GUN_PATH = 'repo_42';
const repo = gun.get(GUN_PATH);

const AppTitleMixin = {
    setAppTitle: function(title) {
        document.title = `${ title.trim() } | Workboard`;
    }
};

const LocalStorageMixin = {
    set: function(key, val) {
        localStorage.setItem(key, JSON.stringify(val));
    },

    get: function(key) {
        let val = JSON.parse(localStorage.getItem(key));
        return val ? val : null;
    }
};

const HTTPRequestMixin = {
    getJSON: function(url) {
        return fetch(url)
            .then(resp => resp.json());
    }
};

const App = React.createClass({

    mixins: [ HTTPRequestMixin ],

    getInitialState() {
        return {items: {}};
    },

    componentWillMount() {
    },

    fetchData() {
        this.getJSON('https://api.github.com/repos/octocat/Hello-World/issues')
            .then(resp => {
                let _repo = {id: GUN_PATH};
                resp.map((n) => {
                    _repo[n.id] = n;
                });
                importGUN3(_repo);
            })
            .then(() => {
                let items = {};
                repo.map((node, id) => {
                    items[id] = node;
                });
                this.setState({ items });
            });
    },

    componentDidMount() {
        this.fetchData(); 
    },

    handleClick(e) {
        let key = e.target.getAttribute('data-key'),
            items = this.state.items;

        repo.path(key).val((node) => {
            if (Object.keys(node).includes('watching') && node.watching === true) {
                repo.path(key).put({
                    watching: false
                });
            } else {
                repo.path(key).put({
                    watching: true
                });
            }
            console.log('__found %s', node.number);
        });

        repo.path(key).val((node) => {
            items[key] = node;
            this.setState({ items: items });
        });
    },

    handleFetch() {
        this.fetchData();
    },

    dragOver(e) {
        console.log('__dragover');
    },
    
    dragOver(e) {
        console.log('__dragover');
    },

    dragStart(e) {
        console.log('__dragstart');
    },

    dragEnd(e) {
        console.log('__dragend');
    },

    render() {
        console.log('__render', this.state);

        let list = Object.keys(this.state.items).map(key => {
            let node = this.state.items[key];
            return {[key]: node, watching: node.watching ? node.watching : false};
        });
        list.sort((a, b) => {
            return a.watching - b.watching;
        });

        let listItems = list.reverse().map(node => {
            let key = Object.keys(node).shift(),
                item = node[key];


            return <li key={ key } draggable="true"
                        id={ key }
                        onDragEnd={ this.onDragEnd }
                        onDragStart={ this.onDragStart }
                        data-watching={ item.watching }>
                            <span>{ item.title }</span>
                            <span>Number: #{ item.number }</span>
                            <button data-key={ key } onClick={ this.handleClick }>
                                { item.watching ? 'Stop Watching' : 'Start Watching' }
                            </button>
                </li>;
        });

        return <div><button onClick={ this.handleFetch }>Fetch Data</button>
                <ul onDragOver={ this.dragOver }>{ listItems }</ul>
            </div>
    }
});

const ROOT = document.getElementById('appmount');

render(
        <App />,
        ROOT
    );