var React = require('react'),
  component = require('omniscient'),
  Immutable = require('immutable'),
  immstruct = require('immstruct');

var state = immstruct({
  stream: {
    items: [{
      title: "Hello....",
      canonical: [{
        href: "https://www.google.com"
      }],
      summary: {
        direction: "ltr",
        content: "This here is a fine article."
      },
      author: "I'm an author!!!!"
    }]
  },
  subscriptions: [{
    id: 'feed/https://lobste.rs/rss',
    title: 'ebi',
    categories: [],
    sortid: '014C4B14',
    firstitemmsec: 1425041239589549,
    url: 'https://lobste.rs/rss',
    htmlUrl: 'https://lobste.rs/',
    iconUrl: 'https://www.inoreader.com/cache/favicons/l/o/b/lobste_rs_16x16.png'
  }],
  showSidebar: false
});

global.state = state;

var Feed = require('./js/feed.js'),
  Sidebar = require('./js/sidebar.js'),
  Login = require('./js/login.js'),
  pass = require('./js/pass.js');

var Api = require('./js/api.js')(pass.username, pass.password);
global.Api = Api;

var d = React.DOM;

var MainApp = component('MainApp', function (props) {
  var data = props.current.toJS();
  var toggleSidebar = function () {
    state.cursor('showSidebar').update(function (flag) {
      return !flag;
    });
  }
  return d.div({
      id: 'main-app',
      className: (data.showSidebar) ? 'show-nav' : ''
    }, d.div({
      id: 'canvas'
    }, d.div({
        id: 'sidebar-menu'
      }, d.h2({}, 'Subscriptions'),

      Sidebar({
        subscriptions: data.subscriptions
      })), 
      d.a({
        href: '#',
        className: 'toggle-nav',
        onClick: toggleSidebar
      }, d.i({
	id: 'toggle-icon',
        className: 'fa fa-bars fa-lg'
      })), Feed(data.stream))

  );
});

function render() {
  React.render(
    MainApp(state),
    document.getElementById('app'));
}

render();
state.on('swap', render);

Api.subscriptionList().then(function (obj) {
  state.cursor('subscriptions').update(function () {
    return obj.subscriptions;
  });
  return obj.subscriptions[0].id;
}).then(Api.streamContents).then(function (obj) {
  state.cursor('stream').update('items', function (d) {
    return obj.items;
  });
});

@@ -1263,31 +1263,24 @@
 turn d.div(%7B
-%0A      
 id: 'main-ap
@@ -1282,22 +1282,16 @@
 in-app',
-%0A     
  classNa
@@ -1330,31 +1330,34 @@
 av' : ''
-%0A
+%7D,%0A%09
     
-%7D,
+  
  d.div(%7B
 %0A      i
@@ -1348,23 +1348,16 @@
  d.div(%7B
-%0A      
 id: 'can
@@ -1364,23 +1364,25 @@
 vas'
-%0A
+%7D,%0A%09%09
     
-%7D,
  d.div(%7B
 %0A   
@@ -1377,25 +1377,16 @@
  d.div(%7B
-%0A        
 id: 'sid
@@ -1395,25 +1395,24 @@
 ar-menu'
-%0A      %7D,
+%7D,%0A%09%09%09  
  d.h2(%7B%7D
@@ -1431,20 +1431,19 @@
 ions'),%0A
-%0A   
+%09%09%09
    Sideb
@@ -1446,25 +1446,16 @@
 idebar(%7B
-%0A        
 subscrip
@@ -1483,22 +1483,15 @@
 ions
-%0A      
 %7D)),
- %0A 
+%0A%09%09
     
@@ -1496,25 +1496,16 @@
    d.a(%7B
-%0A        
 href: '#
@@ -1507,22 +1507,19 @@
 f: '#',%0A
-      
+%09%09%09
   classN
@@ -1537,22 +1537,19 @@
 e-nav',%0A
-      
+%09%09%09
   onClic
@@ -1568,25 +1568,20 @@
 ebar
-%0A      %7D,
+%7D,%0A%09%09%09
  d.i(%7B
-%0A%09
 id: 
@@ -1594,24 +1594,16 @@
 e-icon',
-%0A       
  classNa
@@ -1628,19 +1628,19 @@
 -lg'
-%0A      %7D)),
+%7D)),%0A%09%09    
  Fee
@@ -1658,12 +1658,8 @@
 am))
-%0A%0A  
 );%0A%7D

Reformat React DOM elements because web-beautify doesn't work well with them