trackDetailContainer route updated

app/components/Header/index.js

@@ -9,8 +9,8 @@ import { AppBar } from '@mui/material';
 import styled from '@emotion/styled';
 import { fonts, colors } from '@themes';
 import T from '@components/T';
-import logo from '@images/icon-512x512.png';
-import logoWebp from '@images/icon-512x512.webp';
+// import logo from '@images/icon-512x512.png';
+// import logoWebp from '@images/icon-512x512.webp';
 
 const StyledHeader = styled(AppBar)`
   && {
@@ -22,11 +22,11 @@ const StyledHeader = styled(AppBar)`
     flex-direction: row;
   }
 `;
-const Logo = styled.img`
-  height: ${(props) => props.height};
-  width: ${(props) => props.height};
-  margin-top: 1rem;
-`;
+// const Logo = styled.img`
+//   height: ${(props) => props.height};
+//   width: ${(props) => props.height};
+//   margin-top: 1rem;
+// `;
 const Title = styled(T)`
   && {
     color: ${colors.text};
@@ -40,11 +40,11 @@ const Title = styled(T)`
 function Header(props) {
   return (
     <StyledHeader position="relative" {...props} data-testid="header">
-      <picture>
+      {/* <picture>
         <source type="image/webp" srcSet={logoWebp} />
         <source type="image/jpeg" srcSet={logo} />
         <Logo alt="logo" src={logo} width="auto" height="5rem" />
-      </picture>
+      </picture> */}
       <Title type="heading" id="wednesday_solutions" />
     </StyledHeader>
   );

app/components/TrackCard/index.js

@@ -17,6 +17,7 @@ import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import PauseIcon from '@mui/icons-material/Pause';
+import { Link } from 'react-router-dom';
 
 const TrackCustomCard = styled(Card)`
   && {
@@ -70,6 +71,7 @@ const TrackPlayIcon = styled(PlayArrowIcon)`
 export function TrackCard({
   trackPlaying,
   setTrackPlaying,
+  collectionId,
   collectionName,
   artistName,
   shortDescription,
@@ -108,6 +110,7 @@ export function TrackCard({
   };
 
   return (
+    <Link to={`/tracks/${collectionId}`}>
     <TrackCustomCard data-testid="track-card">
       <TrackContentBox>
         <TrackContentHeaderBox>
@@ -146,12 +149,14 @@ export function TrackCard({
         <TrackMedia component="img" image={artworkUrl100} alt="Poster unavailable" />
       </If>
     </TrackCustomCard>
+    </Link>
   );
 }
 
 TrackCard.propTypes = {
   trackPlaying: PropTypes.string,
   setTrackPlaying: PropTypes.func,
+  collectionId: PropTypes.number,
   artistName: PropTypes.string,
   artworkUrl100: PropTypes.string,
   collectionName: PropTypes.string,

app/containers/TrackDetailContainer/index.js

@@ -5,14 +5,14 @@ import { createStructuredSelector } from 'reselect';
 import { compose } from 'redux';
 import { useParams } from 'react-router-dom';
 import trackDetailContainerSaga from './saga';
-import { selectTrackDetailData, selectTrackId, selectTrackError, selectTrackDetailLoading } from './selectors';
+import { selectTrackDetailData, selectTrackError, selectTrackDetailLoading } from './selectors';
 import { trackDetailContainerCreators } from './reducer';
 import { injectSaga } from 'redux-injectors';
 import { Card, IconButton, Skeleton, InputAdornment, OutlinedInput, CardHeader, Divider } from '@mui/material';
 
 export const TrackDetailContainer = ({ trackDetailData, trackError, trackDetailLoading, dispatchTrackDetail }) => {
   const { trackId } = useParams();
-
+  console.log('trackId', trackId);
   return <div>TrackDetailContainer {trackId} </div>;
 };
 

app/routeConfig.js

@@ -1,6 +1,7 @@
 import NotFound from '@containers/NotFoundPage/Loadable';
 import HomeContainer from '@containers/HomeContainer/Loadable';
 import TrackContainer from '@containers/TrackContainer/Loadable';
+import TrackDetailContainer from '@containers/TrackDetailContainer/Loadable';
 import routeConstants from '@utils/routeConstants';
 
 export const routeConfig = {
@@ -12,6 +13,10 @@ export const routeConfig = {
     component: TrackContainer,
     ...routeConstants.tracks
   },
+  track: {
+    component: TrackDetailContainer,
+    ...routeConstants.track
+  },
   notFoundPage: {
     component: NotFound,
     route: '/'

app/utils/routeConstants.js

@@ -16,7 +16,7 @@ export default {
     exact: true
   },
   track: {
-    route: '/track:trackid',
+    route: '/tracks/:trackId',
     props: {
       maxwidth: 500,
       padding: 20