landscape-js: moved groups to this paradigm and removed console.logs.

pkg/interface/src/App.js

@@ -35,17 +35,6 @@ const Root = styled.div`
   min-height: 100vh;
 `;
 
-const Home = () => (
-  <div>
-    Home
-    <Link className="db" to='/~chat'>Chat</Link>
-    <Link className="db" to='/~dojo'>Dojo</Link>
-    <Link className="db" to='/~groups'>Groups</Link>
-    <Link className="db" to='/~links'>Links</Link>
-    <Link className="db" to='~publish'>Publish</Link>
-  </div>
-);
-
 const StatusBarWithRouter = withRouter(StatusBar);
 
 export default class App extends React.Component {
@@ -110,7 +99,7 @@ export default class App extends React.Component {
                   selectedGroups={selectedGroups}
                   {...p} />
               )} />
-              <Route path="/~links" render={ p => (
+              <Route path="/~link" render={ p => (
                 <LinksApp
                   ship={this.ship}
                   channel={channel}

pkg/interface/src/api/groups.js

@@ -1,67 +1,37 @@
-import _ from 'lodash';
+import BaseApi from './base';
 
-export default class Api {
+
+export default class GroupsApi {
   constructor(ship, channel, store) {
+    const helper = new PrivateHelper(ship, channel, store);
+
     this.ship = ship;
-    this.bindPaths = [];
-    this.channel = channel;
-    this.store = store;
+    this.subscribe = helper.subscribe.bind(helper);
 
     this.contactHook = {
-      edit: this.contactEdit.bind(this)
+      edit: helper.contactEdit.bind(helper)
     };
 
     this.contactView = {
-      create: this.contactCreate.bind(this),
-      delete: this.contactDelete.bind(this),
-      remove: this.contactRemove.bind(this),
-      share: this.contactShare.bind(this)
+      create: helper.contactCreate.bind(helper),
+      delete: helper.contactDelete.bind(helper),
+      remove: helper.contactRemove.bind(helper),
+      share: helper.contactShare.bind(helper)
     };
 
     this.group = {
-      add: this.groupAdd.bind(this),
-      delete: this.groupRemove.bind(this)
+      add: helper.groupAdd.bind(helper),
+      delete: helper.groupRemove.bind(helper)
     };
 
     this.invite = {
-      accept: this.inviteAccept.bind(this),
-      decline: this.inviteDecline.bind(this)
+      accept: helper.inviteAccept.bind(helper),
+      decline: helper.inviteDecline.bind(helper)
     };
   }
+}
 
-  bind(path, method, ship = this.ship, app, success, fail, quit) {
-    this.bindPaths = _.uniq([...this.bindPaths, path]);
-
-    window.subscriptionId = this.channel.subscribe(ship, app, path,
-      (err) => {
-        fail(err);
-      },
-      (event) => {
-        success({
-          data: event,
-          from: {
-            ship,
-            path
-          }
-        });
-      },
-      (qui) => {
-        quit(qui);
-      });
-  }
-
-  action(appl, mark, data) {
-    return new Promise((resolve, reject) => {
-      this.channel.poke(window.ship, appl, mark, data,
-        (json) => {
-          resolve(json);
-        },
-        (err) => {
-          reject(err);
-        });
-    });
-  }
-
+class PrivateHelper extends BaseApi {
   contactViewAction(data) {
     return this.action('contact-view', 'json', data);
   }
@@ -150,7 +120,6 @@ export default class Api {
   }
 
   metadataAction(data) {
-    console.log(data);
     return this.action('metadata-hook', 'metadata-action', data);
   }
 
@@ -184,3 +153,4 @@ export default class Api {
     });
   }
 }
+

pkg/interface/src/apps/chat/app.js

@@ -5,6 +5,7 @@ import ChatApi from '../../api/chat';
 import ChatStore from '../../store/chat';
 import ChatSubscription from '../../subscription/chat';
 
+
 import './css/custom.css';
 
 import { Skeleton } from './components/skeleton';
@@ -20,8 +21,6 @@ export default class ChatApp extends React.Component {
   constructor(props) {
     super(props);
     this.store = new ChatStore();
-    this.store.setStateHandler(this.setState.bind(this));
-
     this.state = this.store.state;
     this.totalUnreads = 0;
     this.resetControllers();
@@ -37,7 +36,7 @@ export default class ChatApp extends React.Component {
     // preload spinner asset
     new Image().src = '/~landscape/img/Spinner.png';
 
-    this.store.clear();
+    this.store.setStateHandler(this.setState.bind(this));
     const channel = new this.props.channel();
     this.api = new ChatApi(this.props.ship, channel, this.store);
 
@@ -48,6 +47,7 @@ export default class ChatApp extends React.Component {
   componentWillUnmount() {
     this.subscription.delete();
     this.store.clear();
+    this.store.setStateHandler(() => {});
     this.resetControllers();
   }
 

pkg/interface/src/apps/groups/app.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { Route } from 'react-router-dom';
 
-import Api from './api';
-import Subscription from './subscription';
+import GroupsApi from '../../api/groups';
+import GroupsSubscription from '../../subscription/groups';
 import GroupsStore from '../../store/groups';
 
 import './css/custom.css';
@@ -18,24 +18,27 @@ export default class GroupsApp extends Component {
   constructor(props) {
     super(props);
     this.store = new GroupsStore();
-    this.store.setStateHandler(this.setState.bind(this));
-
     this.state = this.store.state;
     this.resetControllers();
   }
 
   componentDidMount() {
-    this.store.clear();
-    const channel = new this.props.channel();
-    this.api = new Api(this.props.ship, channel, this.store);
+    window.title = 'OS1 - Groups';
+    // preload spinner asset
+    new Image().src = '/~landscape/img/Spinner.png';
 
-    this.subscription = new Subscription(this.store, this.api, channel);
+    this.store.setStateHandler(this.setState.bind(this));
+    const channel = new this.props.channel();
+    this.api = new GroupsApi(this.props.ship, channel, this.store);
+
+    this.subscription = new GroupsSubscription(this.store, this.api, channel);
     this.subscription.start();
   }
 
   componentWillUnmount() {
     this.subscription.delete();
     this.store.clear();
+    this.store.setStateHandler(() => {});
     this.resetControllers();
   }
 

pkg/interface/src/apps/groups/components/lib/contact-card.js

@@ -141,7 +141,6 @@ export class ContactCard extends Component {
               type: 'Saving to group'
             },
             () => {
-              console.log(state.avatarToSet);
               props.api
                 .contactEdit(props.path, ship, {
                   avatar: {

pkg/interface/src/apps/groups/components/lib/group-sidebar.js

@@ -6,7 +6,6 @@ import { Sigil } from '../../../../lib/sigil';
 import { SidebarInvite } from './sidebar-invite';
 import { Welcome } from './welcome';
 
-import api from '../../api';
 import { cite } from '../../../../lib/util';
 
 export class GroupSidebar extends Component {
@@ -48,7 +47,7 @@ export class GroupSidebar extends Component {
         return (
           <SidebarInvite
             key={uid}
-            api={api}
+            api={props.api}
             invite={invite}
             uid={uid}
             history={props.history}

pkg/interface/src/apps/groups/components/skeleton.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import api from '../api';
 import { GroupSidebar } from './lib/group-sidebar';
 
 export class Skeleton extends Component {
@@ -19,7 +18,7 @@ export class Skeleton extends Component {
             selected={props.selected}
             selectedGroups={props.selectedGroups}
             history={props.history}
-            api={api}
+            api={props.api}
             associations={props.associations}
           />
           <div

pkg/interface/src/apps/groups/subscription.js

@@ -1,76 +0,0 @@
-export default class Subscription {
-  constructor(store, api, channel) {
-    this.store = store;
-    this.api = api;
-    this.channel = channel;
-
-    this.channel.setOnChannelError(this.onChannelError.bind(this));
-
-    this.firstRoundComplete = false;
-    this.secondRoundComplete = false;
-  }
-
-  start() {
-    if (this.api.ship) {
-      this.firstRound();
-    } else {
-      console.error('~~~ ERROR: Must set api.ship before operation ~~~');
-    }
-  }
-
-  delete() {
-    this.channel.delete();
-  }
-
-  onChannelError(err) {
-    console.error('event source error: ', err);
-    console.log('initiating new channel');
-    this.firstRoundComplete = false;
-    this.secondRoundComplete = false;
-    setTimeout(2000, () => {
-      this.store.handleEvent({
-        data: { clear : true }
-      });
-      this.start();
-    });
-  }
-
-  subscribe(path, app) {
-    this.api.bind(path, 'PUT', this.api.ship, app,
-      this.handleEvent.bind(this),
-      (err) => {
-        console.log(err);
-        this.subscribe(path, app);
-      },
-      () => {
-        this.subscribe(path, app);
-      });
-  }
-
-  firstRound() {
-    this.subscribe('/primary', 'contact-view');
-  }
-
-  secondRound() {
-    this.subscribe('/all', 'group-store');
-    this.subscribe('/all', 'metadata-store');
-  }
-
-  thirdRound() {
-    this.subscribe('/synced', 'contact-hook');
-    this.subscribe('/primary', 'invite-view');
-    this.subscribe('/all', 's3-store');
-  }
-
-  handleEvent(diff) {
-    if (!this.firstRoundComplete) {
-      this.firstRoundComplete = true;
-      this.secondRound();
-    } else if (!this.secondRoundComplete) {
-      this.secondRoundComplete = true;
-      this.thirdRound();
-    }
-    this.store.handleEvent(diff);
-  }
-}
-

pkg/interface/src/apps/launch/app.js

@@ -14,8 +14,6 @@ export default class LaunchApp extends React.Component {
   constructor(props) {
     super(props);
     this.store = new LaunchStore();
-    this.store.setStateHandler(this.setState.bind(this));
-
     this.state = this.store.state;
     this.resetControllers();
   }
@@ -28,9 +26,9 @@ export default class LaunchApp extends React.Component {
   componentDidMount() {
     window.title = 'OS1 - Home';
     // preload spinner asset
-    new Image().src = '/~chat/img/Spinner.png';
+    new Image().src = '/~landscape/img/Spinner.png';
 
-    this.store.clear();
+    this.store.setStateHandler(this.setState.bind(this));
     const channel = new this.props.channel();
     this.api = new LaunchApi(this.props.ship, channel, this.store);
 
@@ -42,6 +40,7 @@ export default class LaunchApp extends React.Component {
   componentWillUnmount() {
     this.subscription.delete();
     this.store.clear();
+    this.store.setStateHandler(() => {});
     this.resetControllers();
   }
 

pkg/interface/src/apps/launch/components/tiles.js

@@ -10,8 +10,7 @@ import WeatherTile from './tiles/weather';
 export default class Tiles extends React.PureComponent {
   render() {
     const { props } = this;
-    console.log('render');
-    
+
     let tiles = props.tileOrdering.filter((key) => {
       return props.tiles[key].isShown;
     }).map((key) => {

pkg/interface/src/apps/launch/components/tiles/clock.js

@@ -131,7 +131,6 @@ class Clock extends React.Component {
 
   initGeolocation() {
     if (typeof this.props.data === 'string') {
-      // console.log(typeof this.props.data)
       const latlon = this.props.data.split(',')
       const lat = latlon[0]
       const lon = latlon[1]

pkg/interface/src/apps/links/app.js

@@ -23,14 +23,18 @@ export class LinksApp extends Component {
   constructor(props) {
     super(props);
     this.store = new LinksStore();
-    this.store.setStateHandler(this.setState.bind(this));
-
     this.state = this.store.state;
     this.totalUnseen = 0;
     this.resetControllers();
   }
 
   componentDidMount() {
+    window.title = 'OS1 - Groups';
+    // preload spinner asset
+    new Image().src = '/~landscape/img/Spinner.png';
+
+    this.store.setStateHandler(this.setState.bind(this));
+
     const channel = new this.props.channel();
     this.api = new LinksApi(this.props.ship, channel, this.store);
 
@@ -41,6 +45,7 @@ export class LinksApp extends Component {
   componentWillUnmount() {
     this.subscription.delete();
     this.store.clear();
+    this.store.setStateHandler(() => {});
     this.resetControllers();
   }
 

pkg/interface/src/apps/publish/app.js

@@ -20,8 +20,6 @@ export default class PublishApp extends React.Component {
   constructor(props) {
     super(props);
     this.store = new PublishStore();
-    this.store.setStateHandler(this.setState.bind(this));
-
     this.state = this.store.state;
     this.unreadTotal = 0;
     this.resetControllers();
@@ -33,9 +31,12 @@ export default class PublishApp extends React.Component {
   }
 
   componentDidMount() {
-    window.title = 'OS1 - Publish';
+    window.title = 'OS1 - Groups';
+    // preload spinner asset
+    new Image().src = '/~landscape/img/Spinner.png';
+
+    this.store.setStateHandler(this.setState.bind(this));
 
-    this.store.clear();
     const channel = new this.props.channel();
     this.api = new PublishApi(this.props.ship, channel, this.store);
 
@@ -47,6 +48,7 @@ export default class PublishApp extends React.Component {
   componentWillUnmount() {
     this.subscription.delete();
     this.store.clear();
+    this.store.setStateHandler(() => {});
     this.resetControllers();
   }
 

pkg/interface/src/components/GroupFilter.js

@@ -55,7 +55,6 @@ export default class GroupFilter extends Component {
   groupIndex() {
     const { props } = this;
     let index = [];
-    console.log(props);
     const associations =
       (props.associations && 'contacts' in props.associations) ?
       props.associations.contacts : {};

pkg/interface/src/lib/util.js

@@ -75,7 +75,7 @@ function hexToDec(hex) {
   return hex.reverse().reduce((acc, digit, idx) => {
     const dec = alphabet.findIndex(a => a === digit.toUpperCase());
     if(dec < 0) {
-      console.log(hex);
+      console.error(hex);
       throw new Error('Incorrect hex formatting');
     }
     return acc + dec * (16 ** idx);

pkg/interface/src/reducers/launch-update.js

@@ -4,7 +4,6 @@ export default class LaunchReducer {
   reduce(json, state) {
     const data = _.get(json, 'launch-update', false);
     if (data) {
-      this.log(data, state);
       this.initial(data, state);
       this.changeFirstTime(data, state);
       this.changeOrder(data, state);
@@ -13,10 +12,6 @@ export default class LaunchReducer {
     }
   }
 
-  log(json, state) {
-    console.log(json);
-  }
-
   initial(json, state) {
     const data = _.get(json, 'initial', false);
     if (data) {

pkg/interface/src/reducers/metadata-update.js

@@ -4,7 +4,6 @@ export default class MetadataReducer {
   reduce(json, state) {
     let data = _.get(json, 'metadata-update', false);
     if (data) {
-      this.log(data, state);
       this.associations(data, state);
       this.add(data, state);
       this.update(data, state);
@@ -12,10 +11,6 @@ export default class MetadataReducer {
     }
   }
 
-  log(json, state) {
-    console.log(json);
-  }
-
   associations(json, state) {
     let data = _.get(json, 'associations', false);
     if (data) {

pkg/interface/src/subscription/base.js

@@ -12,7 +12,6 @@ export default class BaseSubscription {
 
   onChannelError(err) {
     console.error('event source error: ', err);
-    console.log('initiating new channel');
     setTimeout(2000, () => {
       this.store.clear();
       this.start();

pkg/interface/src/subscription/chat.js

@@ -15,7 +15,6 @@ export default class ChatSubscription extends BaseSubscription {
 
 
   fetchMessages(start, end, path) {
-    console.log(start, end, path);
     fetch(`/chat-view/paginate/${start}/${end}${path}`)
       .then(response => response.json())
       .then((json) => {

pkg/interface/src/subscription/groups.js

@@ -0,0 +1,14 @@
+import BaseSubscription from './base';
+
+export default class GroupsSubscription extends BaseSubscription {
+  start() {
+    this.subscribe('/primary', 'contact-view');
+    this.subscribe('/all', 'group-store');
+    this.subscribe('/all', 'metadata-store');
+    this.subscribe('/synced', 'contact-hook');
+    this.subscribe('/primary', 'invite-view');
+    this.subscribe('/all', 's3-store');
+  }
+}
+
+