Add song details page (#13)

* Rename webpack cfgs * Fix middlewares deprecation warning * Fully remove warnings for npm start * Relax browserslist constraints * Enable routes and add bogus song details * Turn titles into hrefs * Rethink components file structure * Provide scaffolded fetch logic for release details
tankonstin-labs · Feb 13, 2024 · 2ea5536 · 2ea5536
1 parent 2cc4875
commit 2ea5536
Show file tree

Hide file tree

Showing 16 changed files with 143 additions and 84 deletions.
diff --git a/vanguarde/config/webpackDevServer.config.js → vanguarde/config/webpack.config.dev.js b/vanguarde/config/webpackDevServer.config.js → vanguarde/config/webpack.config.dev.js
@@ -101,27 +101,22 @@ module.exports = function (proxy, allowedHost) {
     },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    onBeforeSetupMiddleware(devServer) {
-      // Keep `evalSourceMapMiddleware`
-      // middlewares before `redirectServedPath` otherwise will not have any effect
-      // This lets us fetch source contents from webpack for the error overlay
-      devServer.app.use(evalSourceMapMiddleware(devServer));
+    setupMiddlewares: (middlewares, devServer) => {
+      if (!devServer) {
+        throw new Error('webpack-dev-server is not defined');
+      }
 
       if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
         require(paths.proxySetup)(devServer.app);
       }
-    },
-    onAfterSetupMiddleware(devServer) {
-      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
 
-      // This service worker file is effectively a 'no-op' that will reset any
-      // previous service worker registered for the same host:port combination.
-      // We do this in development to avoid hitting the production cache if
-      // it used the same host and port.
-      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+      middlewares.push(
+          evalSourceMapMiddleware(devServer),
+          redirectServedPath(paths.publicUrlOrPath),
+          noopServiceWorkerMiddleware(paths.publicUrlOrPath)
+      );
+
+      return middlewares;
     },
   };
 };
diff --git a/vanguarde/package-lock.json b/vanguarde/package-lock.json
diff --git a/vanguarde/package.json b/vanguarde/package.json
@@ -1,6 +1,6 @@
 {
   "name": "taburette-vanguarde",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "private": true,
   "dependencies": {
     "@babel/core": "^7.16.0",
@@ -14,7 +14,7 @@
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",
     "bfj": "^7.0.2",
-    "browserslist": "^4.18.1",
+    "browserslist": "^4.22.3",
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "css-loader": "^6.5.1",
@@ -81,23 +81,9 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "test": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
+  "browserslist": [
+    "defaults"
+  ],
   "babel": {
     "presets": [
       "react-app"

diff --git a/vanguarde/scripts/start.js b/vanguarde/scripts/start.js
@@ -30,7 +30,7 @@ const openBrowser = require('react-dev-utils/openBrowser');
 const semver = require('semver');
 const paths = require('../config/paths');
 const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
+const createDevServerConfig = require('../config/webpack.config.dev');
 const getClientEnvironment = require('../config/env');
 const react = require(require.resolve('react', { paths: [paths.appPath] }));
 

diff --git a/vanguarde/src/App.js b/vanguarde/src/App.js
@@ -1,16 +1,20 @@
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
-import MainPage from './components/MainPage';
-import { JokerFooter } from './components/JokerFooter';
-import { Header } from './components/Header';
+import { MainPage } from './components/main/MainPage';
+import { SongDetails } from './components/track/SongDetails';
+import { Header } from './components/shared/Header';
+import { JokerFooter } from './components/shared/JokerFooter';
 
 function App() {
     return (
         <Router>
-            <Header/>
-            <MainPage/>
-            <JokerFooter/>
+            <Header />
+            <Routes>
+                <Route exact path='/' element={ <MainPage /> }/>
+                <Route path='/s/:songId' element={ <SongDetails /> }/>
+            </Routes>
+            <JokerFooter />
         </Router>
     );
 }

diff --git a/vanguarde/src/components/MainPage.jsx → vanguarde/src/components/main/MainPage.jsx b/vanguarde/src/components/MainPage.jsx → vanguarde/src/components/main/MainPage.jsx
@@ -3,20 +3,18 @@ import { MDBCol, MDBContainer, MDBRow } from 'mdb-react-ui-kit';
 
 import SongList from './SongList.jsx';
 
-class MainPage extends Component {
+export class MainPage extends Component {
     render() {
         return (
             <MDBContainer className='mt-5' fluid>
                 <MDBRow>
                     <MDBCol md="2" />
                     <MDBCol md="8">
-                        <SongList/>
+                        <SongList />
                     </MDBCol>
                     <MDBCol md="2" />
                 </MDBRow>
             </MDBContainer>
         );
     }
 }
-
-export default MainPage;
diff --git a/vanguarde/src/components/SearchOptions.jsx → ...rde/src/components/main/SearchOptions.jsx b/vanguarde/src/components/SearchOptions.jsx → ...rde/src/components/main/SearchOptions.jsx
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Select from 'react-select';
 
-import { changeSearchQuery } from '../redux/search';
-import { ARTIST_QUERY, RELEASE_QUERY, SONG_QUERY, GENRE_QUERY } from '../redux/search';
+import { changeSearchQuery } from '../../redux/search';
+import { ARTIST_QUERY, RELEASE_QUERY, SONG_QUERY, GENRE_QUERY } from '../../redux/search';
 
 const genreOptions = [
     { value: 'rock', label: 'Rock' },

diff --git a/vanguarde/src/components/SongCard.jsx → vanguarde/src/components/main/SongCard.jsx b/vanguarde/src/components/SongCard.jsx → vanguarde/src/components/main/SongCard.jsx
@@ -4,12 +4,13 @@ import {
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import placeholder from '../assets/150.png';
-import '../index.css';
+import placeholder from '../../assets/150.png';
+import '../../index.css';
 
 export class SongCard extends Component {
     static propTypes = {
         artist: PropTypes.string.isRequired,
+        trackId: PropTypes.number.isRequired,
         trackName: PropTypes.string.isRequired,
     };
 
@@ -25,7 +26,9 @@ export class SongCard extends Component {
                             <div className="col-md-6">
                                 <div className="card-body">
                                     <h4 className="card-title">
-                                        {this.props.trackName}
+                                        <a href={`/s/${this.props.trackId}`}>
+                                            {this.props.trackName}
+                                        </a>
                                     </h4>
                                     <h6 className="card-subtitle">
                                         by {this.props.artist}

diff --git a/vanguarde/src/components/SongList.jsx → vanguarde/src/components/main/SongList.jsx b/vanguarde/src/components/SongList.jsx → vanguarde/src/components/main/SongList.jsx
@@ -8,8 +8,8 @@ import {
 import { connect } from 'react-redux';
 
 import SearchOptions from './SearchOptions';
-import { toggleSearchBar, handleOmnibarChange, handleSortToggle } from '../redux/search';
-import { getSongList } from '../redux/songs';
+import { toggleSearchBar, handleOmnibarChange, handleSortToggle } from '../../redux/search.js';
+import { getSongList } from '../../redux/songs.js';
 
 class SongList extends Component {
     static propTypes = {
@@ -77,10 +77,10 @@ class SongList extends Component {
                 <MDBRow className='mt-3' data-cy='song-list'>
                     {
                         this.props.songList.map((value, index) => {
-                            const trackName = value.name;
-                            const featuredArtists = value.release.artists.map(
-                                (artist) => artist.name).join(';');
-                            return <SongCard key={index} artist={featuredArtists} trackName={trackName} />;
+                            const featuredArtists = value.release.artists
+                                .map((artist) => artist.name)
+                                .join(';');
+                            return <SongCard key={index} artist={featuredArtists} trackName={value.name} trackId={value.id} />;
                         })
                     }
                 </MDBRow>

diff --git a/vanguarde/src/components/Header.jsx → vanguarde/src/components/shared/Header.jsx b/vanguarde/src/components/Header.jsx → vanguarde/src/components/shared/Header.jsx
@@ -9,7 +9,7 @@ export class Header extends Component {
         return (
             <MDBNavbar bgColor='dark' color="elegant-color" dark expand='xl'>
                 <MDBContainer>
-                    <MDBNavbarBrand href='#!'>
+                    <MDBNavbarBrand href='/'>
                         <strong className="white-text">Taburette</strong>
                     </MDBNavbarBrand>
                     {/* TODO: Enable toggler after class -> function components rearch */}
@@ -24,7 +24,7 @@ export class Header extends Component {
                     <MDBCollapse navbar>
                         <MDBNavbarNav>
                             <MDBNavbarItem>
-                                <MDBNavbarLink active aria-current='home' href="#!">Home</MDBNavbarLink>
+                                <MDBNavbarLink active aria-current='home' href="/">Home</MDBNavbarLink>
                             </MDBNavbarItem>
                             <MDBNavbarItem>
                                 <MDBNavbarLink disabled aria-disabled='true' href="#!">About</MDBNavbarLink>

diff --git a/vanguarde/src/components/JokerFooter.jsx → ...rde/src/components/shared/JokerFooter.jsx b/vanguarde/src/components/JokerFooter.jsx → ...rde/src/components/shared/JokerFooter.jsx
diff --git a/vanguarde/src/components/track/SongDetails.jsx b/vanguarde/src/components/track/SongDetails.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { MDBCol, MDBContainer, MDBRow } from 'mdb-react-ui-kit';
+
+export function SongDetails() {
+
+    let { songId } = useParams();
+
+    return (
+        <MDBContainer className='mt-5' fluid>
+            <MDBRow>
+                <MDBCol md="2" />
+                <MDBCol md="8">
+                    Here lieth song details for release {songId}.
+                </MDBCol>
+                <MDBCol md="2" />
+            </MDBRow>
+        </MDBContainer>
+    );
+}
diff --git a/vanguarde/src/index.js b/vanguarde/src/index.js
@@ -24,6 +24,7 @@ const rootReducer = {
     searchReducer: searchReducer,
     songReducer: songReducer,
 };
+
 const store = configureStore({
     reducer: rootReducer,
     middleware: getDefaultMiddleware({

diff --git a/vanguarde/src/redux/common.js b/vanguarde/src/redux/common.js
@@ -27,8 +27,8 @@ export function handleError(errorObj) {
             onScreen: true,
         },
         type: 'danger',
-        insert: 'top',
-        container: 'top-right',
+        insert: 'bottom',
+        container: 'bottom-right',
         animationIn: ['animated', 'fadeIn'],
         animationOut: ['animated', 'fadeOut'],
     });

diff --git a/vanguarde/src/redux/release.js b/vanguarde/src/redux/release.js
@@ -0,0 +1,45 @@
+import { createSlice } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+const initialState = {
+    releaseDetails: {},
+    loading: false,
+    error: null,
+};
+
+const releaseSlice = createSlice({
+    name: 'release',
+    initialState,
+    reducers: {
+        fetchBegin: (state, action) => {
+            state.loading = true;
+            state.error = null;
+        },
+        fetchSuccess: (state, action) => {
+            state.loading = false;
+            state.releaseDetails = action.payload;
+        },
+        fetchError: (state, action) => {
+            state.loading = false;
+            state.error = action.payload.error;
+        },
+    },
+});
+
+const { actions, reducer } = releaseSlice;
+const { fetchBegin, fetchSuccess, fetchError } = actions;
+
+export function getReleaseDetails(dispatch, getState, {apiConfig}) {
+    dispatch(fetchBegin());
+
+    // TODO: remove hardcoded release id
+    axios.get(`${apiConfig.url}/releases/12829`)
+        .then((res) => {
+            dispatch(fetchSuccess(res.data));
+        })
+        .catch((error) => {
+            dispatch(fetchError(error));
+        });
+}
+
+export default reducer;