From 4e44d841dd86c5a0db9bdc2af10a6d939ec1cd5c Mon Sep 17 00:00:00 2001
From: Arbaz Ahmed <51921579+armedev@users.noreply.github.com>
Date: Tue, 23 Mar 2021 09:42:19 +0530
Subject: [PATCH] New component for song display in song list (#833)

* added new component SONGSIMPLELIST for smaller displays

* added new component SONGSIMPLELIST for smaller displays

* added new component SONGSIMPLELIST for smaller displays

* Updated songsimplelist

Removed truncation

* removed garbage code

* refactored some issues of overlapping

* refactored some issues of overlapping

* changed the song ui design

* refactored some bugs in artist display

* refactored some bugs in artist display

* removed garbage dependencies

* removed div bugs

* added all the logic to the component itself
---
 ui/src/common/SongSimpleList.js | 121 ++++++++++++++++++++++++++++++++
 ui/src/common/index.js          |   1 +
 ui/src/song/SongList.js         |  15 +---
 3 files changed, 124 insertions(+), 13 deletions(-)
 create mode 100644 ui/src/common/SongSimpleList.js

diff --git a/ui/src/common/SongSimpleList.js b/ui/src/common/SongSimpleList.js
new file mode 100644
index 000000000..ef3918a41
--- /dev/null
+++ b/ui/src/common/SongSimpleList.js
@@ -0,0 +1,121 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItemText from '@material-ui/core/ListItemText'
+import { makeStyles } from '@material-ui/core/styles'
+import { sanitizeListRestProps } from 'ra-core'
+import { DurationField, SongContextMenu } from './index'
+import { setTrack } from '../actions'
+import { useDispatch } from 'react-redux'
+
+const useStyles = makeStyles(
+  {
+    link: {
+      textDecoration: 'none',
+      color: 'inherit',
+    },
+    listItem: {
+      padding: '10px',
+    },
+    title: {
+      paddingRight: '10px',
+      width: '80%',
+    },
+    secondary: {
+      marginTop: '-3px',
+      width: '96%',
+      display: 'flex',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+    },
+    artist: {
+      paddingRight: '30px',
+    },
+    timeStamp: {
+      float: 'right',
+      color: '#fff',
+      fontWeight: '200',
+      opacity: 0.6,
+      fontSize: '12px',
+      padding: '2px',
+    },
+    rightIcon: {
+      top: '26px',
+    },
+  },
+  { name: 'RaSongSimpleList' }
+)
+
+export const SongSimpleList = ({
+  basePath,
+  className,
+  classes: classesOverride,
+  data,
+  hasBulkActions,
+  ids,
+  loading,
+  onToggleItem,
+  selectedIds,
+  total,
+  ...rest
+}) => {
+  const dispatch = useDispatch()
+  const classes = useStyles({ classes: classesOverride })
+  return (
+    (loading || total > 0) && (
+      <List className={className} {...sanitizeListRestProps(rest)}>
+        {ids.map(
+          (id) =>
+            data[id] && (
+              <span key={id} onClick={() => dispatch(setTrack(data[id]))}>
+                <ListItem className={classes.listItem} button={true}>
+                  <ListItemText
+                    primary={
+                      <div className={classes.title}>{data[id].title}</div>
+                    }
+                    secondary={
+                      <span className={classes.secondary}>
+                        <span className={classes.artist}>
+                          {data[id].artist}
+                        </span>
+                        <span className={classes.timeStamp}>
+                          <DurationField
+                            record={data[id]}
+                            source={'duration'}
+                          />
+                        </span>
+                      </span>
+                    }
+                  />
+                  <ListItemSecondaryAction className={classes.rightIcon}>
+                    <ListItemIcon>
+                      <SongContextMenu record={data[id]} visible={true} />
+                    </ListItemIcon>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              </span>
+            )
+        )}
+      </List>
+    )
+  )
+}
+
+SongSimpleList.propTypes = {
+  basePath: PropTypes.string,
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  data: PropTypes.object,
+  hasBulkActions: PropTypes.bool.isRequired,
+  ids: PropTypes.array,
+  onToggleItem: PropTypes.func,
+  selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
+}
+
+SongSimpleList.defaultProps = {
+  hasBulkActions: false,
+  selectedIds: [],
+}
diff --git a/ui/src/common/index.js b/ui/src/common/index.js
index e0ea874c6..1029f47af 100644
--- a/ui/src/common/index.js
+++ b/ui/src/common/index.js
@@ -26,3 +26,4 @@ export * from './useInterval'
 export * from './useToggleStar'
 export * from './useTraceUpdate'
 export * from './Writable'
+export * from './SongSimpleList'
diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js
index 59dec1f04..1d5f7f51f 100644
--- a/ui/src/song/SongList.js
+++ b/ui/src/song/SongList.js
@@ -11,12 +11,12 @@ import StarIcon from '@material-ui/icons/Star'
 import {
   DurationField,
   List,
-  SimpleList,
   SongContextMenu,
   SongDatagrid,
   SongDetails,
   QuickFilter,
   SongTitleField,
+  SongSimpleList,
 } from '../common'
 import { useDispatch } from 'react-redux'
 import { setTrack } from '../actions'
@@ -78,18 +78,7 @@ const SongList = (props) => {
         perPage={isXsmall ? 50 : 15}
       >
         {isXsmall ? (
-          <SimpleList
-            primaryText={(r) => r.title}
-            secondaryText={(r) => r.artist}
-            tertiaryText={(r) => (
-              <>
-                <DurationField record={r} source={'duration'} />
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-              </>
-            )}
-            linkType={(id, basePath, record) => dispatch(setTrack(record))}
-            rightIcon={(r) => <SongContextMenu record={r} visible={true} />}
-          />
+          <SongSimpleList />
         ) : (
           <SongDatagrid
             expand={<SongDetails />}