i cant get my bug report to work with trello by api

Kevin Ponsen
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
February 22, 2024

i cant figure it out whats wrong



this is my typescript code

import React, { useState, ChangeEvent, FormEvent } from 'react';
import axios from 'axios';

const BugReportPage = () => {
const [bugDetails, setBugDetails] = useState({
email: '',
description: '',
});

const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setBugDetails({
...bugDetails,
[name]: value,
});
};

const submitBugReport = async () => {
const apiKey = 'apikey'; // Replace with your new API key
const token = 'secretkey'; // Replace with the new token you generate
const boardId = 'boardid';

const url = `https://api.trello.com/1/cards?key=${apiKey}&token=${token}&idList=${boardId}`;

try {
const response = await axios.post(url, bugDetails);
console.log('Bug report submitted successfully:', response.data);
// Optionally, reset the form or show a success message
} catch (error) {
console.error('Error submitting bug report:', error);
// Handle error, show an error message, etc.
}
};

const handleSubmit = (e: FormEvent) => {
e.preventDefault();
submitBugReport();
};

return (
<div>
<h1>Bug Report Page</h1>
<form onSubmit={handleSubmit}>
<label>Email:</label><br />
<input
type="email"
name="email"
value={bugDetails.email}
onChange={handleInputChange}
required
/>

<br /><label>Bug Description:</label><br />
<textarea
name="description"
value={bugDetails.description}
onChange={handleInputChange}
required
/>

<button type="submit">Submit Bug Report</button>
</form>
</div>
);
};

export default BugReportPage;



BLg3DgxUTXC6vaibtaRK1g
after submit i get this error

cjt5eS1mT4uFXxlyKzZO9w

 

i hope someone can give me a headsup whats wrong 

thanks in advance

1 answer

0 votes
Adam Cao
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
February 23, 2024

Two things:

  1. You should be targeting a list ID instead of a board ID
  2. bugDetails is not the expected format of a Trello card.

Try something like this instead:

const submitBugReport = async () => {
const apiKey = 'apikey'; // Replace with your new API key
const token = 'secretkey'; // Replace with the new token you generate
const listId = 'listId'; // cards go into lists so make sure this is a list id and not a board id

const url = `https://api.trello.com/1/cards?key=${apiKey}&token=${token}&idList=${listId}`;

const body = {
name: `Bug report: ${bugDetails.description}`,
desc: `From: ${bugDetails.email} \n \n ${bugDetails.description}`
};

try {
const response = await axios.post(url, body);
console.log('Bug report submitted successfully:', response.data);
// Optionally, reset the form or show a success message
} catch (error) {
console.error('Error submitting bug report:', error);
// Handle error, show an error message, etc.
}
};

 

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events