Change Internet Radio UX

ui/src/playlist/index.js

@@ -5,13 +5,11 @@ import DynamicMenuIcon from '../layout/DynamicMenuIcon'
 import PlaylistList from './PlaylistList'
 import PlaylistEdit from './PlaylistEdit'
 import PlaylistCreate from './PlaylistCreate'
-import PlaylistShow from './PlaylistShow'
 
 export default {
   list: PlaylistList,
   create: PlaylistCreate,
   edit: PlaylistEdit,
-  show: PlaylistShow,
   icon: (
     <DynamicMenuIcon
       path={'playlist'}

ui/src/radio/RadioList.js

@@ -4,6 +4,7 @@ import {
   CreateButton,
   Datagrid,
   DateField,
+  EditButton,
   Filter,
   List,
   sanitizeListRestProps,
@@ -16,6 +17,9 @@ import {
 } from 'react-admin'
 import { ToggleFieldsMenu, useSelectedFields } from '../common'
 import { StreamField } from './StreamField'
+import { setTrack } from '../actions'
+import { songFromRadio } from './helper'
+import { useDispatch } from 'react-redux'
 
 const useStyles = makeStyles({
   row: {
@@ -70,10 +74,9 @@ const RadioListActions = ({
 }
 
 const RadioList = ({ permissions, ...props }) => {
-  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
-
   const classes = useStyles()
-
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  const dispatch = useDispatch()
   const isAdmin = permissions === 'admin'
 
   const toggleableFields = {
@@ -86,17 +89,21 @@ const RadioList = ({ permissions, ...props }) => {
         rel="noopener noreferrer"
       />
     ),
-    streamUrl: <StreamField source="streamUrl" />,
-    createdAt: <DateField source="createdAt" showTime />,
+    streamUrl: <TextField source="streamUrl" hideUrl />,
     updatedAt: <DateField source="updatedAt" showTime />,
+    createdAt: <DateField source="createdAt" showTime />,
   }
 
   const columns = useSelectedFields({
     resource: 'radio',
     columns: toggleableFields,
-    defaultOff: ['updatedAt'],
+    defaultOff: ['createdAt'],
   })
 
+  const handleRowClick = async (id, basePath, record) => {
+    dispatch(setTrack(await songFromRadio(record)))
+  }
+
   return (
     <List
       {...props}
@@ -110,7 +117,6 @@ const RadioList = ({ permissions, ...props }) => {
     >
       {isXsmall ? (
         <SimpleList
-          linkType={isAdmin ? 'edit' : 'show'}
           leftIcon={(r) => (
             <StreamField
               record={r}
@@ -126,11 +132,9 @@ const RadioList = ({ permissions, ...props }) => {
           secondaryText={(r) => r.homePageUrl}
         />
       ) : (
-        <Datagrid
-          rowClick={isAdmin ? 'edit' : 'show'}
-          classes={{ row: classes.row }}
-        >
+        <Datagrid rowClick={handleRowClick} classes={{ row: classes.row }}>
           {columns}
+          {isAdmin && <EditButton />}
         </Datagrid>
       )}
     </List>

ui/src/radio/RadioShow.js

@@ -1,52 +0,0 @@
-import { Card } from '@material-ui/core'
-import React from 'react'
-import {
-  DateField,
-  required,
-  ShowContextProvider,
-  SimpleShowLayout,
-  TextField,
-  UrlField,
-  useShowController,
-} from 'react-admin'
-import { StreamField } from './StreamField'
-
-const RadioShowLayout = ({ ...props }) => {
-  const { record } = props
-
-  if (!record) {
-    return null
-  }
-
-  return (
-    <>
-      {record && (
-        <Card>
-          <SimpleShowLayout>
-            <TextField source="name" validate={[required()]} />
-            <StreamField source="streamUrl" />
-            <UrlField
-              type="url"
-              source="homePageUrl"
-              rel="noreferrer noopener"
-              target="_blank"
-            />
-            <DateField variant="body1" source="updatedAt" showTime />
-            <DateField variant="body1" source="createdAt" showTime />
-          </SimpleShowLayout>
-        </Card>
-      )}
-    </>
-  )
-}
-
-const RadioShow = (props) => {
-  const controllerProps = useShowController(props)
-  return (
-    <ShowContextProvider value={controllerProps}>
-      <RadioShowLayout {...props} record={controllerProps.record} />
-    </ShowContextProvider>
-  )
-}
-
-export default RadioShow

ui/src/radio/StreamField.js

@@ -15,8 +15,8 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export const StreamField = ({ hideUrl, ...rest }) => {
-  const record = useRecordContext(rest)
+export const StreamField = (props) => {
+  const record = useRecordContext(props)
   const dispatch = useDispatch()
   const classes = useStyles()
 
@@ -32,7 +32,6 @@ export const StreamField = ({ hideUrl, ...rest }) => {
   return (
     <Button className={classes.button} onClick={playTrack}>
       <PlayArrowIcon />
-      {!hideUrl && record.streamUrl}
     </Button>
   )
 }
@@ -41,10 +40,8 @@ StreamField.propTypes = {
   label: PropTypes.string,
   record: PropTypes.object,
   source: PropTypes.string.isRequired,
-  hideUrl: PropTypes.bool,
 }
 
 StreamField.defaultProps = {
   addLabel: true,
-  hideUrl: false,
 }

ui/src/radio/index.js

@@ -1,7 +1,6 @@
 import RadioCreate from './RadioCreate'
 import RadioEdit from './RadioEdit'
 import RadioList from './RadioList'
-import RadioShow from './RadioShow'
 import DynamicMenuIcon from '../layout/DynamicMenuIcon'
 import RadioIcon from '@material-ui/icons/Radio'
 import RadioOutlinedIcon from '@material-ui/icons/RadioOutlined'
@@ -16,7 +15,6 @@ const all = {
       activeIcon={RadioIcon}
     />
   ),
-  show: RadioShow,
 }
 
 const admin = {