Nesting Switches and subviews

src/js/App.js

@@ -16,7 +16,7 @@ import ErrorMessage from './components/ErrorMessage';
 import Stream from './components/Stream';
 
 import Album from './views/Album';
-import Artist from './views/Artist';
+import Artist from './views/Artist/Artist';
 import Playlist from './views/Playlist';
 import User from './views/User';
 import Track from './views/Track';
@@ -26,19 +26,8 @@ import QueueHistory from './views/QueueHistory';
 import Debug from './views/Debug';
 import Search from './views/Search';
 import Settings from './views/Settings';
-
-import DiscoverRecommendations from './views/Discover/DiscoverRecommendations';
-import DiscoverFeatured from './views/Discover/DiscoverFeatured';
-import DiscoverCategories from './views/Discover/DiscoverCategories';
-import DiscoverCategory from './views/Discover/DiscoverCategory';
-import DiscoverNewReleases from './views/Discover/DiscoverNewReleases';
-
-import LibraryArtists from './views/Library/LibraryArtists';
-import LibraryAlbums from './views/Library/LibraryAlbums';
-import LibraryTracks from './views/Library/LibraryTracks';
-import LibraryPlaylists from './views/Library/LibraryPlaylists';
-import LibraryBrowse from './views/Library/LibraryBrowse';
-import LibraryBrowseDirectory from './views/Library/LibraryBrowseDirectory';
+import Discover from './views/Discover/Discover';
+import Library from './views/Library/Library';
 
 import EditPlaylist from './views/modals/EditPlaylist';
 import CreatePlaylist from './views/modals/CreatePlaylist';
@@ -328,60 +317,13 @@ const App = () => {
                   <Route exact path="/uri/:uri/:name?" component={UriRedirect} />
 
                   <Route
-                    exact
-                    path="/discover/recommendations/:uri?"
-                    component={DiscoverRecommendations}
-                  />
-                  <Route
-                    exact
-                    path="/discover/featured"
-                    component={DiscoverFeatured}
-                  />
-                  <Route
-                    exact
-                    path="/discover/categories/:uri"
-                    component={DiscoverCategory}
-                  />
-                  <Route
-                    exact
-                    path="/discover/categories"
-                    component={DiscoverCategories}
-                  />
-                  <Route
-                    exact
-                    path="/discover/new-releases"
-                    component={DiscoverNewReleases}
+                    path="/discover"
+                    component={Discover}
                   />
 
                   <Route
-                    exact
-                    path="/library/artists"
-                    component={LibraryArtists}
-                  />
-                  <Route
-                    exact
-                    path="/library/albums"
-                    component={LibraryAlbums}
-                  />
-                  <Route
-                    exact
-                    path="/library/tracks"
-                    component={LibraryTracks}
-                  />
-                  <Route
-                    exact
-                    path="/library/playlists"
-                    component={LibraryPlaylists}
-                  />
-                  <Route
-                    exact
-                    path="/library/browse"
-                    component={LibraryBrowse}
-                  />
-                  <Route
-                    exact
-                    path="/library/browse/:name/:uri"
-                    component={LibraryBrowseDirectory}
+                    path="/library"
+                    component={Library}
                   />
 
                   <Route>

src/js/views/Artist/Artist.js

@@ -2,28 +2,28 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Route, Switch, useParams, useHistory } from 'react-router-dom';
-import ErrorMessage from '../components/ErrorMessage';
-import Link from '../components/Link';
-import Thumbnail from '../components/Thumbnail';
-import Parallax from '../components/Parallax';
-import FollowButton from '../components/Fields/FollowButton';
-import ContextMenuTrigger from '../components/ContextMenuTrigger';
-import About from './Artist/About';
-import Overview from './Artist/Overview';
-import Tracks from './Artist/Tracks';
-import Related from './Artist/Related';
-import Loader from '../components/Loader';
-import * as coreActions from '../services/core/actions';
-import * as uiActions from '../services/ui/actions';
-import * as mopidyActions from '../services/mopidy/actions';
+import ErrorMessage from '../../components/ErrorMessage';
+import Link from '../../components/Link';
+import Thumbnail from '../../components/Thumbnail';
+import Parallax from '../../components/Parallax';
+import FollowButton from '../../components/Fields/FollowButton';
+import ContextMenuTrigger from '../../components/ContextMenuTrigger';
+import About from './About';
+import Overview from './Overview';
+import Tracks from './Tracks';
+import Related from './Related';
+import Loader from '../../components/Loader';
+import * as coreActions from '../../services/core/actions';
+import * as uiActions from '../../services/ui/actions';
+import * as mopidyActions from '../../services/mopidy/actions';
 import {
   uriSource,
-} from '../util/helpers';
-import { encodeUri, decodeUri } from '../util/format';
-import { arrayOf } from '../util/arrays';
-import { i18n, I18n } from '../locale';
-import Button from '../components/Button';
-import { makeItemSelector } from '../util/selectors';
+} from '../../util/helpers';
+import { encodeUri, decodeUri } from '../../util/format';
+import { arrayOf } from '../../util/arrays';
+import { i18n, I18n } from '../../locale';
+import Button from '../../components/Button';
+import { makeItemSelector } from '../../util/selectors';
 
 const Artist = () => {
   const history = useHistory();

src/js/views/Discover/Categories.js

@@ -14,7 +14,7 @@ import { i18n, I18n } from '../../locale';
 import { indexToArray, applyFilter } from '../../util/arrays';
 import { makeLoadingSelector } from '../../util/selectors';
 
-const DiscoverCategories = ({
+const Categories = ({
   loading,
   categories: categoriesProp,
   spotifyActions: {
@@ -99,4 +99,4 @@ const mapDispatchToProps = (dispatch) => ({
   spotifyActions: bindActionCreators(spotifyActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(DiscoverCategories);
+export default connect(mapStateToProps, mapDispatchToProps)(Categories);

src/js/views/Discover/Category.js

@@ -23,7 +23,7 @@ import { decodeUri } from '../../util/format';
 
 const SORT_KEY = 'discover_category';
 
-const DiscoverCategory = ({
+const Category = ({
   uri,
   category,
   loading,
@@ -170,4 +170,4 @@ const mapDispatchToProps = (dispatch) => ({
   spotifyActions: bindActionCreators(spotifyActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(DiscoverCategory);
+export default connect(mapStateToProps, mapDispatchToProps)(Category);

src/js/views/Discover/Discover.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import Recommendations from './Recommendations';
+import Featured from './Featured';
+import Categories from './Categories';
+import Category from './Category';
+import NewReleases from './NewReleases';
+
+export default () => {
+  return (
+    <Switch>
+      <Route
+        exact
+        path="/discover/recommendations/:uri?"
+        component={Recommendations}
+      />
+      <Route
+        exact
+        path="/discover/featured"
+        component={Featured}
+      />
+      <Route
+        exact
+        path="/discover/categories/:uri"
+        component={Category}
+      />
+      <Route
+        exact
+        path="/discover/categories"
+        component={Categories}
+      />
+      <Route
+        exact
+        path="/discover/new-releases"
+        component={NewReleases}
+      />
+    </Switch>
+  );
+}

src/js/views/Discover/Featured.js

@@ -13,7 +13,7 @@ import Button from '../../components/Button';
 import { indexToArray } from '../../util/arrays';
 import { makeLoadingSelector } from '../../util/selectors';
 
-class DiscoverFeatured extends React.Component {
+class Featured extends React.Component {
   componentDidMount() {
     const {
       uris,
@@ -119,4 +119,4 @@ const mapDispatchToProps = (dispatch) => ({
   spotifyActions: bindActionCreators(spotifyActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(DiscoverFeatured);
+export default connect(mapStateToProps, mapDispatchToProps)(Featured);

src/js/views/Discover/NewReleases.js

@@ -17,7 +17,7 @@ import {
   makeLoadingSelector,
 } from '../../util/selectors';
 
-class DiscoverNewReleases extends React.Component {
+class NewReleases extends React.Component {
   componentDidMount() {
     const {
       new_releases,
@@ -171,4 +171,4 @@ const mapDispatchToProps = (dispatch) => ({
   spotifyActions: bindActionCreators(spotifyActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(DiscoverNewReleases);
+export default connect(mapStateToProps, mapDispatchToProps)(NewReleases);

src/js/views/Discover/Recommendations.js

@@ -28,7 +28,7 @@ import { i18n, I18n } from '../../locale';
 import Button from '../../components/Button';
 import { decodeUri, encodeUri } from '../../util/format';
 
-class Discover extends React.Component {
+class Recommendations extends React.Component {
   constructor(props) {
     super(props);
 
@@ -588,4 +588,4 @@ const mapDispatchToProps = (dispatch) => ({
   coreActions: bindActionCreators(coreActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(Discover);
+export default connect(mapStateToProps, mapDispatchToProps)(Recommendations);

src/js/views/Library/Albums.js

@@ -29,7 +29,7 @@ const processKeys = [
   'SPOTIFY_GET_LIBRARY_ALBUMS',
 ];
 
-class LibraryAlbums extends React.Component {
+class Albums extends React.Component {
   constructor(props) {
     super(props);
 
@@ -305,4 +305,4 @@ const mapDispatchToProps = (dispatch) => ({
   spotifyActions: bindActionCreators(spotifyActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(LibraryAlbums);
+export default connect(mapStateToProps, mapDispatchToProps)(Albums);

src/js/views/Library/Artists.js

@@ -27,7 +27,7 @@ const processKeys = [
   'SPOTIFY_GET_LIBRARY_ARTISTS',
 ];
 
-class LibraryArtists extends React.Component {
+class Artists extends React.Component {
   constructor(props) {
     super(props);
 
@@ -284,4 +284,4 @@ const mapDispatchToProps = (dispatch) => ({
   coreActions: bindActionCreators(coreActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(LibraryArtists);
+export default connect(mapStateToProps, mapDispatchToProps)(Artists);

src/js/views/Library/Browse.js

@@ -11,7 +11,7 @@ import { formatImages, encodeUri } from '../../util/format';
 import { I18n, i18n } from '../../locale';
 import { makeLoadingSelector } from '../../util/selectors';
 
-class LibraryBrowse extends React.Component {
+class Browse extends React.Component {
   componentDidMount() {
     this.loadDirectory();
     this.props.uiActions.setWindowTitle(i18n('library.browse.title'));
@@ -153,4 +153,4 @@ const mapDispatchToProps = (dispatch) => ({
   mopidyActions: bindActionCreators(mopidyActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(LibraryBrowse);
+export default connect(mapStateToProps, mapDispatchToProps)(Browse);

src/js/views/Library/BrowseDirectory.js

@@ -64,7 +64,7 @@ const Subdirectories = ({ items, view }) => {
   );
 };
 
-class LibraryBrowseDirectory extends React.Component {
+class BrowseDirectory extends React.Component {
   constructor(props) {
     super(props);
 
@@ -269,4 +269,4 @@ const mapDispatchToProps = (dispatch) => ({
   spotifyActions: bindActionCreators(spotifyActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(LibraryBrowseDirectory);
+export default connect(mapStateToProps, mapDispatchToProps)(BrowseDirectory);

src/js/views/Library/Library.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import Artists from './Artists';
+import Albums from './Albums';
+import Tracks from './Tracks';
+import Playlists from './Playlists';
+import Browse from './Browse';
+import BrowseDirectory from './BrowseDirectory';
+
+export default () => {
+  return (
+    <Switch>
+      <Route
+        exact
+        path="/library/artists"
+        component={Artists}
+      />
+      <Route
+        exact
+        path="/library/albums"
+        component={Albums}
+      />
+      <Route
+        exact
+        path="/library/tracks"
+        component={Tracks}
+      />
+      <Route
+        exact
+        path="/library/playlists"
+        component={Playlists}
+      />
+      <Route
+        exact
+        path="/library/browse"
+        component={Browse}
+      />
+      <Route
+        exact
+        path="/library/browse/:name/:uri"
+        component={BrowseDirectory}
+      />
+    </Switch>
+  );
+}

src/js/views/Library/Playlists.js

@@ -29,7 +29,7 @@ const processKeys = [
   'SPOTIFY_GET_LIBRARY_PLAYLISTS',
 ];
 
-class LibraryPlaylists extends React.Component {
+class Playlists extends React.Component {
   constructor(props) {
     super(props);
 
@@ -324,4 +324,4 @@ const mapDispatchToProps = (dispatch) => ({
   spotifyActions: bindActionCreators(spotifyActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(LibraryPlaylists);
+export default connect(mapStateToProps, mapDispatchToProps)(Playlists);

src/js/views/Library/Tracks.js

@@ -29,7 +29,7 @@ const processKeys = [
   'SPOTIFY_GET_LIBRARY_TRACKS',
 ];
 
-class LibraryTracks extends React.Component {
+class Tracks extends React.Component {
   constructor(props) {
     super(props);
 
@@ -306,4 +306,4 @@ const mapDispatchToProps = (dispatch) => ({
   spotifyActions: bindActionCreators(spotifyActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(LibraryTracks);
+export default connect(mapStateToProps, mapDispatchToProps)(Tracks);