split card into own component

src/components/card/Card.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Panel, Button } from 'rsuite';
+import styled from 'styled-components';
+import { useHistory } from 'react-router-dom';
+import placeholderImg from '../../img/placeholder.jpg';
+
+const StyledPanel = styled(Panel)`
+  text-align: center;
+  width: 150px;
+  height: 200px;
+  margin: 10px;
+  &:hover {
+    border: 1px solid ${(props) => props.theme.main};
+  }
+`;
+
+const InfoPanel = styled(Panel)`
+  width: 150px;
+`;
+
+const InfoSpan = styled.div``;
+
+const CardButton = styled(Button)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 10px 0px 10px;
+  width: 150px;
+`;
+
+const CardTitleButton = styled(CardButton)`
+  color: ${(props) => props.theme.titleText};
+`;
+
+const CardSubtitleButton = styled(CardButton)`
+  color: ${(props) => props.theme.subtitleText};
+`;
+
+const CardImg = styled.img`
+  max-height: 150px;
+`;
+
+const Overlay = styled.div`
+  &:hover {
+    background-color: #000;
+    opacity: 0.5;
+    cursor: pointer;
+  }
+`;
+
+const Card = ({ onClick, url, subUrl, ...rest }: any) => {
+  const history = useHistory();
+
+  const handleClick = () => {
+    history.push(url);
+  };
+
+  const handleSubClick = () => {
+    history.push(subUrl);
+  };
+
+  return (
+    <StyledPanel className="card" tabIndex={0} bordered shaded>
+      <Overlay onClick={handleClick}>
+        <CardImg
+          src={rest.coverArt}
+          alt="img"
+          onError={(e: any) => {
+            e.target.src = placeholderImg;
+          }}
+        />
+      </Overlay>
+      <InfoPanel>
+        <InfoSpan>
+          <CardTitleButton appearance="link" size="xs" onClick={handleClick}>
+            {rest.title}
+          </CardTitleButton>
+        </InfoSpan>
+        <InfoSpan>
+          <CardSubtitleButton
+            appearance="link"
+            size="xs"
+            onClick={handleSubClick}
+          >
+            {rest.subtitle}
+          </CardSubtitleButton>
+        </InfoSpan>
+      </InfoPanel>
+    </StyledPanel>
+  );
+};
+
+export default Card;

src/components/dashboard/Dashboard.tsx

@@ -56,18 +56,21 @@ const Dashboard = () => {
           <ScrollingMenu
             title="Recently Added"
             data={newestAlbums.album}
-            routePrefix="album"
+            cardTitle={{ prefix: 'album', property: 'id' }}
+            cardSubtitle={{ prefix: 'album', property: 'artist' }}
           />
 
           <ScrollingMenu
             title="Recently Played"
             data={recentAlbums.album}
-            routePrefix="album"
+            cardTitle={{ prefix: 'album', property: 'id' }}
+            cardSubtitle={{ prefix: 'album', property: 'artist' }}
           />
           <ScrollingMenu
             title="Random"
             data={randomAlbums.album}
-            routePrefix="album"
+            cardTitle={{ prefix: 'album', property: 'id' }}
+            cardSubtitle={{ prefix: 'album', property: 'artist' }}
           />
         </>
       )}

src/components/scrollingmenu/ScrollingMenu.tsx

@@ -1,47 +1,13 @@
 import React, { useContext } from 'react';
-import { useHistory } from 'react-router-dom';
 import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
-import { Panel, Button, Icon } from 'rsuite';
+import { Button, Icon } from 'rsuite';
 import styled from 'styled-components';
-import placeholderImg from '../../img/placeholder.jpg';
+import Card from '../card/Card';
 
 const ScrollMenuContainer = styled.div`
   margin-bottom: 25px;
 `;
 
-const StyledPanel = styled(Panel)`
-  text-align: center;
-  width: 150px;
-  height: 200px;
-  margin: 10px;
-  &:hover {
-    border: 1px solid ${(props) => props.theme.main};
-  }
-`;
-
-const InfoPanel = styled(Panel)`
-  width: 150px;
-`;
-
-const InfoSpan = styled.div`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 10px 0px 10px;
-`;
-
-const CardImg = styled.img`
-  max-height: 150px;
-`;
-
-const Overlay = styled.div`
-  &:hover {
-    background-color: #000;
-    opacity: 0.5;
-    cursor: pointer;
-  }
-`;
-
 const Title = styled.h1`
   margin-left: 20px;
   font-size: 20px !important;
@@ -75,48 +41,20 @@ const RightArrow = () => {
   );
 };
 
-const Card = ({ onClick, url, ...rest }: any) => {
-  const history = useHistory();
-
-  const handleClick = () => {
-    console.log('click');
-    history.push(url);
-  };
-
-  return (
-    <StyledPanel className="card" tabIndex={0} bordered shaded>
-      <Overlay onClick={handleClick}>
-        <CardImg
-          src={rest.coverArt}
-          alt="img"
-          onError={(e: any) => {
-            e.target.src = placeholderImg; // some replacement image
-          }}
-        />
-      </Overlay>
-      <InfoPanel>
-        <InfoSpan>{rest.title}</InfoSpan>
-        <InfoSpan>{rest.year}</InfoSpan>
-      </InfoPanel>
-    </StyledPanel>
-  );
-};
-
-const ScrollingMenu = ({ routePrefix, data, title }: any) => {
+const ScrollingMenu = ({ cardTitle, cardSubtitle, data, title }: any) => {
   return (
     <ScrollMenuContainer>
-      <div>
-        <Title>{title}</Title>
-      </div>
+      <Title>{title}</Title>
       <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
         {data.map((item: any) => (
           <Card
             itemId={item.id}
-            title={item.name || item.title}
-            year={item.year}
+            title={item[cardTitle.property] || item.title}
+            subtitle={item[cardSubtitle.property]}
             key={item.id}
             coverArt={item.image}
-            url={`${routePrefix}/${item.id}`}
+            url={`${cardTitle.prefix}/${item[cardTitle.property]}`}
+            subUrl={`${cardSubtitle.prefix}/${item[cardSubtitle.property]}`}
           />
         ))}
       </ScrollMenu>

src/styles/styled.ts

@@ -1,3 +1,5 @@
 export const theme = {
   main: '#1179ac',
+  titleText: '#e9ebf0',
+  subtitleText: '#888e94',
 };