format components

src/App.js

@@ -107,16 +107,16 @@ class App extends Component {
                 pauseSong={this.pauseSong}
                 resumeSong={this.resumeSong}
                 audioControl={this.audioControl}
-              />{" "}
-            </div>{" "}
+              />
+            </div>
           </div>
           <Footer
             stopSong={this.stopSong}
             pauseSong={this.pauseSong}
             resumeSong={this.resumeSong}
             audioControl={this.audioControl}
-          />{" "}
-        </div>{" "}
+          />
+        </div>
       </div>
     );
   }

src/components/AlbumList/index.js

@@ -4,9 +4,7 @@ import uniqBy from "lodash/uniqBy";
 
 const mapStateToProps = state => {
   const albumSongs = state.songsReducer.songs
-    ? uniqBy(state.songsReducer.songs, item => {
-        return item.track.album.name;
-      })
+    ? uniqBy(state.songsReducer.songs, item => item.track.album.name)
     : "";
 
   return {

src/components/ArtWork/index.js

@@ -1,12 +1,12 @@
 import SongControls from "./component";
 import { connect } from "react-redux";
 
-const mapStateToProps = (state) => {
-
+const mapStateToProps = state => {
   return {
-    albumImage: state.songsReducer.songDetails ? state.songsReducer.songDetails.album.images[0].url : ''
+    albumImage: state.songsReducer.songDetails
+      ? state.songsReducer.songDetails.album.images[0].url
+      : ""
   };
-
 };
 
 export default connect(mapStateToProps)(SongControls);

src/components/ArtistList/index.js

@@ -1,25 +1,26 @@
 import AlbumList from "./component";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
-import { fetchArtistSongs } from '../../actions/artistActions';
-import { updateHeaderTitle } from '../../actions/uiActions';
-
-const mapStateToProps = (state) => {
+import { fetchArtistSongs } from "../../actions/artistActions";
+import { updateHeaderTitle } from "../../actions/uiActions";
 
+const mapStateToProps = state => {
   return {
-    token: state.tokenReducer.token ? state.tokenReducer.token : '',
-    artists: state.artistsReducer.artistList ? state.artistsReducer.artistList.artists : ''
+    token: state.tokenReducer.token ? state.tokenReducer.token : "",
+    artists: state.artistsReducer.artistList
+      ? state.artistsReducer.artistList.artists
+      : ""
   };
-
 };
 
-const mapDispatchToProps = (dispatch) => {
-
-  return bindActionCreators({
-    fetchArtistSongs,
-    updateHeaderTitle
-  }, dispatch);
-
+const mapDispatchToProps = dispatch => {
+  return bindActionCreators(
+    {
+      fetchArtistSongs,
+      updateHeaderTitle
+    },
+    dispatch
+  );
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);

src/components/BrowseView/index.js

@@ -1,27 +1,29 @@
 import BrowseView from "./component";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
-import { fetchPlaylistSongs, addPlaylistItem } from '../../actions/playlistActions';
-import { updateHeaderTitle } from '../../actions/uiActions';
-
-const mapStateToProps = (state) => {
+import {
+  fetchPlaylistSongs,
+  addPlaylistItem
+} from "../../actions/playlistActions";
+import { updateHeaderTitle } from "../../actions/uiActions";
 
+const mapStateToProps = state => {
   return {
     view: state.browseReducer.view,
     viewType: state.songsReducer.viewType,
     token: state.tokenReducer.token
   };
-
 };
 
-const mapDispatchToProps = (dispatch) => {
-
-  return bindActionCreators({
-    fetchPlaylistSongs,
-    updateHeaderTitle,
-    addPlaylistItem
-  }, dispatch);
-
+const mapDispatchToProps = dispatch => {
+  return bindActionCreators(
+    {
+      fetchPlaylistSongs,
+      updateHeaderTitle,
+      addPlaylistItem
+    },
+    dispatch
+  );
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(BrowseView);

src/components/Footer/index.js

@@ -1,17 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SongControls from '../SongControls';
-import VolumeControls from '../VolumeControls';
-import './Footer.css';
+import React from "react";
+import PropTypes from "prop-types";
+import SongControls from "../SongControls";
+import VolumeControls from "../VolumeControls";
+import "./Footer.css";
 
-const Footer = ({ stopSong, pauseSong, resumeSong, audioControl}) => {
-  return(
-    <div className='footer'>
+const Footer = ({ stopSong, pauseSong, resumeSong, audioControl }) => {
+  return (
+    <div className="footer">
       <SongControls
-        stopSong={ stopSong }
-        pauseSong={ pauseSong }
-        resumeSong={ resumeSong }
-        audioControl={ audioControl }
+        stopSong={stopSong}
+        pauseSong={pauseSong}
+        resumeSong={resumeSong}
+        audioControl={audioControl}
       />
       <VolumeControls />
     </div>

src/components/Header/index.js

@@ -1,15 +1,15 @@
-import React from 'react';
-import UserDetails from '../UserDetails';
-import TrackSearch from '../TrackSearch';
-import './Header.css';
+import React from "react";
+import UserDetails from "../UserDetails";
+import TrackSearch from "../TrackSearch";
+import "./Header.css";
 
 const Header = () => {
-  return(
-    <div className='header'>
+  return (
+    <div className="header">
       <TrackSearch />
       <UserDetails />
     </div>
   );
 };
 
-export default Header ;
+export default Header;

src/components/MainHeader/index.js

@@ -1,33 +1,38 @@
 import MainHeader from "./component";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
-import { fetchCategories, fetchNewReleases, fetchFeatured } from '../../actions/browseActions';
-import { updateHeaderTitle } from '../../actions/uiActions';
-import { updateViewType } from '../../actions/songActions';
-
-const mapStateToProps = (state) => {
+import {
+  fetchCategories,
+  fetchNewReleases,
+  fetchFeatured
+} from "../../actions/browseActions";
+import { updateHeaderTitle } from "../../actions/uiActions";
+import { updateViewType } from "../../actions/songActions";
 
+const mapStateToProps = state => {
   return {
     songPaused: state.songsReducer.songPaused,
     headerTitle: state.uiReducer.title,
     viewType: state.songsReducer.viewType,
     playlists: state.playlistReducer.playlists,
-    artists: state.artistsReducer.artistList ? state.artistsReducer.artistList.artists : [],
+    artists: state.artistsReducer.artistList
+      ? state.artistsReducer.artistList.artists
+      : [],
     token: state.tokenReducer.token
   };
-
 };
 
-const mapDispatchToProps = (dispatch) => {
-
-  return bindActionCreators({
-    fetchCategories,
-    fetchNewReleases,
-    updateHeaderTitle,
-    updateViewType,
-    fetchFeatured
-  }, dispatch);
-
+const mapDispatchToProps = dispatch => {
+  return bindActionCreators(
+    {
+      fetchCategories,
+      fetchNewReleases,
+      updateHeaderTitle,
+      updateViewType,
+      fetchFeatured
+    },
+    dispatch
+  );
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(MainHeader);

src/components/MainView/component.js

@@ -1,28 +1,30 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SongList from '../SongList';
-import AlbumList from '../AlbumList';
-import ArtistList from '../ArtistList';
-import BrowseView from '../BrowseView';
-import './MainView.css';
+import React from "react";
+import PropTypes from "prop-types";
+import SongList from "../SongList";
+import AlbumList from "../AlbumList";
+import ArtistList from "../ArtistList";
+import BrowseView from "../BrowseView";
+import "./MainView.css";
 
 const MainView = ({ headerTitle, audioControl, resumeSong, pauseSong }) => {
-
   return (
-    <div>
-      {
-        headerTitle === 'Albums' ?
-          (<AlbumList audioControl={ audioControl } />) :
-          headerTitle === 'Artists' ?
-            (<ArtistList />) :
-            (headerTitle === 'Browse') ?
-              ( <BrowseView />) :
-              //anything else show SongList
-              ( <SongList resumeSong={ resumeSong } pauseSong={ pauseSong } audioControl={ audioControl } />)
-      }
-    </div>
+    <React.Fragment>
+      {headerTitle === "Albums" ? (
+        <AlbumList audioControl={audioControl} />
+      ) : headerTitle === "Artists" ? (
+        <ArtistList />
+      ) : headerTitle === "Browse" ? (
+        <BrowseView />
+      ) : (
+        //anything else show SongList
+        <SongList
+          resumeSong={resumeSong}
+          pauseSong={pauseSong}
+          audioControl={audioControl}
+        />
+      )}
+    </React.Fragment>
   );
-
 };
 
 MainView.propTypes = {