MuDBase/client/src/components/tables/ResultsTable.tsx

import React from 'react';
import { TableContainer, Table, TableHead, TableRow, TableCell, Paper, makeStyles, TableBody, Chip, Box, Button } from '@material-ui/core';
import stringifyList from '../../lib/stringifyList';
import { newWindowReducer, WindowType } from '../windows/Windows';
import PersonIcon from '@material-ui/icons/Person';
import AlbumIcon from '@material-ui/icons/Album';
import AudiotrackIcon from '@material-ui/icons/Audiotrack';
import LocalOfferIcon from '@material-ui/icons/LocalOffer';
import { songGetters } from '../../lib/songGetters';
import { Redirect, useHistory } from 'react-router';

export interface SongGetters {
    getTitle: (song: any) => string,
    getId: (song: any) => number,
    getArtistNames: (song: any) => string[],
    getArtistIds: (song: any) => number[],
    getAlbumNames: (song: any) => string[],
    getAlbumIds: (song: any) => number[],
    getTagNames: (song: any) => string[][], // Each tag is represented as a series of strings.
    getTagIds: (song: any) => number[][], // Each tag is represented as a series of ids.
}

export interface IProps {
    songs: any[],
    songGetters: SongGetters,
}

export default function SongTable(props: IProps) {
    const history = useHistory();

    const classes = makeStyles({
        button: {
            textTransform: "none",
            fontWeight: 400,
            paddingLeft: '0',
            textAlign: 'left',
        },
        table: {
            minWidth: 650,
        },
    })();

    return (
        <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="a dense table">
                <TableHead>
                    <TableRow>
                        <TableCell align="left">Title</TableCell>
                        <TableCell align="left">Artist</TableCell>
                        <TableCell align="left">Album</TableCell>
                        <TableCell align="left">Tags</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {props.songs.map((song: any) => {
                        const title = props.songGetters.getTitle(song);
                        // TODO / FIXME: display artists and albums separately!
                        const artistNames = props.songGetters.getArtistNames(song);
                        const artist = stringifyList(artistNames);
                        const mainArtistId = props.songGetters.getArtistIds(song)[0];
                        const mainArtistName = artistNames[0];
                        const albumNames = props.songGetters.getAlbumNames(song);
                        const album = stringifyList(albumNames);
                        const mainAlbumName = albumNames[0];
                        const mainAlbumId = props.songGetters.getAlbumIds(song)[0];
                        const songId = props.songGetters.getId(song);
                        const tagIds = props.songGetters.getTagIds(song);

                        const onClickArtist = () => {
                            history.push('/artist/' + mainArtistId);
                        }

                        const onClickAlbum = () => {
                            history.push('/album/' + mainAlbumId);
                        }

                        const onClickSong = () => {
                            history.push('/song/' + songId);
                        }

                        const onClickTag = (id: number, name: string) => {
                            history.push('/tag/' + id);
                        }

                        const tags = props.songGetters.getTagNames(song).map((tag: string[], i: number) => {
                            const fullTag = stringifyList(tag, undefined, (idx: number, e: string) => {
                                return (idx === 0) ? e : " / " + e;
                            })
                            return <Box ml={0.5} mr={0.5}>
                                <Chip size="small"
                                    label={fullTag}
                                    onClick={() => onClickTag(tagIds[i][tagIds[i].length - 1], fullTag)}
                                />
                            </Box>
                        });

                        const TextCell = (props: any) => {
                            return <TableCell padding="none" {...props}>
                                <Button className={classes.button} fullWidth={true} onClick={props._onClick}>
                                    <Box
                                        width="100%"
                                        display="flex"
                                        alignItems="center"
                                        paddingLeft="16px"
                                    >
                                        {props.children}
                                    </Box>
                                </Button>
                            </TableCell>;
                        }

                        return <TableRow key={title}>
                            <TextCell align="left" _onClick={onClickSong}>{title}</TextCell>
                            <TextCell align="left" _onClick={onClickArtist}>{artist}</TextCell>
                            <TextCell align="left" _onClick={onClickAlbum}>{album}</TextCell>
                            <TableCell padding="none" align="left" width="25%">
                                <Box display="flex" alignItems="center">
                                    {tags}
                                </Box>
                            </TableCell>
                        </TableRow>
                    })}
                </TableBody>
            </Table>
        </TableContainer>
    );
}