From e3af0bcde9e44df69ed96258f82081439c19689c Mon Sep 17 00:00:00 2001
From: A Arroyo <anthony@tlon.io>
Date: Mon, 3 Feb 2020 13:11:49 -0800
Subject: [PATCH 1/4] basic join screen

---
 .../publish/src/js/components/lib/join.js     | 118 +++++++++++++++++-
 .../publish/src/js/components/root.js         |   2 +-
 2 files changed, 116 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/publish/src/js/components/lib/join.js b/pkg/interface/publish/src/js/components/lib/join.js
index d61b4d1eaa..f3b4d57b6a 100644
--- a/pkg/interface/publish/src/js/components/lib/join.js
+++ b/pkg/interface/publish/src/js/components/lib/join.js
@@ -1,13 +1,125 @@
 import React, { Component } from 'react'
+import classnames from 'classnames';
+import { Route, Link } from 'react-router-dom';
+import urbitOb from 'urbit-ob';
 
 //TODO textarea + join button to make an api call
 export class JoinScreen extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      book: '/',
+      error: false
+    };
+
+    this.bookChange = this.bookChange.bind(this);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+      const { props, state } = this;
+      if (state.book in props.notebooks) {
+        props.history.push('/~publish');
+      }
+   }
+
+  onClickJoin() {
+    const { props, state } = this;
+
+    let text = state.book;
+    // an error condition to prevent double joins?
+    if (text in props.notebooks ||
+        text.length === 0) {
+      this.setState({
+        error: true,
+      });
+      return;
+    }
+
+    let book = text.split('/');
+    let ship = book[0];
+    book.splice(0, 1);
+    book = '/' + book.join('/');
+
+    if (book.length < 2 || !urbitOb.isValidPatp(ship)) {
+      this.setState({
+        error: true,
+      });
+      return;
+    }
+
+    let actionData = {
+      subscribe: {
+        who: ship.replace('~',''),
+        book: /\/?(.*)/.exec(book)[1]
+      }
+    }
+
+    console.log('actionData', actionData);
+
+    // TODO: askHistory setting
+    window.api.action("publish","publish-action", actionData);
+
+  }
+
+  bookChange(event) {
+    this.setState({
+      book: event.target.value
+    });
+  }
+
   render() {
+    const { props } = this;
+
+    let joinClasses = "db f9 green2 ba pa2 b--green2 bg-gray0-d pointer";
+    if ((!this.state.book) || (this.state.book === "/")) {
+      joinClasses = 'db f9 gray2 ba pa2 b--gray3 bg-gray0-d pointer';
+    }
+
+    let errElem = (<span />);
+    if (this.state.error) {
+      errElem = (
+        <span className="f9 inter red2 db">
+          Notebook must have a valid name.
+        </span>
+      );
+    }
+
     return (
-      <div>
-        
+      <div className={`h-100 w-100 pa3 pt2 overflow-x-hidden flex flex-column
+      bg-gray0-d white-d`}>
+        <div
+          className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8">
+          <Link to="/~chat/">{"⟵ All Notebooks"}</Link>
+        </div>
+        <h2 className="mb3 f8">Subscribe to an Existing Notebook</h2>
+        <div className="w-100">
+          <p className="f8 lh-copy mt3 db">Enter a <span className="mono">~ship/notebook-name</span></p>
+          <p className="f9 gray2 mb4">Notebook names use lowercase, hyphens, and slashes.</p>
+          <textarea
+            ref={ e => { this.textarea = e; } }
+            className="f7 mono ba b--gray3 b--gray2-d bg-gray0-d white-d pa3 mb2 db"
+            placeholder="~zod/dream-journal"
+            spellCheck="false"
+            rows={1}
+            onKeyPress={e => {
+              if (e.key === "Enter") {
+                this.onClickJoin();
+              }
+            }}
+            style={{
+              resize: 'none',
+            }}
+            onChange={this.bookChange} />
+          {errElem}
+          <br />
+          <button
+            onClick={this.onClickJoin.bind(this)}
+            className={joinClasses}
+          >Join Chat</button>
+        </div>
       </div>
-    )
+    );
   }
 }
 
diff --git a/pkg/interface/publish/src/js/components/root.js b/pkg/interface/publish/src/js/components/root.js
index 9fd2c9f426..ca46073d7a 100644
--- a/pkg/interface/publish/src/js/components/root.js
+++ b/pkg/interface/publish/src/js/components/root.js
@@ -65,7 +65,7 @@ export class Root extends Component {
                   rightPanelHide={false}
                   sidebarShown={true}
                   notebooks={state.notebooks}>
-                    <JoinScreen/>
+                    <JoinScreen notebooks={state.notebooks} {...props} />
                   </Skeleton>
                 )
               }}/>

From 5912ba0c0c1e7e20e74317c0be9d4b00292d0b61 Mon Sep 17 00:00:00 2001
From: A Arroyo <anthony@tlon.io>
Date: Mon, 3 Feb 2020 17:27:53 -0800
Subject: [PATCH 2/4] improve validation

---
 .../publish/src/js/components/lib/join.js     | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/pkg/interface/publish/src/js/components/lib/join.js b/pkg/interface/publish/src/js/components/lib/join.js
index f3b4d57b6a..9b5f7a04db 100644
--- a/pkg/interface/publish/src/js/components/lib/join.js
+++ b/pkg/interface/publish/src/js/components/lib/join.js
@@ -16,24 +16,33 @@ export class JoinScreen extends Component {
     this.bookChange = this.bookChange.bind(this);
   }
 
-  componentDidUpdate(prevProps, prevState) {
-      const { props, state } = this;
-      if (state.book in props.notebooks) {
-        props.history.push('/~publish');
-      }
-   }
+  notebooksInclude(text, notebookObj) {
+    let verdict = false;
+    let keyPair = [];
+    // validate that it's a worthwhile thing to check
+    // certainly a unit would be nice here
+    if (text.indexOf('/') === -1) {
+      return verdict;
+    } else {
+      keyPair = text.split('/');
+    };
+    // check both levels of object
+    if (keyPair[0] in notebookObj) {
+      if (keyPair[1] in notebookObj[keyPair[0]]) {
+        verdict = true;
+      } 
+    }
+    return verdict;
+  }
 
   onClickJoin() {
     const { props, state } = this;
 
     let text = state.book;
     // an error condition to prevent double joins?
-    if (text in props.notebooks ||
+    if (this.notebooksInclude(state.book,props.notebooks) ||
         text.length === 0) {
-      this.setState({
-        error: true,
-      });
-      return;
+      props.history.push('/~publish');
     }
 
     let book = text.split('/');

From 670563d1a0241548df2ccce212d1274fd3575937 Mon Sep 17 00:00:00 2001
From: A Arroyo <anthony@tlon.io>
Date: Mon, 3 Feb 2020 17:28:13 -0800
Subject: [PATCH 3/4] include notebooks in sidebar

---
 pkg/interface/publish/src/js/components/lib/sidebar.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/publish/src/js/components/lib/sidebar.js b/pkg/interface/publish/src/js/components/lib/sidebar.js
index 39338ac6cc..73eab21787 100644
--- a/pkg/interface/publish/src/js/components/lib/sidebar.js
+++ b/pkg/interface/publish/src/js/components/lib/sidebar.js
@@ -43,12 +43,12 @@ export class Sidebar extends Component {
           <Link
           to="/~publish/new"
           className="green2 mr4 f9">
-          New
+          New Notebook
           </Link>
           <Link
           to="/~publish/join"
           className="f9 gray2">
-          Join
+          Join Notebook
           </Link>
         </div>
         <div className="overflow-y-scroll h-100">

From af1573725f4c4b5ac816b009666d3baddf187419 Mon Sep 17 00:00:00 2001
From: A Arroyo <anthony@tlon.io>
Date: Tue, 4 Feb 2020 10:15:22 -0800
Subject: [PATCH 4/4]  don't allow spurious newline in input

---
 pkg/interface/publish/src/js/components/lib/join.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pkg/interface/publish/src/js/components/lib/join.js b/pkg/interface/publish/src/js/components/lib/join.js
index 9b5f7a04db..e9843314af 100644
--- a/pkg/interface/publish/src/js/components/lib/join.js
+++ b/pkg/interface/publish/src/js/components/lib/join.js
@@ -113,6 +113,7 @@ export class JoinScreen extends Component {
             rows={1}
             onKeyPress={e => {
               if (e.key === "Enter") {
+                e.preventDefault();
                 this.onClickJoin();
               }
             }}