Refactor App to render navbar

dustin-chan · Dec 6, 2018 · 8324142 · 8324142
1 parent 25cdf02
commit 8324142
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 17 deletions.
diff --git a/app/assets/stylesheets/components/main_content.scss b/app/assets/stylesheets/components/main_content.scss
@@ -1,20 +1,21 @@
 .main-container {
-  height: 100%;
+  // height: 100%;
   background: #34e89e;  /* fallback for old browsers */
   background: -webkit-linear-gradient(to top, #0f3443, #34e89e);  /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to top, #0f3443, #34e89e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   display: flex;
   font-family: Circular,Helvetica,Arial,sans-serif;
+  padding-left: 200px;
 }
 
 // .main-songs-index{
 //   padding-left: 900px;
 // }
 
-.main-container .nav-bar {
+.nav-bar {
   padding: 24px 24px 5px;
   display: flex;
-  position: sticky;
+  position: absolute;
   flex-direction: column;
   height: 100vh;
   width: 230px;
@@ -78,8 +79,6 @@
   flex-direction: row;
 }
 
-
-
 .nav-bar .logout{
   color: white;
   align-self: end;
@@ -139,12 +138,14 @@
   max-height: 320px;
   max-width: 320px;
 }
+
 .playlist-subtext {
   padding-top: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+
 .playlist-subtext p {
   color:white;
   padding-bottom: 5px;

diff --git a/frontend/components/App.jsx b/frontend/components/App.jsx
@@ -9,7 +9,9 @@ import SearchContainer from './main/navbar/search_container';
 import CollectionContainer from './main/navbar/collection_container';
 import PlaylistShowContainer from './main/header/playlist_show_container';
 import MusicPlayer from './main/playbar/music_player';
-// import NavBar from '.main/navbar/navbar';
+import NavBarContainer from './main/navbar/navbar_container';
+import { logout } from '../actions/session_actions';
+import { connect } from 'react-redux';
 
 const App = () => {
     return (
@@ -27,6 +29,7 @@ const App = () => {
     <ProtectedRoute exact path="/collection/songs" component={CollectionContainer}/>
     <ProtectedRoute exact path="/collection/playlists/:playlistId" component={PlaylistShowContainer}/>
     <Route exact path="/" component={SplashContainer}/>
+    <ProtectedRoute path="/" component={NavBarContainer}/>
     <MusicPlayer/>
   </div>
 );

diff --git a/frontend/components/main/header/grid_show.jsx b/frontend/components/main/header/grid_show.jsx
@@ -47,11 +47,11 @@ class GridShow extends React.Component {
         </div>
       );
     }
+    // <div>
+    //   <NavBar className="nav" logout={logout.bind(this)}/>
+    // </div>
     return (
       <div className="main-container">
-        <div>
-          <NavBar className="nav" logout={logout.bind(this)}/>
-        </div>
 
         <div className="show-body">
 

diff --git a/frontend/components/main/header/songs_index_item.jsx b/frontend/components/main/header/songs_index_item.jsx
@@ -6,14 +6,12 @@ import { connect } from 'react-redux';
 import { receiveCurrentSong, pauseCurrentSong, putSongInState } from '../../../actions/song_actions';
 
 const mapStateToProps = state => {
-
   return {
     currentSong: state.ui.currentSong || {}
   };
 };
 
 const mapDispatchToProps = (dispatch, ownProps) => {
-
   return {
     openModal: (modal, songId) => dispatch(openModal(modal, songId)),
     pauseCurrentSong: () => dispatch(pauseCurrentSong()),
@@ -62,7 +60,7 @@ class SongsIndexItem extends React.Component {
 
   render () {
     const { putSongInState, openModal, song, playlist } = this.props;
-
+    debugger
     let indexButton = this.state.playing ? (
         <div className="index-button-container">
           <p id="index-pause" className="material-icons" onClick={() => {

diff --git a/frontend/components/main/main_content.jsx b/frontend/components/main/main_content.jsx
@@ -62,12 +62,12 @@ class MainContent extends React.Component {
     if (this.props.path === '/browse' || this.props.path === '/browse/'){
       redirect = <Redirect to={`/${navpath}/playlists`} />;
     }
-
+    // 
+    // <div>
+    //   <NavBar className="nav" logout={this.logout}/>
+    // </div>
     return (
       <div className="main-container">
-        <div>
-          <NavBar className="nav" logout={this.logout}/>
-        </div>
         <div className="main-body">
           <div className="main-padding">
           </div>

diff --git a/frontend/components/main/navbar/navbar_container.js b/frontend/components/main/navbar/navbar_container.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { logout } from '../../../actions/session_actions';
+import NavBar from './navbar';
+
+const mapDispatchToProps = dispatch => {
+  return {
+    logout: () => dispatch(logout())
+  };
+};
+
+export default connect(null, mapDispatchToProps)(NavBar);
diff --git a/frontend/util/route_util.jsx b/frontend/util/route_util.jsx
@@ -12,7 +12,7 @@ const Auth = ({component: Component, path, loggedIn, exact}) => {
   )}/>
 }
 
-const Protected = ({component: Component, path, loggedIn, exact}) => {
+const Protected = ({component: Component, path, loggedIn, exact}, props) => {
   return <Route path={path} exact={exact} render={(props) => (
     loggedIn ? (
       <Component {...props} />