publish: add sidebar switcher and popout logic

The scaffold and reducer work thus far had some bugs and shims. This commit
adds the parameters, API calls and fixes the reducers for the two
features.

pkg/interface/publish/src/js/api.js

@@ -1,7 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import _ from 'lodash';
-import { uuid } from '/lib/util';
+import { store } from './store'
 
 class UrbitApi {
   setAuthTokens(authTokens) {
@@ -125,10 +123,9 @@ class UrbitApi {
       sidebarBoolean = false;
     }
     store.handleEvent({
-      type: {
-        local: {
-          'sidebarToggle': sidebarBoolean
-        }
+      type: "local",
+      data: {
+        'sidebarToggle': sidebarBoolean
       }
     });
   }

pkg/interface/publish/src/js/components/root.js

@@ -55,7 +55,7 @@ export class Root extends Component {
             popout={false}
             active={"rightPanel"}
             rightPanelHide={false}
-            sidebarShown={true}
+            sidebarShown={state.sidebarShown}
             invites={state.invites}
             notebooks={state.notebooks}
             contacts={contacts}>
@@ -75,7 +75,7 @@ export class Root extends Component {
                   popout={false}
                   active={"rightPanel"}
                   rightPanelHide={false}
-                  sidebarShown={true}
+                  sidebarShown={state.sidebarShown}
                   invites={state.invites}
                   notebooks={state.notebooks}
                   contacts={contacts}>
@@ -83,12 +83,14 @@ export class Root extends Component {
                   </Skeleton>
                 )
               }}/>
-      <Route exact path="/~publish/(popout)?/notebook/:ship/:notebook/:view?"
+      <Route exact path="/~publish/:popout?/notebook/:ship/:notebook/:view?"
         render={ (props) => {
           let view = (props.match.params.view)
           ? props.match.params.view
           : "posts";
 
+          let popout = !!props.match.params.popout || false;
+
           let ship = props.match.params.ship || "";
           let notebook = props.match.params.notebook || "";
 
@@ -105,7 +107,7 @@ export class Root extends Component {
                 popout={false}
                 active={"rightPanel"}
                 rightPanelHide={false}
-                sidebarShown={true}
+                sidebarShown={state.sidebarShown}
                 invites={state.invites}
                 notebooks={state.notebooks}
                 contacts={contacts}
@@ -114,6 +116,8 @@ export class Root extends Component {
                   notebooks={state.notebooks}
                   ship={ship}
                   book={notebook}
+                  sidebarShown={state.sidebarShown}
+                  popout={popout}
                   {...props}
                 />
               </Skeleton>
@@ -125,7 +129,7 @@ export class Root extends Component {
                 popout={false}
                 active={"rightPanel"}
                 rightPanelHide={false}
-                sidebarShown={true}
+                sidebarShown={state.sidebarShown}
                 invites={state.invites}
                 notebooks={state.notebooks}
                 contacts={contacts}
@@ -137,19 +141,23 @@ export class Root extends Component {
                   book={notebook}
                   groups={state.groups}
                   contacts={notebookContacts}
+                  sidebarShown={state.sidebarShown}
+                  popout={popout}
                   {...props}
                 />
               </Skeleton>
             );
           }
         }}/>
-      <Route exact path="/~publish/(popout)?/note/:ship/:notebook/:note"
+      <Route exact path="/~publish/:popout?/note/:ship/:notebook/:note"
         render={ (props) => {
           let ship = props.match.params.ship || "";
           let notebook = props.match.params.notebook || "";
           let path = `${ship}/${notebook}`
           let note = props.match.params.note || "";
 
+          let popout = !!props.match.params.popout || false;
+
           let bookGroupPath =
             state.notebooks[ship][notebook]["subscribers-group-path"];
           let notebookContacts = (bookGroupPath in state.contacts)
@@ -160,7 +168,7 @@ export class Root extends Component {
               popout={false}
               active={"rightPanel"}
               rightPanelHide={false}
-              sidebarShown={true}
+              sidebarShown={state.sidebarShown}
               invites={state.invites}
               notebooks={state.notebooks}
               contacts={contacts}
@@ -171,6 +179,8 @@ export class Root extends Component {
                 contacts={notebookContacts}
                 ship={ship}
                 note={note}
+                sidebarShown={state.sidebarShown}
+                popout={popout}
               />
             </Skeleton>
           );

pkg/interface/publish/src/js/reducers/local.js

@@ -1,17 +0,0 @@
-import _ from 'lodash';
-
-export class LocalReducer {
-    reduce(json, state) {
-        let data = _.get(json, 'local', false);
-        if (data) {
-            this.sidebarToggle(data, state);
-        }
-    }
-
-    sidebarToggle(obj, state) {
-        let data = _.has(obj, 'sidebarToggle', false);
-        if (data) {
-            state.sidebarShown = obj.sidebarToggle;
-        }
-    }
-}

pkg/interface/publish/src/js/reducers/response.js

@@ -68,7 +68,7 @@ export class ResponseReducer {
           for (var key in json.data.notebook.notes) {
             let oldNote = state.notebooks[json.host][json.notebook].notes[key];
             if (!(oldNote)) {
-              state.notebooks[json.host][json.notebook].notes[key] = 
+              state.notebooks[json.host][json.notebook].notes[key] =
                 json.data.notebook.notes[key];
             } else if (!(oldNote.build)) {
               state.notebooks[json.host][json.notebook].notes[key]["author"] =
@@ -124,7 +124,7 @@ export class ResponseReducer {
         for (var key in json.data.notes) {
           let oldNote = state.notebooks[json.host][json.notebook].notes[key];
           if (!(oldNote)) {
-            state.notebooks[json.host][json.notebook].notes[key] = 
+            state.notebooks[json.host][json.notebook].notes[key] =
               json.data.notes[key];
           } else if (!(oldNote.build)) {
             state.notebooks[json.host][json.notebook].notes[key]["author"] =
@@ -149,7 +149,7 @@ export class ResponseReducer {
   }
 
   handleCommentsPage(json, state) {
-    if (state.notebooks[json.host] && 
+    if (state.notebooks[json.host] &&
         state.notebooks[json.host][json.notebook] &&
         state.notebooks[json.host][json.notebook].notes[json.note])
     {
@@ -186,11 +186,11 @@ export class ResponseReducer {
       throw Error("tried to fetch paginated comments, but we don't have the note");
     }
   }
-  
+
   sidebarToggle(json, state) {
-    let data = _.has(json, 'sidebarToggle', false);
+    let data = _.has(json.data, 'sidebarToggle', false);
     if (data) {
-        state.sidebarShown = json.type.local.sidebarToggle;
+        state.sidebarShown = json.data.sidebarToggle;
     }
   }
 

pkg/interface/publish/src/js/store.js

@@ -13,7 +13,7 @@ class Store {
       permissions: {},
       invites: {},
       spinner: false,
-      sidebarShown: false,
+      sidebarShown: true
     }
 
     this.initialReducer  = new InitialReducer();