MuDBase/client/src/components/ItemListLoadedSongItem.tsx

import React from 'react';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import MusicNoteIcon from '@material-ui/icons/MusicNote';
import Chip from '@material-ui/core/Chip';

import { SongDisplayItem } from '../types/DisplayItem';

export interface IProps {
    item: SongDisplayItem
}

export default function ItemListLoadedSongItem(props: IProps) {
    var artists = props.item.artistNames.length ? props.item.artistNames[0] : "Unknown";
    for (var i: number = 1; i < props.item.artistNames.length; i++) {
        artists = artists.concat(", " + props.item.artistNames[i]);
    }

    return (
        <ListItem>
            <ListItemIcon>
                <MusicNoteIcon />
            </ListItemIcon>
            <ListItemText
                primary={props.item.title}
                secondary={artists}
            />
            {props.item.tagNames.map((tag: any) => {
                return <Chip label={tag}/>
            })}
            {props.item.storeLinks.map((link: any) => {
                return <a href={link.url} target="_blank" rel="noopener noreferrer">
                    <ListItemIcon>
                        {link.icon}
                    </ListItemIcon>
                </a>;
            })}
        </ListItem>
    );
}