From 611730c289d9c7d99515ed787ade98184a6f3c7a Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Wed, 11 Sep 2019 19:06:30 +0200
Subject: [PATCH] Refactor Nav

---
 client/components/Nav.jsx | 757 ++++++++++++++++++++------------------
 1 file changed, 393 insertions(+), 364 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 31b7e5b8..4fc0ea61 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -217,6 +217,396 @@ class Nav extends React.PureComponent {
     this.timer = setTimeout(this.setDropdown.bind(this, 'none'), 10);
   }
 
+  renderProjectMenu(navDropdownState) {
+    return (
+      <ul className="nav__items-left" title="project-menu">
+        <li className="nav__item-logo">
+          <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+        </li>
+        <li className={navDropdownState.file}>
+          <button
+            onClick={this.toggleDropdownForFile}
+            onBlur={this.handleBlur}
+            onFocus={this.clearHideTimeout}
+            onMouseOver={() => {
+              if (this.state.dropdownOpen !== 'none') {
+                this.setDropdown('file');
+              }
+            }}
+          >
+            <span className="nav__item-header">File</span>
+            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+          </button>
+          <ul className="nav__dropdown">
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleNew}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+              >
+                New
+              </button>
+            </li>
+            { __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleSave}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+              >
+                Save
+                <span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
+              </button>
+            </li> }
+            { this.props.project.id && this.props.user.authenticated &&
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleDuplicate}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+              >
+                Duplicate
+              </button>
+            </li> }
+            { this.props.project.id &&
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleShare}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+              >
+                Share
+              </button>
+            </li> }
+            { this.props.project.id &&
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleDownload}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+              >
+                Download
+              </button>
+            </li> }
+            { this.props.user.authenticated &&
+            <li className="nav__dropdown-item">
+              <Link
+                to={`/${this.props.user.username}/sketches`}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                Open
+              </Link>
+            </li> }
+            { __process.env.EXAMPLES_ENABLED &&
+            <li className="nav__dropdown-item">
+              <Link
+                to="/p5/sketches"
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                Examples
+              </Link>
+            </li> }
+          </ul>
+        </li>
+        <li className={navDropdownState.edit}>
+          <button
+            onClick={this.toggleDropdownForEdit}
+            onBlur={this.handleBlur}
+            onFocus={this.clearHideTimeout}
+            onMouseOver={() => {
+              if (this.state.dropdownOpen !== 'none') {
+                this.setDropdown('edit');
+              }
+            }}
+          >
+            <span className="nav__item-header">Edit</span>
+            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+          </button>
+          <ul className="nav__dropdown" >
+            <li className="nav__dropdown-item">
+              <button
+                onClick={() => {
+                  this.props.cmController.tidyCode();
+                  this.setDropdown('none');
+                }}
+                onFocus={this.handleFocusForEdit}
+                onBlur={this.handleBlur}
+              >
+                Tidy Code
+                <span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleFind}
+                onFocus={this.handleFocusForEdit}
+                onBlur={this.handleBlur}
+              >
+                Find
+                <span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleFindNext}
+                onFocus={this.handleFocusForEdit}
+                onBlur={this.handleBlur}
+              >
+                Find Next
+                <span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleFindPrevious}
+                onFocus={this.handleFocusForEdit}
+                onBlur={this.handleBlur}
+              >
+                Find Previous
+                <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
+              </button>
+            </li>
+          </ul>
+        </li>
+        <li className={navDropdownState.sketch}>
+          <button
+            onClick={this.toggleDropdownForSketch}
+            onBlur={this.handleBlur}
+            onFocus={this.clearHideTimeout}
+            onMouseOver={() => {
+              if (this.state.dropdownOpen !== 'none') {
+                this.setDropdown('sketch');
+              }
+            }}
+          >
+            <span className="nav__item-header">Sketch</span>
+            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+          </button>
+          <ul className="nav__dropdown">
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleAddFile}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Add File
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleAddFolder}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Add Folder
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleRun}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Run
+                <span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleStop}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Stop
+                <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
+              </button>
+            </li>
+            {/* <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleStartAccessible}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Start Accessible
+                <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+1</span>
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleStopAccessible}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Stop Accessible
+                <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+2</span>
+              </button>
+            </li> */}
+          </ul>
+        </li>
+        <li className={navDropdownState.help}>
+          <button
+            onClick={this.toggleDropdownForHelp}
+            onBlur={this.handleBlur}
+            onFocus={this.clearHideTimeout}
+            onMouseOver={() => {
+              if (this.state.dropdownOpen !== 'none') {
+                this.setDropdown('help');
+              }
+            }}
+          >
+            <span className="nav__item-header">Help & Feedback</span>
+            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+          </button>
+          <ul className="nav__dropdown">
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForHelp}
+                onBlur={this.handleBlur}
+                onClick={this.handleKeyboardShortcuts}
+              >
+                Keyboard Shortcuts
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <a
+                href="https://p5js.org/reference/"
+                target="_blank"
+                rel="noopener noreferrer"
+                onFocus={this.handleFocusForHelp}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >Reference
+              </a>
+            </li>
+            <li className="nav__dropdown-item">
+              <Link
+                to="/about"
+                onFocus={this.handleFocusForHelp}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                About
+              </Link>
+            </li>
+            <li className="nav__dropdown-item">
+              <Link
+                to="/feedback"
+                onFocus={this.handleFocusForHelp}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                Feedback
+              </Link>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    );
+  }
+
+  renderUnauthenticatedUserMenu(navDropdownState) {
+    return (
+      <ul className="nav__items-right" title="user-menu">
+        <li>
+          <Link to="/login">
+            <span className="nav__item-header">Log in</span>
+          </Link>
+        </li>
+        <span className="nav__item-spacer">or</span>
+        <li>
+          <Link to="/signup">
+            <span className="nav__item-header">Sign up</span>
+          </Link>
+        </li>
+      </ul>
+    );
+  }
+
+  renderAuthenticatedUserMenu(navDropdownState) {
+    return (
+      <ul className="nav__items-right" title="user-menu">
+        <li className="nav__item">
+          <span>Hello, {this.props.user.username}!</span>
+        </li>
+        <span className="nav__item-spacer">|</span>
+        <li className={navDropdownState.account}>
+          <button
+            className="nav__item-header"
+            onClick={this.toggleDropdownForAccount}
+            onBlur={this.handleBlur}
+            onFocus={this.clearHideTimeout}
+            onMouseOver={() => {
+              if (this.state.dropdownOpen !== 'none') {
+                this.setDropdown('account');
+              }
+            }}
+          >
+            My Account
+            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+          </button>
+          <ul className="nav__dropdown">
+            <li className="nav__dropdown-item">
+              <Link
+                to={`/${this.props.user.username}/sketches`}
+                onFocus={this.handleFocusForAccount}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                My sketches
+              </Link>
+            </li>
+            <li className="nav__dropdown-item">
+              <Link
+                to={`/${this.props.user.username}/assets`}
+                onFocus={this.handleFocusForAccount}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                My assets
+              </Link>
+            </li>
+            <li className="nav__dropdown-item">
+              <Link
+                to="/account"
+                onFocus={this.handleFocusForAccount}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                Settings
+              </Link>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleLogout}
+                onFocus={this.handleFocusForAccount}
+                onBlur={this.handleBlur}
+              >
+                Log out
+              </button>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    );
+  }
+
+  renderUserMenu(navDropdownState) {
+    const isLoginEnabled = __process.env.LOGIN_ENABLED;
+    const isAuthenticated = this.props.user.authenticated;
+
+    if (isLoginEnabled && isAuthenticated) {
+      return this.renderAuthenticatedUserMenu(navDropdownState);
+    } else if (isLoginEnabled && !isAuthenticated) {
+      return this.renderUnauthenticatedUserMenu(navDropdownState);
+    }
+
+    return null;
+  }
+
   render() {
     const navDropdownState = {
       file: classNames({
@@ -240,372 +630,11 @@ class Nav extends React.PureComponent {
         'nav__item--open': this.state.dropdownOpen === 'account'
       })
     };
+  
     return (
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
-        <ul className="nav__items-left" title="project-menu">
-          <li className="nav__item-logo">
-            <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
-          </li>
-          <li className={navDropdownState.file}>
-            <button
-              onClick={this.toggleDropdownForFile}
-              onBlur={this.handleBlur}
-              onFocus={this.clearHideTimeout}
-              onMouseOver={() => {
-                if (this.state.dropdownOpen !== 'none') {
-                  this.setDropdown('file');
-                }
-              }}
-            >
-              <span className="nav__item-header">File</span>
-              <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
-            </button>
-            <ul className="nav__dropdown">
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleNew}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                >
-                  New
-                </button>
-              </li>
-              { __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleSave}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                >
-                  Save
-                  <span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
-                </button>
-              </li> }
-              { this.props.project.id && this.props.user.authenticated &&
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleDuplicate}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                >
-                  Duplicate
-                </button>
-              </li> }
-              { this.props.project.id &&
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleShare}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                >
-                  Share
-                </button>
-              </li> }
-              { this.props.project.id &&
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleDownload}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                >
-                  Download
-                </button>
-              </li> }
-              { this.props.user.authenticated &&
-              <li className="nav__dropdown-item">
-                <Link
-                  to={`/${this.props.user.username}/sketches`}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                  onClick={this.setDropdownForNone}
-                >
-                  Open
-                </Link>
-              </li> }
-              { __process.env.EXAMPLES_ENABLED &&
-              <li className="nav__dropdown-item">
-                <Link
-                  to="/p5/sketches"
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                  onClick={this.setDropdownForNone}
-                >
-                  Examples
-                </Link>
-              </li> }
-            </ul>
-          </li>
-          <li className={navDropdownState.edit}>
-            <button
-              onClick={this.toggleDropdownForEdit}
-              onBlur={this.handleBlur}
-              onFocus={this.clearHideTimeout}
-              onMouseOver={() => {
-                if (this.state.dropdownOpen !== 'none') {
-                  this.setDropdown('edit');
-                }
-              }}
-            >
-              <span className="nav__item-header">Edit</span>
-              <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
-            </button>
-            <ul className="nav__dropdown" >
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={() => {
-                    this.props.cmController.tidyCode();
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocusForEdit}
-                  onBlur={this.handleBlur}
-                >
-                  Tidy Code
-                  <span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleFind}
-                  onFocus={this.handleFocusForEdit}
-                  onBlur={this.handleBlur}
-                >
-                  Find
-                  <span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleFindNext}
-                  onFocus={this.handleFocusForEdit}
-                  onBlur={this.handleBlur}
-                >
-                  Find Next
-                  <span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleFindPrevious}
-                  onFocus={this.handleFocusForEdit}
-                  onBlur={this.handleBlur}
-                >
-                  Find Previous
-                  <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
-                </button>
-              </li>
-            </ul>
-          </li>
-          <li className={navDropdownState.sketch}>
-            <button
-              onClick={this.toggleDropdownForSketch}
-              onBlur={this.handleBlur}
-              onFocus={this.clearHideTimeout}
-              onMouseOver={() => {
-                if (this.state.dropdownOpen !== 'none') {
-                  this.setDropdown('sketch');
-                }
-              }}
-            >
-              <span className="nav__item-header">Sketch</span>
-              <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
-            </button>
-            <ul className="nav__dropdown">
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleAddFile}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Add File
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleAddFolder}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Add Folder
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleRun}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Run
-                  <span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleStop}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Stop
-                  <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
-                </button>
-              </li>
-              {/* <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleStartAccessible}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Start Accessible
-                  <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+1</span>
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleStopAccessible}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Stop Accessible
-                  <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+2</span>
-                </button>
-              </li> */}
-            </ul>
-          </li>
-          <li className={navDropdownState.help}>
-            <button
-              onClick={this.toggleDropdownForHelp}
-              onBlur={this.handleBlur}
-              onFocus={this.clearHideTimeout}
-              onMouseOver={() => {
-                if (this.state.dropdownOpen !== 'none') {
-                  this.setDropdown('help');
-                }
-              }}
-            >
-              <span className="nav__item-header">Help & Feedback</span>
-              <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
-            </button>
-            <ul className="nav__dropdown">
-              <li className="nav__dropdown-item">
-                <button
-                  onFocus={this.handleFocusForHelp}
-                  onBlur={this.handleBlur}
-                  onClick={this.handleKeyboardShortcuts}
-                >
-                  Keyboard Shortcuts
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <a
-                  href="https://p5js.org/reference/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onFocus={this.handleFocusForHelp}
-                  onBlur={this.handleBlur}
-                  onClick={this.setDropdownForNone}
-                >Reference
-                </a>
-              </li>
-              <li className="nav__dropdown-item">
-                <Link
-                  to="/about"
-                  onFocus={this.handleFocusForHelp}
-                  onBlur={this.handleBlur}
-                  onClick={this.setDropdownForNone}
-                >
-                  About
-                </Link>
-              </li>
-              <li className="nav__dropdown-item">
-                <Link
-                  to="/feedback"
-                  onFocus={this.handleFocusForHelp}
-                  onBlur={this.handleBlur}
-                  onClick={this.setDropdownForNone}
-                >
-                  Feedback
-                </Link>
-              </li>
-            </ul>
-          </li>
-        </ul>
-        { __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
-          <ul className="nav__items-right" title="user-menu">
-            <li>
-              <Link to="/login">
-                <span className="nav__item-header">Log in</span>
-              </Link>
-            </li>
-            <span className="nav__item-spacer">or</span>
-            <li>
-              <Link to="/signup">
-                <span className="nav__item-header">Sign up</span>
-              </Link>
-            </li>
-          </ul>}
-        { __process.env.LOGIN_ENABLED && this.props.user.authenticated &&
-          <ul className="nav__items-right" title="user-menu">
-            <li className="nav__item">
-              <span>Hello, {this.props.user.username}!</span>
-            </li>
-            <span className="nav__item-spacer">|</span>
-            <li className={navDropdownState.account}>
-              <button
-                className="nav__item-header"
-                onClick={this.toggleDropdownForAccount}
-                onBlur={this.handleBlur}
-                onFocus={this.clearHideTimeout}
-                onMouseOver={() => {
-                  if (this.state.dropdownOpen !== 'none') {
-                    this.setDropdown('account');
-                  }
-                }}
-              >
-                My Account
-                <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
-              </button>
-              <ul className="nav__dropdown">
-                <li className="nav__dropdown-item">
-                  <Link
-                    to={`/${this.props.user.username}/sketches`}
-                    onFocus={this.handleFocusForAccount}
-                    onBlur={this.handleBlur}
-                    onClick={this.setDropdownForNone}
-                  >
-                    My sketches
-                  </Link>
-                </li>
-                <li className="nav__dropdown-item">
-                  <Link
-                    to={`/${this.props.user.username}/assets`}
-                    onFocus={this.handleFocusForAccount}
-                    onBlur={this.handleBlur}
-                    onClick={this.setDropdownForNone}
-                  >
-                    My assets
-                  </Link>
-                </li>
-                <li className="nav__dropdown-item">
-                  <Link
-                    to="/account"
-                    onFocus={this.handleFocusForAccount}
-                    onBlur={this.handleBlur}
-                    onClick={this.setDropdownForNone}
-                  >
-                    Settings
-                  </Link>
-                </li>
-                <li className="nav__dropdown-item">
-                  <button
-                    onClick={this.handleLogout}
-                    onFocus={this.handleFocusForAccount}
-                    onBlur={this.handleBlur}
-                  >
-                    Log out
-                  </button>
-                </li>
-              </ul>
-            </li>
-          </ul> }
+        {this.renderProjectMenu(navDropdownState)}
+        {this.renderUserMenu(navDropdownState)}
         {/*
         <div className="nav__announce">
           This is a preview version of the editor, that has not yet been officially released.