From 08b67400a92563b5bb72549410c8f450f6b92313 Mon Sep 17 00:00:00 2001
From: Nitin Patel <31539366+niinpatel@users.noreply.github.com>
Date: Thu, 4 Apr 2019 15:25:13 +0530
Subject: [PATCH] docs: add rooms feature to examples/exchange-files (#1949)

As mentioned in issue #1632, currently, it is impossible to guess that there is the room feature on the exchange files example.

So, I added a textbox and a button which can be used for subscribing to a different room. Here's a small preview of the feature:

![ipfs rooms demo (2)](https://user-images.githubusercontent.com/31539366/54750766-d7742400-4bfe-11e9-825c-7b0ff6007c8a.gif)

closes #1632

License: MIT
Signed-off-by: Nitin Patel <nitinpatel278@gmail.com>
---
 .../exchange-files-in-browser/public/app.js   | 29 +++++++++++++++++--
 .../public/index.html                         |  8 +++++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/examples/exchange-files-in-browser/public/app.js b/examples/exchange-files-in-browser/public/app.js
index 55ae5ab046..08cafae670 100644
--- a/examples/exchange-files-in-browser/public/app.js
+++ b/examples/exchange-files-in-browser/public/app.js
@@ -24,8 +24,12 @@ const $allDisabledButtons = document.querySelectorAll('button:disabled')
 const $allDisabledInputs = document.querySelectorAll('input:disabled')
 const $allDisabledElements = document.querySelectorAll('.disabled')
 
-const FILES = []
-const workspace = location.hash
+// Workspace inputs
+const $workspaceInput = document.querySelector('#workspace-input')
+const $workspaceBtn = document.querySelector('#workspace-btn')
+
+let FILES = []
+let workspace = location.hash
 
 let fileSize = 0
 
@@ -65,6 +69,8 @@ function start () {
         .catch((error) => onError(error))
 
       subscribeToWorkpsace()
+
+      window.addEventListener('hashchange', workspaceUpdated)
     })
   }
 }
@@ -87,9 +93,25 @@ const messageHandler = (message) => {
 
 const subscribeToWorkpsace = () => {
   node.pubsub.subscribe(workspace, messageHandler)
+    .then(() => {
+      const msg = `Subscribed to workspace ${workspace}`
+      $logs.innerHTML = msg
+    })
     .catch(() => onError('An error occurred when subscribing to the workspace.'))
 }
 
+// unsubscribe from old workspace and re-subscribe to new one
+const workspaceUpdated = () => {
+  node.pubsub.unsubscribe(workspace).then(() => {
+    // clear files from old workspace
+    FILES = []
+    $fileHistory.innerHTML = ''
+
+    workspace = location.hash
+    subscribeToWorkpsace()
+  })
+}
+
 const publishHash = (hash) => {
   const data = Buffer.from(hash)
 
@@ -327,6 +349,9 @@ const startApplication = () => {
   $dragContainer.addEventListener('dragleave', onDragLeave)
   $fetchButton.addEventListener('click', getFile)
   $connectButton.addEventListener('click', connectToPeer)
+  $workspaceBtn.addEventListener('click', () => {
+    window.location.hash = $workspaceInput.value
+  })
 
   start()
 }
diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html
index b753caf3a2..59906b7b25 100644
--- a/examples/exchange-files-in-browser/public/index.html
+++ b/examples/exchange-files-in-browser/public/index.html
@@ -31,6 +31,14 @@ <h3>Logs</h3>
             <pre id="logs" class="success">Initializing node...</pre>
           </div>
         </div>
+
+        <div>
+          <h3>Workspace</h3>
+          <div class="input-button">
+            <input id="workspace-input" type="text" placeholder="Enter workspace name" disabled />
+            <button id="workspace-btn" disabled>Join</button>
+          </div>
+        </div>
       </div>