Cleaned up filed and added few comments

client/components/App.js

@@ -29,10 +29,7 @@ export default class App extends Component {
   }
 
   setCurrentUser(input) {
-    // alert(this.state.currentUsername);
-    // alert(input);
     this.setState({ ...this.state, currentUsername: input });
-    // alert(this.state.currentUsername);
     localStorage.setItem('username', input);
   }
 
@@ -43,7 +40,6 @@ export default class App extends Component {
   render() {
     return (
       <div id="outerDiv">
-      {/* <div>Username: {this.state.currentUsername}</div> */}
         <Switch>
           <Route path="/signup">
             <SignUpPage setCurrentUser={this.setCurrentUser} />

client/components/Home.js

@@ -9,15 +9,9 @@ class Home extends Component {
     this.state = {
       activeUsers: [],
       inactiveUsers: [],
-
     };
-
-    this.handleClick = this.handleClick.bind(this);
-    // this.changeStyle = this.changeStyle.bind(this);
   }
 
-
-
   componentDidMount() {
     console.log('Home page did mount')
     console.log('Home Page Current username state from app', this.props.currentUsername)
@@ -29,12 +23,8 @@ class Home extends Component {
       })
   }
 
-  handleClick() {
-    alert('username to joe button clicked');
-    this.props.setCurrentUser("Joe");
-  }
-
   render() {
+    // ARRAY TO RENDER ONLINE USERS
     const bubbles = [];
     if (this.state.activeUsers.length) {
       for (let i = 0; i < this.state.activeUsers.length; i++) {
@@ -44,10 +34,10 @@ class Home extends Component {
             user={this.state.activeUsers[i].username}
             status={this.state.activeUsers[i].status_message}
           />);
-      } 
+      }
     }
 
-
+    // ARRAY TO RENDER OFFLINE USERS
     const offline = [];
     if (this.state.inactiveUsers.length) {
       for (let i = 0; i < this.state.inactiveUsers.length; i++) {
@@ -72,11 +62,7 @@ class Home extends Component {
 
     return (
       <div>
-
-      {/* <div>Username from local storage: {localStorage.username}</div> */}
-
         <NavBar
-          text={"hello world!"}
           currentUserStatus={this.props.currentUserStatus}
           currentUserStatusMessage={this.props.currentUserStatus}
           ToggleButtonFunc={this.props.ToggleButtonFunc}

client/components/LandingPage.js

@@ -13,7 +13,7 @@ class LandingPage extends Component {
     event.preventDefault();
     console.log('Form submitted\n', `username: ${event.target[0].value}, password: ${event.target[1].value}`);
 
-    fetch('/login', { // previously fetch('/login'
+    fetch('/login', {
       method: 'POST',
       headers: {
         'Accept': 'application/json',
@@ -25,15 +25,10 @@ class LandingPage extends Component {
       })
     })
     .then(response => {
-      // alert('try to pass in Joe');
       this.props.setCurrentUser("Joe"); // fix this to pull actual username
       window.location.href = response.url;
     })
-
-  }
 
-  changeStyle() {
-    document.getElementById("root").classList.toggle("stylingV2Test");
   }
 
   render() {
@@ -50,8 +45,6 @@ class LandingPage extends Component {
       </div>
     )
   }
-
-
 }
 
 export default LandingPage;

client/components/NavBar.js

@@ -9,13 +9,9 @@ class NavBar extends Component {
   }
 
   statusSubmit(event) {
-    // console.log('before changing status', this.props.currentUserStatus)
     event.preventDefault();
-    // console.log('Status submitted\n', `message: ${event.target[0].value}`, `username: ${localStorage.username}`, `user status: ${this.props.currentUserStatus}`);
 
-    console.log(`status message will be set to ${event.target[0].value}`);
-
-    document.getElementById("navbar").classList.toggle("navBarActive"); //changing styling on button click
+    document.getElementById("navbar").classList.toggle("navBarActive"); //changing styling after status change
 
     fetch(`/users/${document.cookie.split('=')[1]}`, {
       method: 'PATCH',
@@ -28,15 +24,11 @@ class NavBar extends Component {
         status: this.props.currentUserStatus
       })
     })
-
-
   }
 
   deleteUser(event) {
-    // console.log('before changing status', this.props.currentUserStatus)
     event.preventDefault();
-    // console.log('Status submitted\n', `message: ${event.target[0].value}`, `username: ${localStorage.username}`, `user status: ${this.props.currentUserStatus}`);
-    // console.log(`status message will be set to ${event.target[0].value}`);
+
     fetch(`/users/${document.cookie.split('=')[1]}`, {
       method: 'DELETE',
       headers: {
@@ -49,7 +41,6 @@ class NavBar extends Component {
       // })
     })
     .then(response => {
-      // alert('try to pass in Joe');
       window.location.href = response.url;
     })
 
@@ -77,20 +68,12 @@ class NavBar extends Component {
 
   render() {
     return (
-
       <div id="navbar" className="navBarInactive">
         <div className="navBar">
           <form onSubmit={this.statusSubmit}>
             <input id="input" name="status" type="text" placeholder="What are you working on?"/>
             <button className='btn2' onClick={this.props.ToggleButtonFunc}> Go Active / Inactive</button>
-            {/* <label className="switch">
-              <input type="checkbox" onChange={this.statusSubmit}/>
-              <span className="slider round"></span>
-            </label> */}
           </form>
-          {/* <div>
-            This user is {this.props.currentUserStatus ? "active" : "inactive"}
-          </div> */}
 
         </div>
         <form onSubmit={this.deleteUser}>

client/styles/application.scss

@@ -2,7 +2,7 @@
 
 body {
   margin: 0px;
-  
+
 }
 
 #root {
@@ -29,7 +29,7 @@ body {
 }
 
 .btn2 {
-  
+
   background:we;
   width:225px;
   padding-top:5px;
@@ -48,7 +48,7 @@ body {
 }
 
 .btn:hover{
-  background:#2ab968; 
+  background:#2ab968;
   cursor: pointer;
 }
 
@@ -101,7 +101,7 @@ body {
     border: solid 1px;
     padding: 0px 15px;
     outline: none;
-    
+
 }
 
 .inputField {
@@ -155,66 +155,4 @@ body {
     border: solid rgb(128, 128, 128);
     font-size: 16px;
     width: 40%;
-}
-
-// toggle switch stuff
-
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 51px;
-    height: 26px;
-  }
-
-  .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgb(126, 126, 126);
-    -webkit-transition: .6s;
-    transition: .6s;
-  }
-
-  .slider:before {
-    position: absolute;
-    content: "";
-    height: 22px;
-    width: 22px;
-    left: 3px;
-    bottom: 2px;
-    background-color: rgb(214, 214, 214);
-    -webkit-transition: .6s;
-    transition: .6s;
-  }
-
-  input:checked + .slider {
-    background-color: rgb(66, 133, 81);
-  }
-
-  input:focus + .slider {
-    box-shadow: 0 0 1px #707070;
-  }
-
-  input:checked + .slider:before {
-    -webkit-transform: translateX(23px);
-    -ms-transform: translateX(23px);
-    transform: translateX(23px);
-  }
-
-  /* Rounded sliders */
-  .slider.round {
-    border-radius: 26px;
-  }
-
-  .slider.round:before {
-    border-radius: 50%;
-  }
+}