From 9aae96438cea7950af758da5d377831afa888c99 Mon Sep 17 00:00:00 2001
From: Isaac Visintainer <isaac.visintainer@gmail.com>
Date: Tue, 11 Jun 2019 16:01:53 -0700
Subject: [PATCH] cleanup

---
 apps/publish/src/js/components/blog.js   |   5 +-
 apps/publish/src/js/components/header.js | 302 +++--------------------
 apps/publish/src/js/components/post.js   |   6 +-
 apps/publish/src/js/components/recent.js |   7 +-
 apps/publish/src/js/subscription.js      |  27 +-
 5 files changed, 53 insertions(+), 294 deletions(-)

diff --git a/apps/publish/src/js/components/blog.js b/apps/publish/src/js/components/blog.js
index 0a5ddad1b..63e27d6e3 100644
--- a/apps/publish/src/js/components/blog.js
+++ b/apps/publish/src/js/components/blog.js
@@ -14,7 +14,7 @@ export class Blog extends Component {
     let ship = this.props.ship;
     let blog = this.retrieveColl(blogId, ship);
 
-    console.log("buildposts", blog);
+    console.log("buildPosts", blog);
 
     let pinProps = blog.order.pin.map((post) => {
       return this.buildPostPreviewProps(post, blogId, ship, true);
@@ -73,10 +73,11 @@ export class Blog extends Component {
   render() {
     let blog = this.retrieveColl(this.props.blogId, this.props.ship);
     let postProps = this.buildPosts();
-    let posts = postProps.map((post) => {
+    let posts = postProps.map((post, key) => {
       return (
         <PostPreview
           post={post}
+          key={key}
         />
       );
     });
diff --git a/apps/publish/src/js/components/header.js b/apps/publish/src/js/components/header.js
index 2bd079890..f1036beb6 100644
--- a/apps/publish/src/js/components/header.js
+++ b/apps/publish/src/js/components/header.js
@@ -2,276 +2,56 @@ import React, { Component } from 'react';
 import { BrowserRouter, Route } from 'react-router-dom';
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';
+import { PublishCreate } from '/components/lib/publish-create';
+import { HeaderMenu } from '/components/lib/header-menu';
+import { PathControl } from '/components/lib/path-control';
+import { Switch, withRouter } from 'react-router';
 
 export class Header extends Component {
-  constructor(props) {
+  constructor(props){
     super(props);
   }
 
-  retrievePost(post, coll, who) {
-    if (who === window.ship) {
-      return this.props.pubs[coll].posts[post].post;
-    } else {
-      return this.props.subs[who][coll].posts[post].post;
-    }
-  }
-
-  retrieveComments(post, coll, who) {
-    if (who === window.ship) {
-      return this.props.pubs[coll].posts[post].comments;
-    } else {
-      return this.props.subs[who][coll].posts[post].comments;
-    }
-  }
-
-  retrieveColl(coll, who) {
-    if (who === window.ship) {
-      return this.props.pubs[coll].info;
-    } else {
-      return this.props.subs[who][coll].info;
-    }
-  }
-
   render() {
     return (
-      <div className="cf w-100">
-        <div className="fl w-100">
-          <p className="fl body-large b gray-50 publish">Publish</p>
-          <p className="label-regular b fr">+ Create</p>
-        </div>
+      <div className="cf w-100 bg-white h-publish-header">
+        <Switch>
+          <Route exact path="/~publish/recent" component={HeaderMenu}/>
+          <Route exact path="/~publish/subs" component={HeaderMenu}/>
+          <Route exact path="/~publish/pubs" component={HeaderMenu}/>
 
-        <Route exact path="/~publish/recent"
-          render={ (props) => {
-            return (
-              <div className="fl w-100 flex">
-                <div className="fl bb b-gray-30" style={{ width: 16 }}>
-                </div>
-                <div className="fl bb" style={{ flexBasis: 148 }}>
-                  <Link to="/~publish/recent">
-                    <p className="fl w-100 h2 label-regular">
-                      Recent
-                    </p>
-                  </Link>
-                </div>
-                <div className="fl bb b-gray-30" style={{ width: 16 }}>
-                </div>
-                <div className="fl bb b-gray-30" style={{ flexBasis: 148 }}>
-                  <Link to="/~publish/subs">
-                    <p className="fl w-100 h2 label-regular gray-30">
-                      Subscriptions
-                    </p>
-                  </Link>
-                </div>
-                <div className="fl bb b-gray-30" style={{ width: 16 }}>
-                </div>
-                <div className="fl bb b-gray-30" style={{ flexBasis: 148 }}>
-                  <Link to="/~publish/pubs">
-                    <p className="fl w-100 h2 label-regular gray-30">
-                      My Blogs
-                    </p>
-                  </Link>
-                </div>
-                <div className="fl bb b-gray-30" style={{ flexGrow: 1}}>
-                </div>
-              </div>
-            );
-          }} />
+          <Route exact path="/~publish/new" 
+            render={ (props) => {
+              return (
+                <PathControl {...this.props} {...props}/>
+              )
+            }}/>
+          <Route exact path="/~publish/new/blog"
+            render={ (props) => {
+              return (
+                <PathControl {...this.props} {...props}/>
+              )
+            }}/>
+          <Route exact path="/~publish/new/post"
+            render={ (props) => {
+              return (
+                <PathControl {...this.props} {...props}/>
+              )
+            }}/>
 
-        <Route exact path="/~publish/subs"
-          render={ (props) => {
-            return (
-              <div className="fl w-100 flex">
-                <div className="fl bb b-gray-30" style={{ width: 16 }}>
-                </div>
-                <div className="fl bb b-gray-30" style={{ flexBasis: 148 }}>
-                  <Link to="/~publish/recent">
-                    <p className="fl w-100 h2 label-regular gray-30">
-                      Recent
-                    </p>
-                  </Link>
-                </div>
-                <div className="fl bb b-gray-30" style={{ width: 16 }}>
-                </div>
-                <div className="fl bb" style={{ flexBasis: 148 }}>
-                  <Link to="/~publish/subs">
-                    <p className="fl w-100 h2 label-regular">
-                      Subscriptions
-                    </p>
-                  </Link>
-                </div>
-                <div className="fl bb b-gray-30" style={{ width: 16 }}>
-                </div>
-                <div className="fl bb b-gray-30" style={{ flexBasis: 148 }}>
-                  <Link to="/~publish/pubs">
-                    <p className="fl w-100 h2 label-regular gray-30">
-                      My Blogs
-                    </p>
-                  </Link>
-                </div>
-                <div className="fl bb b-gray-30" style={{ flexGrow: 1}}>
-                </div>
-              </div>
-            );
-          }} />
-
-        <Route exact path="/~publish/pubs"
-          render={ (props) => {
-            return (
-              <div className="fl w-100 flex">
-                <div className="fl bb b-gray-30" style={{ width: 16 }}>
-                </div>
-                <div className="fl bb b-gray-30" style={{ flexBasis: 148 }}>
-                  <Link to="/~publish/recent">
-                    <p className="fl w-100 h2 label-regular gray-30">
-                      Recent
-                    </p>
-                  </Link>
-                </div>
-                <div className="fl bb b-gray-30" style={{ width: 16 }}>
-                </div>
-                <div className="fl bb b-gray-30" style={{ flexBasis: 148 }}>
-                  <Link to="/~publish/subs">
-                    <p className="fl w-100 h2 label-regular gray-30">
-                      Subscriptions
-                    </p>
-                  </Link>
-                </div>
-                <div className="fl bb b-gray-30" style={{ width: 16 }}>
-                </div>
-                <div className="fl bb" style={{ flexBasis: 148 }}>
-                  <Link to="/~publish/pubs">
-                    <p className="fl w-100 h2 label-regular">
-                      My Blogs
-                    </p>
-                  </Link>
-                </div>
-                <div className="fl bb b-gray-30" style={{ flexGrow: 1}}>
-                </div>
-              </div>
-            );
-          }} />
-
-        <Route exact path="/~publish/:ship/:blog"
-          render={ (props) => {
-            let ship = props.match.params.ship.slice(1);
-            let blogId = props.match.params.blog;
-
-            let blogLink = `/~publish/~${ship}/${blogId}`;
-            let blog = this.retrieveColl(blogId, ship);
-            let blogName = blog.title;
-
-            return (
-              <div className="fl w-100 flex b-gray-30 bb">
-                <Link to="/~publish/recent">
-                  <p className="fl gray-30 label-regular" style={{ marginLeft: 16}}>
-                    Home
-                  </p>
-                </Link>
-                <p className="fl gray-30 label-regular">
-                  ->
-                </p>
-                <Link to={blogLink}>
-                  <p className="fl label-regular">
-                    {blogName}
-                  </p>
-                </Link>
-              </div>
-            );
-          }} />
-
-        <Route exact path="/~publish/:ship/:blog/:post"
-          render={ (props) => {
-            let ship = props.match.params.ship.slice(1);
-            let blogId = props.match.params.blog;
-            let postId = props.match.params.post;
-
-            let blogLink = `/~publish/~${ship}/${blogId}`;
-            let blog = this.retrieveColl(blogId, ship);
-            let blogName = blog.title;
-
-            let postLink = `/~publish/~${ship}/${blogId}/${postId}`;
-            let post = this.retrievePost(postId, blogId, ship);
-            let postName = post.info.title;
-
-            return (
-              <div className="fl w-100 flex b-gray-30 bb">
-                <Link to="/~publish/recent">
-                  <p className="fl gray-30 label-regular" style={{ marginLeft: 16}}>
-                    Home
-                  </p>
-                </Link>
-                <p className="fl gray-30 label-regular">
-                  ->
-                </p>
-                <Link to={blogLink}>
-                  <p className="fl gray-30 label-regular">
-                    {blogName}
-                  </p>
-                </Link>
-                <p className="fl gray-30 label-regular">
-                  ->
-                </p>
-                <Link to={postLink}>
-                  <p className="fl label-regular">
-                    {postName}
-                  </p>
-                </Link>
-              </div>
-            );
-          }} />
-      
-        <Route exact path="/~publish/new"
-          render={ (props) => {
-            return (
-              <div className="fl w-100 flex b-gray-30 bb">
-                <Link to="/~publish/recent">
-                  <p className="fl gray-30 label-regular" style={{ marginLeft: 16}}>
-                    Home
-                  </p>
-                </Link>
-                <p className="fl gray-30 label-regular">
-                  ->
-                </p>
-                <p className="fl label-regular">
-                  New
-                </p>
-              </div>
-            );
-          }} />
-
-        <Route exact path="/~publish/:ship/:blog/new"
-          render={ (props) => {
-            let ship = props.match.params.ship.slice(1);
-            let blogId = props.match.params.blog;
-
-            let blogLink = `/~publish/~${ship}/${blogId}`;
-            let blog = this.retrieveColl(blogId, ship);
-            let blogName = blog.title;
-
-            return (
-              <div className="fl w-100 flex b-gray-30 bb">
-                <Link to="/~publish/recent">
-                  <p className="fl gray-30 label-regular" style={{ marginLeft: 16}}>
-                    Home
-                  </p>
-                </Link>
-                <p className="fl gray-30 label-regular">
-                  ->
-                </p>
-                <Link to={blogLink}>
-                  <p className="fl gray-30 label-regular">
-                    {blogName}
-                  </p>
-                </Link>
-                <p className="fl gray-30 label-regular">
-                  ->
-                </p>
-                <p className="fl label-regular">
-                  New Post
-                </p>
-              </div>
-            );
-          }} />
+          <Route exact path="/~publish/:ship/:blog"
+            render={ (props) => {
+              return (
+                <PathControl {...this.props} {...props}/>
+              )
+            }}/>
+          <Route exact path="/~publish/:ship/:blog/:post"
+            render={ (props) => {
+              return (
+                <PathControl {...this.props} {...props}/>
+              )
+            }}/>
+        </Switch>
       </div>
     );
   }
diff --git a/apps/publish/src/js/components/post.js b/apps/publish/src/js/components/post.js
index ae35f12d7..cfc9552db 100644
--- a/apps/publish/src/js/components/post.js
+++ b/apps/publish/src/js/components/post.js
@@ -109,20 +109,20 @@ export class Post extends Component {
     let authorDate = `${post.info.creator} • ${date}`;
 
     // change unpin to concatenation of pinned and unpinned
-    let morePosts = blog.order.unpin.slice(0,10).map((pid) => {
+    let morePosts = blog.order.unpin.slice(0,10).map((pid, i) => {
 
       let p = this.retrievePost(pid, this.props.blogId, this.props.ship);
       let color = (pid == this.props.postId) ? "black" : "gray-50";
       let postLink = `/~publish/~${this.props.ship}/${this.props.blogId}/${pid}`;
       return (
-        <Link to={postLink} className="label-regular">
+        <Link to={postLink} className="label-regular" key={i}>
           <p className={color}>{p.info.title}</p>
         </Link>
       );
     });
 
     return (
-      <div className="w-688 flex-col center mt4">
+      <div className="mw-688 center mt4 flex-col" style={{flexBasis: 688}}>
         <Link to={blogLink}>
           <p className="body-regular">
             {blogLinkText}
diff --git a/apps/publish/src/js/components/recent.js b/apps/publish/src/js/components/recent.js
index a4e4e3a13..38c3af753 100644
--- a/apps/publish/src/js/components/recent.js
+++ b/apps/publish/src/js/components/recent.js
@@ -134,17 +134,18 @@ export class Recent extends Component {
   render() {
     let recent = this.buildRecent();
 
-    let body = recent.map((group) => {
-      let posts = group.posts.map((post) => {
+    let body = recent.map((group, i) => {
+      let posts = group.posts.map((post, j) => {
         return (
           <RecentPreview
             post={post}
+            key={j}
           />
         );
       });
       let date = this.dateLabel(group.date);
       return (
-        <div>
+        <div key={i}>
           <div className="w-100 h-80">
             <h2 className="gray-50">
               {date}
diff --git a/apps/publish/src/js/subscription.js b/apps/publish/src/js/subscription.js
index 220bbf547..037921945 100644
--- a/apps/publish/src/js/subscription.js
+++ b/apps/publish/src/js/subscription.js
@@ -6,42 +6,19 @@ import { store } from '/store';
 export class Subscription {
   start() {
     if (api.authTokens) {
-      console.log("subscription.start", window.injectedState);
-      this.initializeLandscape();
-      this.setCleanupTasks();
+      this.initializePublish();
     } else {
       console.error("~~~ ERROR: Must set api.authTokens before operation ~~~");
     }
   }
 
-  setCleanupTasks() {
-    window.addEventListener("beforeunload", e => {
-      api.bindPaths.forEach(p => {
-        this.wipeSubscription(p);
-      });
-    });
-  }
-
-  wipeSubscription(path) {
-    api.hall({
-      wipe: {
-        sub: [{
-          hos: api.authTokens.ship,
-          pax: path
-        }]
-      }
-    });
-  }
-
-
-  initializeLandscape() {
+  initializePublish() {
     api.bind(`/primary`, "PUT", api.authTokens.ship, 'write',
       this.handleEvent.bind(this),
       this.handleError.bind(this));
   }
 
   handleEvent(diff) {
-    console.log("subscription.handleEvent", diff);
     store.handleEvent(diff);
   }