64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
import React, { useState, useRef } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Card, Button } from 'antd';
|
|
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
|
|
import { useAppState } from '../../hooks/useAppState';
|
|
import { TrackCardBody } from './TrackCardBody';
|
|
|
|
const Track = ({ initialTrack, isAlreadyOrdered }) => {
|
|
const trackElement = useRef();
|
|
const { setInvoicedItems, invoicedItems } = useAppState();
|
|
const [isJustInvoiced, setIsJustInvoiced] = useState(
|
|
invoicedItems.find((curTrack) => curTrack.ID === initialTrack.ID)
|
|
);
|
|
|
|
const onChangedStatus = () => {
|
|
const newIsJustInvoiced = !isJustInvoiced;
|
|
if (newIsJustInvoiced) {
|
|
setInvoicedItems([
|
|
...invoicedItems,
|
|
{
|
|
ID: initialTrack.ID,
|
|
name: initialTrack.name,
|
|
artist: initialTrack.album.artist.name,
|
|
albumTitle: initialTrack.album.title,
|
|
unitPrice: initialTrack.unitPrice,
|
|
},
|
|
]);
|
|
} else {
|
|
setInvoicedItems(invoicedItems.filter(({ ID: curID }) => curID !== initialTrack.ID));
|
|
}
|
|
setIsJustInvoiced(newIsJustInvoiced);
|
|
};
|
|
|
|
return (
|
|
<div className="card-element" ref={trackElement}>
|
|
<Card
|
|
actions={[
|
|
<>
|
|
{!isAlreadyOrdered && (
|
|
<Button onClick={onChangedStatus} danger={isJustInvoiced}>
|
|
{isJustInvoiced ? <MinusOutlined /> : <PlusOutlined />}
|
|
</Button>
|
|
)}
|
|
</>,
|
|
]}
|
|
title={initialTrack.name}
|
|
bordered={false}
|
|
>
|
|
<TrackCardBody track={initialTrack} />
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Track.propTypes = {
|
|
initialTrack: PropTypes.object.isRequired,
|
|
isAlreadyOrdered: PropTypes.bool,
|
|
};
|
|
Track.defaultProps = {
|
|
isAlreadyOrdered: undefined,
|
|
};
|
|
|
|
export { Track };
|