From 9f56327753b914be3cebbb9ee55b7be29092b896 Mon Sep 17 00:00:00 2001
From: Asara <amarpreet@minhas.io>
Date: Tue, 27 Aug 2019 02:17:32 -0400
Subject: [PATCH 1/5] Try to rip out the auth menu

---
 src/components/AuthMenu.js | 85 ++++++++++++++++++++++++++++++++++++++
 src/components/NavBar.js   | 33 ++-------------
 2 files changed, 89 insertions(+), 29 deletions(-)
 create mode 100644 src/components/AuthMenu.js

diff --git a/src/components/AuthMenu.js b/src/components/AuthMenu.js
new file mode 100644
index 0000000..f171faf
--- /dev/null
+++ b/src/components/AuthMenu.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+class AuthMenu extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+        where_in_auth_menu: "username",
+        auth_menu_visible: true,
+    }
+    this.handleSignUpRequest = this.handleSignUpRequest.bind(this)
+    this.handleLogInAttempt = this.handleLogInAttempt.bind(this)
+    this.handleAccountCreation = this.handleAccountCreation.bind(this)
+  }
+
+  handleSignUpRequest() {
+    this.setState(state => ({
+      where_in_auth_menu: "email",
+      auth_menu_visible: true,
+    }));
+  }
+
+  handleLogInAttempt() {
+    this.setState(state => ({
+      where_in_auth_menu: "password",
+      auth_menu_visible: true,
+    }));
+  }
+  handleAccountCreation() {
+    this.setState(state => ({
+      where_in_auth_menu: "password",
+      auth_menu_visible: true,
+    }));
+  }
+
+  render() {
+    return (
+      <div>
+        {(() => {
+          switch(this.state.auth_location) {
+            case 'username':
+              return (
+                <div className="ui menu dropdown" style={{display: "inline"}}>
+                  <div className="ui left icon input">
+                    <input type="text" placeholder="Username">
+                    </input>
+                    <i className="users icon"></i>
+                  </div>
+                  <div className="fluid ui buttons">
+                    <button onClick={this.handleSignUpRequest} className="ui button">Sign Up</button>
+                    <div className="or"></div>
+                    <button className="ui positive button">Sign In</button>
+                  </div>
+                </div>
+              )
+            case 'password':
+              return (
+                <div className="ui menu dropdown" style={{display: "inline"}}>
+                  <div className="ui left icon input">
+                    <input type="text" placeholder="Username">
+                    </input>
+                    <i className="users icon"></i>
+                  </div>
+                </div>
+              )
+            default:
+              return null;
+          }
+        })()}
+      </div>
+    )
+  }
+}
+
+
+
+const mapStateToProps = (state) => {
+    return {
+        where_in_auth_menu: state.where_in_auth_menu,
+    };
+}
+
+export default connect(
+    mapStateToProps,
+)(AuthMenu);
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 8916883..5c9f374 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -1,32 +1,7 @@
 import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
 import { connect } from 'react-redux';
-
-function AuthMenu(props) {
-  if (!props.showMenu) {
-    return null;
-  }
-
-  return (
-    <div className="ui menu dropdown" style={{display: "inline"}}>
-      <div className="ui left icon input">
-        <input type="text" placeholder="Username">
-        </input>
-        <i className="users icon"></i>
-      </div>
-      <div className="ui left icon input">
-        <input type="text" placeholder="Password">
-        </input>
-        <i className="lock icon"></i>
-      </div>
-      <div className="fluid ui buttons">
-        <button className="ui button">Sign Up</button>
-        <div className="or"></div>
-        <button className="ui positive button">Sign In</button>
-      </div>
-    </div>
-    )
-}
+import AuthMenu from './AuthMenu';
 
 class NavBar extends Component {
   constructor (props) {
@@ -34,14 +9,14 @@ class NavBar extends Component {
     this.state = {
         logged_in: false,
         auth_menu_visible: false,
-        where_in_auth_menu: false,
+        where_in_auth_menu: "username",
     }
     this.handleLoginDropdown = this.handleLoginDropdown.bind(this)
   }
 
   handleLoginDropdown() {
     this.setState(state => ({
-      auth_menu_visible: !state.auth_menu_visible
+      auth_menu_visible: true
     }));
   }
 
@@ -55,7 +30,7 @@ class NavBar extends Component {
          <div onClick={this.handleLoginDropdown} className='item ui button dropdown'>
            Login
            <i className="dropdown icon"></i>
-           <AuthMenu showMenu={this.state.auth_menu_visible}></AuthMenu>
+           <AuthMenu showMenu={this.state.auth_menu_visible} auth_location={this.state.where_in_auth_menu}></AuthMenu>
          </div>
        </div>
      </div>

From 27a29d827a08e24eee5183fe1b4c684225c13068 Mon Sep 17 00:00:00 2001
From: Asara <amarpreet@minhas.io>
Date: Tue, 27 Aug 2019 20:21:11 -0400
Subject: [PATCH 2/5] Clean up unneeded additions to the state

---
 src/components/AuthMenu.js | 12 +-----------
 src/components/NavBar.js   |  3 +--
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/AuthMenu.js b/src/components/AuthMenu.js
index f171faf..89ff872 100644
--- a/src/components/AuthMenu.js
+++ b/src/components/AuthMenu.js
@@ -72,14 +72,4 @@ class AuthMenu extends Component {
   }
 }
 
-
-
-const mapStateToProps = (state) => {
-    return {
-        where_in_auth_menu: state.where_in_auth_menu,
-    };
-}
-
-export default connect(
-    mapStateToProps,
-)(AuthMenu);
+export default (AuthMenu)
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 5c9f374..c1ec86f 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -9,7 +9,6 @@ class NavBar extends Component {
     this.state = {
         logged_in: false,
         auth_menu_visible: false,
-        where_in_auth_menu: "username",
     }
     this.handleLoginDropdown = this.handleLoginDropdown.bind(this)
   }
@@ -30,7 +29,7 @@ class NavBar extends Component {
          <div onClick={this.handleLoginDropdown} className='item ui button dropdown'>
            Login
            <i className="dropdown icon"></i>
-           <AuthMenu showMenu={this.state.auth_menu_visible} auth_location={this.state.where_in_auth_menu}></AuthMenu>
+           <AuthMenu showMenu={this.state.auth_menu_visible}></AuthMenu>
          </div>
        </div>
      </div>

From 6e57686f8f99a0052306202556a69c171fe643d3 Mon Sep 17 00:00:00 2001
From: Asara <amarpreet@minhas.io>
Date: Tue, 27 Aug 2019 20:53:20 -0400
Subject: [PATCH 3/5] I think i'm almost there

---
 src/components/AuthMenu.js | 72 ++++++++++++++++++++------------------
 src/components/NavBar.js   |  2 +-
 2 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/components/AuthMenu.js b/src/components/AuthMenu.js
index 89ff872..fe3357e 100644
--- a/src/components/AuthMenu.js
+++ b/src/components/AuthMenu.js
@@ -6,11 +6,12 @@ class AuthMenu extends Component {
     super(props)
     this.state = {
         where_in_auth_menu: "username",
-        auth_menu_visible: true,
+        auth_menu_visible: props.auth_menu_visible,
     }
     this.handleSignUpRequest = this.handleSignUpRequest.bind(this)
     this.handleLogInAttempt = this.handleLogInAttempt.bind(this)
     this.handleAccountCreation = this.handleAccountCreation.bind(this)
+    this.authMenu = this.authMenu.bind(this)
   }
 
   handleSignUpRequest() {
@@ -33,41 +34,44 @@ class AuthMenu extends Component {
     }));
   }
 
+  authMenu() {
+    if (!this.state.auth_menu_visible) {
+        return null;
+    }
+    switch(this.state.where_in_auth_menu) {
+      case 'username':
+        return (
+          <div className="ui menu dropdown" style={{display: "inline"}}>
+            <div className="ui left icon input">
+              <input type="text" placeholder="Username">
+              </input>
+              <i className="users icon"></i>
+            </div>
+            <div className="fluid ui buttons">
+              <button onClick={this.handleSignUpRequest} className="ui button">Sign Up</button>
+              <div className="or"></div>
+              <button className="ui positive button">Sign In</button>
+            </div>
+          </div>
+        )
+      case 'password':
+        return (
+          <div className="ui menu dropdown" style={{display: "inline"}}>
+            <div className="ui left icon input">
+              <input type="text" placeholder="Username">
+              </input>
+              <i className="users icon"></i>
+            </div>
+          </div>
+        )
+      default:
+        return null;
+    }
+  }
+
   render() {
     return (
-      <div>
-        {(() => {
-          switch(this.state.auth_location) {
-            case 'username':
-              return (
-                <div className="ui menu dropdown" style={{display: "inline"}}>
-                  <div className="ui left icon input">
-                    <input type="text" placeholder="Username">
-                    </input>
-                    <i className="users icon"></i>
-                  </div>
-                  <div className="fluid ui buttons">
-                    <button onClick={this.handleSignUpRequest} className="ui button">Sign Up</button>
-                    <div className="or"></div>
-                    <button className="ui positive button">Sign In</button>
-                  </div>
-                </div>
-              )
-            case 'password':
-              return (
-                <div className="ui menu dropdown" style={{display: "inline"}}>
-                  <div className="ui left icon input">
-                    <input type="text" placeholder="Username">
-                    </input>
-                    <i className="users icon"></i>
-                  </div>
-                </div>
-              )
-            default:
-              return null;
-          }
-        })()}
-      </div>
+      this.authMenu(this.state.auth_menu_visible)
     )
   }
 }
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index c1ec86f..80f4742 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -29,7 +29,7 @@ class NavBar extends Component {
          <div onClick={this.handleLoginDropdown} className='item ui button dropdown'>
            Login
            <i className="dropdown icon"></i>
-           <AuthMenu showMenu={this.state.auth_menu_visible}></AuthMenu>
+           <AuthMenu auth_menu_visible={this.state.auth_menu_visible}></AuthMenu>
          </div>
        </div>
      </div>

From 776a567c0c887aa111eb0712af43ef0ecdc9e38a Mon Sep 17 00:00:00 2001
From: Asara <amarpreet@minhas.io>
Date: Tue, 27 Aug 2019 21:01:42 -0400
Subject: [PATCH 4/5] interm

---
 src/components/AuthMenu.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/AuthMenu.js b/src/components/AuthMenu.js
index fe3357e..26ff733 100644
--- a/src/components/AuthMenu.js
+++ b/src/components/AuthMenu.js
@@ -4,14 +4,17 @@ import { connect } from 'react-redux';
 class AuthMenu extends Component {
   constructor (props) {
     super(props)
+
     this.state = {
         where_in_auth_menu: "username",
         auth_menu_visible: props.auth_menu_visible,
     }
+
     this.handleSignUpRequest = this.handleSignUpRequest.bind(this)
     this.handleLogInAttempt = this.handleLogInAttempt.bind(this)
     this.handleAccountCreation = this.handleAccountCreation.bind(this)
     this.authMenu = this.authMenu.bind(this)
+
   }
 
   handleSignUpRequest() {

From 2fcbe3b2daf87af95c1d1186d80ef26b4bfcd191 Mon Sep 17 00:00:00 2001
From: Asara <amarpreet@minhas.io>
Date: Tue, 27 Aug 2019 21:17:11 -0400
Subject: [PATCH 5/5] working base to merge

---
 src/components/AuthMenu.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/AuthMenu.js b/src/components/AuthMenu.js
index 26ff733..7fc4e94 100644
--- a/src/components/AuthMenu.js
+++ b/src/components/AuthMenu.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
 
 class AuthMenu extends Component {
   constructor (props) {
@@ -7,7 +6,6 @@ class AuthMenu extends Component {
 
     this.state = {
         where_in_auth_menu: "username",
-        auth_menu_visible: props.auth_menu_visible,
     }
 
     this.handleSignUpRequest = this.handleSignUpRequest.bind(this)
@@ -38,7 +36,7 @@ class AuthMenu extends Component {
   }
 
   authMenu() {
-    if (!this.state.auth_menu_visible) {
+    if (!this.props.auth_menu_visible) {
         return null;
     }
     switch(this.state.where_in_auth_menu) {
@@ -53,7 +51,7 @@ class AuthMenu extends Component {
             <div className="fluid ui buttons">
               <button onClick={this.handleSignUpRequest} className="ui button">Sign Up</button>
               <div className="or"></div>
-              <button className="ui positive button">Sign In</button>
+              <button onClick={this.handleLogInAttempt} className="ui positive button">Sign In</button>
             </div>
           </div>
         )
@@ -61,9 +59,9 @@ class AuthMenu extends Component {
         return (
           <div className="ui menu dropdown" style={{display: "inline"}}>
             <div className="ui left icon input">
-              <input type="text" placeholder="Username">
+              <input type="text" placeholder="Password">
               </input>
-              <i className="users icon"></i>
+              <i className="lock icon"></i>
             </div>
           </div>
         )