From 6dc7d596764905a90456a2ebabcdb88aaeca50ca Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 30 Apr 2020 19:59:12 -0400
Subject: [PATCH] spa: stubbing global api, statusbar design fix

---
 pkg/interface/src/components/GroupFilter.js |  5 +++--
 pkg/interface/src/components/StatusBar.js   |  8 +++-----
 pkg/interface/src/lib/api.js                | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 pkg/interface/src/lib/api.js

diff --git a/pkg/interface/src/components/GroupFilter.js b/pkg/interface/src/components/GroupFilter.js
index d4a95eec2a..1b64db8d1a 100644
--- a/pkg/interface/src/components/GroupFilter.js
+++ b/pkg/interface/src/components/GroupFilter.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import api from '../lib/api';
 
 export default class GroupFilter extends Component {
   constructor(props) {
@@ -24,7 +25,7 @@ export default class GroupFilter extends Component {
     const selected = localStorage.getItem('urbit-selectedGroups');
     if (selected) {
       this.setState({ selected: JSON.parse(selected) }, (() => {
-        window.api.setSelected(this.state.selected);
+        api.setSelected(this.state.selected);
       }));
     }
   }
@@ -197,7 +198,7 @@ onClick={() => this.addGroup(group)}
           'f9 gray2 bb bl br b--gray3 b--gray2-d bg-gray0-d ' +
           'white-d pa3 db w-100 inter bg-gray5 lh-solid tl'
         }
-style={{ width: 251 }}
+        style={{ width: 251 }}
         >
         {allSelected}
         </div>
diff --git a/pkg/interface/src/components/StatusBar.js b/pkg/interface/src/components/StatusBar.js
index 0d053ca81f..fbb4973966 100644
--- a/pkg/interface/src/components/StatusBar.js
+++ b/pkg/interface/src/components/StatusBar.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useLocation, Link } from 'react-router-dom';
 
 import GroupFilter from './GroupFilter';
-// import { Sigil } from "/components/lib/icons/sigil";
+import { Sigil } from '../lib/sigil';
 
 const getLocationName = (basePath) => {
   if (basePath === '~chat')
@@ -10,8 +10,6 @@ return 'Chat';
   // if (path === '~chat') return 'Publish';
 };
 
-const Sigil = () => (<div />);
-
 const StatusBar = (props) => {
   const location = useLocation();
   const basePath = location.pathname.split('/')[1];
@@ -33,10 +31,10 @@ const StatusBar = (props) => {
       }
       style={{ height: 45 }}
     >
-      <div className="fl lh-copy absolute left-0" style={{ top: 8 }}>
+      <div className="fl lh-copy absolute left-0 pl4" style={{ top: 8 }}>
       <a href="/~groups/me" className="dib v-top">
           <Sigil
-            ship={'~' + props.ship}
+            ship={'~' + window.ship}
             classes="v-mid mix-blend-diff"
             size={16}
             color={'#000000'}
diff --git a/pkg/interface/src/lib/api.js b/pkg/interface/src/lib/api.js
new file mode 100644
index 0000000000..cb1582ba48
--- /dev/null
+++ b/pkg/interface/src/lib/api.js
@@ -0,0 +1,18 @@
+import store from '../apps/chat/store.js';
+
+class UrbitApi {
+  setSelected(selected) {
+    if (window.location.href.includes('~chat')) {
+      store.handleEvent({
+        data: {
+          local: {
+            selected: selected
+          }
+        }
+      });
+    }
+  }
+}
+
+const api = new UrbitApi();
+export default api;