-1

Below is REACT code for details page

Ticket is a primary object, and what i want to do is when downloading add the ticket name as .pdf filename.

So i need a solution to pass the concrete ticket name to the handleDownload function

In the render section there are no problem declaring ticket.ticketName etc. But with onClick the problem arises.

type TicketProps =
    TicketStore.TicketState &
    typeof TicketStore.actionCreators & 
    RouteComponentProps<{ticketId: string}>;

class Ticket extends React.PureComponent<TicketProps> {

    public componentDidMount() {
        this.ensureDataFetched();
    }    

    private ensureDataFetched(){
        this.props.requestTicket(+this.props.match.params.ticketId);
    }

    handleDownload = () =>{
        Axios.get(`${apiUrl}/api/tickets/download/${this.props.match.params.ticketId}`,{responseType: 'arraybuffer',
            headers: { "Content-Type": 'application/pdf' }
          }).then((response) => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', "test"+.pdf");
            document.body.appendChild(link);
            link.click();
        });
    }

    public render() {
        let ticket = this.props.ticket;
        if(this.props.isLoading){
            return <span>Laen andmeid...</span>;
        }
        if (ticket === undefined) {
            return <h1>Piletit ei leitud</h1>;
        }
        let name = ticket.ticketName
        return (
            <React.Fragment>
                <h3>Üritus: {ticket.ticketName}</h3>
                <Table striped hover size="sm">
                    <tbody>
                        <tr>
                            <td className="details">Asukoht:</td>
                            <td>{ticket.eventLocation}</td>
                        </tr>
                        <tr>
                            <td className="details">Kuupäev:</td>
                            <td>{ticket.eventDate}</td>
                        </tr>
                        <tr>
                            <td className="details">Lisainfo:</td>
                            <td>{ticket.extraInfo}</td>
                        </tr>
                        <tr>
                            <td className="details">Pilet:</td>
                            <td>{ticket.pdfTicket}</td>
                        </tr>
                    </tbody>
                </Table>
                <Button onClick={this.handleDownload}>Lae alla</Button>
                <Popup trigger={<button className="btn btn-primary">Show location on map</button>} position="bottom left">
                <div><Maps aadress={ticket.eventLocation}></Maps>></div>
                </Popup>
                <Link to='../tickets'>
                    <Button color='primary' onClick={()=>{}}>
                        Tagasi
                    </Button>
                </Link>
                <br></br>
            </React.Fragment>
        );
    }
}

export default connect(
    (state: ApplicationState) => state.ticket,
    TicketStore.actionCreators
    )(Ticket as any);

I am getting parsing error after ticket?

Any thoughts? Thanks

TaaviM
  • 1
  • 3

2 Answers2

0

Use the following code without the question marks:

<Button onClick={()=>{this.handleDownload(ticket.id,ticket.ticketName)}}>Lae alla</Button>
Maf
  • 696
  • 1
  • 8
  • 23
0

The solution was to add

  if(this.props.ticket===undefined){
        return //something;
    }

Before using the object.

TaaviM
  • 1
  • 3