From 3b60339898fd392f148f4af2a92e4ee5a66ef7c8 Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Thu, 15 Mar 2018 14:46:21 -0700
Subject: [PATCH] move name entry out of main flow. subscribe to store updates

---
 src/react-components/ui-root.js | 49 ++++++++++++++++-----------------
 src/room.css                    |  5 ++++
 src/room.js                     |  9 ++++--
 3 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 447f6acea..08d076d04 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -8,7 +8,6 @@ const ENTRY_STEPS = {
   mic_grant: "mic_grant",
   mic_granted: "mic_granted",
   audio_setup: "audio_setup",
-  name_entry: "name_entry",
   finished: "finished"
 }
 
@@ -298,14 +297,13 @@ class UIRoot extends Component {
     }
 
     this.stopTestTone();
-    this.setState({ entryStep: ENTRY_STEPS.name_entry });
+    this.props.enterScene(this.state.mediaStream);
+    this.setState({ entryStep: ENTRY_STEPS.finished });
   }
 
   saveName = (e) => {
     e.preventDefault();
     this.props.store.update({ profile: { display_name: this.nameInput.value } });
-    this.props.enterScene(this.state.mediaStream);
-    this.setState({ entryStep: ENTRY_STEPS.finished });
   }
 
   render() {
@@ -349,30 +347,31 @@ class UIRoot extends Component {
         </div>
       ) : null;
 
-    const nameEntryPanel = this.state.entryStep === ENTRY_STEPS.name_entry
-    ? (
-        <div>
-          Name Entry
-          <form onSubmit={this.saveName}>
-            <label>Name:
-              <input
-                defaultValue={this.props.store.state.profile.display_name}
-                required pattern={SCHEMA.definitions.profile.properties.display_name.pattern}
-                title="Alphanumerics and hyphens. At least 3 characters, no more than 32"
-                ref={inp => this.nameInput = inp}/>
-            </label>
-            <input type="submit" value="Save" />
-          </form>
-        </div>
-      ) : null;
+    const nameEntryPanel = (
+      <div>
+        Name Entry
+        <form onSubmit={this.saveName}>
+          <label>Name:
+            <input
+              defaultValue={this.props.store.state.profile.display_name}
+              required pattern={SCHEMA.definitions.profile.properties.display_name.pattern}
+              title="Alphanumerics and hyphens. At least 3 characters, no more than 32"
+              ref={inp => this.nameInput = inp}/>
+          </label>
+          <input type="submit" value="Save" />
+        </form>
+      </div>
+    );
 
     const overlay = this.isWaitingForAutoExit() ?
       (<AutoExitWarning secondsRemaining={this.state.secondsRemainingBeforeAutoExit} onCancel={this.endAutoExitTimer} />) :
-      (<div>
-        {entryPanel}
-        {micPanel}
-        {audioSetupPanel}
-        {nameEntryPanel}
+      (
+        <div>
+          {entryPanel}
+          {micPanel}
+          {audioSetupPanel}
+
+          {nameEntryPanel}
         </div>
       );
 
diff --git a/src/room.css b/src/room.css
index b74a6c28f..d98df797e 100644
--- a/src/room.css
+++ b/src/room.css
@@ -19,3 +19,8 @@
   left: 0;
   position: absolute;
 }
+
+.rs-base {
+  top: auto;
+  bottom: 20px;
+}
diff --git a/src/room.js b/src/room.js
index a463ddbdb..bfb62d170 100644
--- a/src/room.js
+++ b/src/room.js
@@ -121,6 +121,11 @@ async function exitScene() {
   document.body.removeChild(scene);
 }
 
+function setNameTagFromStore() {
+  const myNametag = document.querySelector("#player-rig .nametag");
+  myNametag.setAttribute("text", "value", store.state.profile.display_name);
+}
+
 async function enterScene(mediaStream) {
   const qs = queryString.parse(location.search);
   const scene = document.querySelector("a-scene");
@@ -139,8 +144,8 @@ async function enterScene(mediaStream) {
     playerRig.setAttribute("virtual-gamepad-controls", {});
   }
 
-  const myNametag = document.querySelector("#player-rig .nametag");
-  myNametag.setAttribute("text", "value", store.state.profile.display_name);
+  setNameTagFromStore();
+  store.subscribe(setNameTagFromStore);
 
   const avatarScale = parseInt(qs.avatarScale, 10);
 
-- 
GitLab