Buttons: Interaction has already been acknowledged - discord

I'm trying to disable the button after a certain amount of clicks
But when I click that amount of times, it doesn't update and I get an error saying interaction has already been acknowledged.
I tried it without the i.reply but I keep getting interaction failed.
client.buttonClicks = 0;
message.channel.send({
content: "Click on the button below to enroll for fate adventure!",
components: [row],
});
const filter = (m) => m.customId === "enrollButton";
const collector = message.channel.createMessageComponentCollector({
filter: filter,
max: parseInt(args[1]),
time: 15000,
});
collector.on("collect", async (i) => {
await i.reply({
content: "`You have enrolled in the fate adventure`",
ephemeral: true,
});
message.channel.send(`<#${i.user.id}> *enrolls in the fate adventure.*`);
client.buttonClicks++;
if (client.buttonClicks == args[1]) {
row.components[0].setDisabled(true);
await i.update({
content: "**Maximum Members reached**",
components: [row],
});
message.channel.send("done");
}
});
collector.on("end", (collected) => {
message.channel.send(`Clicked ${collected.size} times`);
});

Related

Trying to handle errors with axios with React state and sweetalert2

I've tried this a few different ways and can't seem to get it to work.
I am trying to handle an error when a user enters an already existing username. The backend works fine, however I am trying to get sweetalert to respond appropriately
front end react jsx
const [errors, setErrors] = useState({
error: false,
message: ''
});
const saveUser = async(userData) =>{
await axios.post('/save_score', userData).then((res)=>{
if(res.status === 200){
Swal.fire({
icon: 'success',
title: 'Score saved!',
text: `${res.data.username} scored ${res.data.score} points`,
showCancelButton: true,
cancelButtonText: 'Hiscores',
confirmButtonText: 'Play again'
})
}
}).catch((err)=>{
if(err.response.status === 400){
setErrors({
error: true,
message: err.response.data.usernameError
})
}
});
}
const gameOver = (score) => {
Swal.fire({
title: 'Game over',
text: `You scored ${score} points! Save your score?`,
allowOutsideClick: false,
showConfirmButton: true,
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'No'
}).then((response)=>{
if(response.isConfirmed){
//user confirmed
Swal.fire({
title: 'Enter your username',
input: 'text',
inputLabel: 'Username: ',
showCancelButton: true,
inputValidator: (value) => {
if(!value){
return 'Must enter a username!';
} else {
var userData = {username: value, score: score};
saveUser(userData).then(()=>{
console.log(errors);
})
}
}
})
} else {
console.log('user cancelled');
}
})
}
the problem I've been having with this specific attempt is that the state isn't changing. when I log after my saveUser().then(), the state comes back as its initialized even when I am trying to throw the username exists error.
I've also tried creating an error object, and inside the axios post's error, I set that objects error key to true and the errors response to that objects message key, but when that happens it seems axios post comes after any sort of error handling and it doesn't respond correctly.
let me know if this is enough info

How to change "Request to join" button text to "Join Meeting" in iframe

I'm new to daily-co integration in react js. Can you please suggest how to change
"Request to Join" text to "Join Meeting". Thank in advance.
At present in Iframe all content is coming. Can any one please suggest how to change
the "Request to Join" text to "Join Meeting".
My Observations:
One api is calling at the time of page is loaded:
https://b.daily.co/call-ui/16c545a8520b661e39dc13c62b335ffea4cb3651/locales/en/translation.js
{ ....
"haircheck": {
....
"setup": {
"requestToJoin": "Request to join",
"title": "Are you ready to join?",
}
},
}
//React Class component:
import React from 'react';
import DailyIframe from '#daily-co/daily-js';
import Cookies from 'universal-cookie';
import axios from '../../util/axios';
import util from '../../util/util';
const cookies = new Cookies();
class VideoCallFrame2 extends React.Component {
constructor(props) {
super(props);
this.iframeRef = React.createRef();
this.state = {
authorizationToken: 'Bearer ------------',
roomName: '',
room: null,
token: null,
rooms: [],
roomUrlWithToken: null,
isVideoHidden: false,
joinedObject: null,
status: '',
askedQuestions: [],
};
}
componentDidMount() {
this.daily = DailyIframe.wrap(
this.iframeRef.current,
{
showLeaveButton: true,
});
this.setState({
...this.state,
roomUrlWithToken: this.props.meetingRoomUrl
});
this.startRoom();
let temp = this.daily.meetingState();
this.setState({ status: temp });
this.get_candidate_position();
}
get_candidate_position = (e) => {
this.setState({
positionDetails: response.data.candidate[0]
})
}
onHandleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
joinMeetingEvents = () => {
// Meeting related events
this.daily.on('loading', () => { console.log('Loading......') })
this.daily.on('loaded', () => { console.log('Loaded......') })
this.daily.on('joining-meeting', () => { console.log('Joining......') })
this.daily.on('joined-meeting', () => {
console.log('Joined......')
})
this.daily.on('app-message', (e) => {
console.log('app-messageapp-message app-message>>>>>>> ', e)
})
this.daily.on('left-meeting', (e) => {
console.log('Left Meeting......', e)
this.props.history.push('/thankyou')
})
this.daily.on('participant-joined', (e) => {
console.log('Partcipand Joined......', e);
this.setState({
...this.state,
isVideoHidden: true
})
if (this.state.joinedObject.user_id == '') {
}
})
this.daily.on('error', (e) => {
console.log('ERROR......', e)
})
}
leftMeeeting = () => {
this.daily.leave();
this.daily.destroy();
}
startRoom = async () => {
let res = await this.daily.join({
url: this.props.meetingRoomUrl
})
this.setState({
...this.state,
joinedObject: null
})
this.daily.on('loading', () => { console.log('Loading......') })
this.daily.on('loaded', () => { console.log('Loaded......') })
this.daily.on('joining-meeting', () => { console.log('joining-meeting......') })
this.daily.on('joined-meeting', () => {
console.log('Joined meeting......');
})
this.daily.on('joined-meeting', () => {
console.log('Joined meeting......');
})
this.daily.on('meeting-session-updated', () => {
console.log('meeting-session-updated......');
});
this.daily.on('access-state-updated', (evt) => {
console.log('access-state-updated......', evt);
if (evt.access.level == 'lobby') {
//Some code
}
});
this.daily.on('participant-joining', () => { console.log('participant-joining') })
this.daily.on('left-meeting', (e) => {
this.props.history.push('/thankyouPage');
});
this.daily.on("app-message", (e) => {
let Arr = this.state.askedQuestions;
if (
e &&
e.data &&
e.data.message &&
e.data.message.endInterview == "end") {
this.leftMeeeting();
}
});
this.daily.on('participant-joined', (e) => {
console.log('Partcipand Joined......', e);
setTimeout(() => {
this.daily.sendAppMessage({ message: { intervieweraskedQuestions: this.state.askedQuestions } }, '*');
}, 3000)
})
this.daily.on('error', (e) => {
console.log('ERROR......', e)
})
}
render() {
return (
<div className="" style={{ height: '450px' }}>
<iframe className="Video-Frame video-call-frame"
title="video call iframe"
ref={this.iframeRef}
allow="camera; microphone; fullscreen; display-capture"
></iframe>
</div>
)
}
}
export default VideoCallFrame2;
I work at Daily. :) "Request to join" is shown for private rooms with "knocking" enabled. We use this language because clicking the button will alert the room owner to let you in, so you do need to ask to join -- you can't just go straight in.
This can be turned off though. If you make the room public, it will say "Join meeting" instead of "Request to join" because anyone can join. Alternatively, you can make a meeting token for anyone trying to enter a private room so they don't need to ask to join. (In this case, the button text would also be updated to "Join meeting").
More generally, you can't update button text to something custom in the Daily Prebuilt UI, but you can build your on custom UI with our APIs. That's probably too much effort just to update one button, though. :)
I have not used daily.co before but I did a little digging and confirmed my suspicions: As far as I can tell, this is not possible.
In order to for a page to edit the contents of an iFrame, the frame must be on the same origin as its parent page, as per the Same Origin Policy.
Your page is on the origin http://localhost:3001, while the frame is on an origin owned by Daily, e.g. https://server.daily.co.
This policy exists for security reasons, an example is imagine some website https://attacker.com with a frame to https://bankaccount.com, without this policy the attacker could change a button on the frame from "Click to send all money to attacker" to "Click to receive your $1 million reward!"
The only method I have found that may be plausible after doing a couple searches for "origin", "host", etc. on docs.daily.co is this reference page for "Daily's Video Component System (VCS)", but from what I can tell this cannot solve the problem as this only allows you to add an overlay to the video call, not the frame itself.

Cant get the reactions to recognise on a specific message now

In a pervious post I was having issues getting the bot to recognise reactions and the fix worked however and then changed it to react on a message that the bot says afterwards and now it isnt working again, I have tried changing the user condition so its the original command author but that didn't seem to work
So you run the code and it makes the embed perfectly and reacts to it however it doesnt recognise when you react and makes the timeout message
exports.run = async (client, message, args) => {
message.delete()
const MINUTES = 5;
const questions = [
{ answer: null, field: 'placeholdquestion' },
{ answer: null, field: 'placeholdquestion' },
{ answer: null, field: 'placeholdquestion' },
]; //to add more questions just add another line of the above code {answes: null, field: `Question Here`}
let current = 0;
const commanduser = message.author.id
// ...
// wait for the message to be sent and grab the returned message
// so we can add the message collector
const sent = await message.author.send(
`${questions[current].field}`,
);
const filter = (response) => response.author.id === message.author.id;
// send in the DM channel where the original question was sent
const collector = sent.channel.createMessageCollector(filter, {
max: questions.length,
time: MINUTES * 60 * 1000,
});
// fires every time a message is collected
collector.on('collect', (message) => {
//if (questions > 1 && questions < 10) {
// add the answer and increase the current index HERE
questions[current++].answer = message.content;
const hasMoreQuestions = current < questions.length; //change to be an imput of how many questions you want asked
if (hasMoreQuestions) {
message.author.send(
`${questions[current].field}`,
);
}
});
// fires when either times out or when reached the limit
collector.on('end', (collected, reason) => {
if (reason === 'time') {
return message.author.send(
`I'm not saying you're slow but you only answered ${collected.size} questions out of ${questions.length} in ${MINUTES} minutes. I gave up.`,
);
}
const embed = new MessageEmbed()
.setTitle("LOA Request")
.addFields(
{ name: 'placehold', value: questions[0].answer+'/10' },
{ name: 'placehold', value: questions[1].answer+'/10' },
{ name: 'placehold', value: questions[2].answer+'/10', inline: true },)
.setColor(`#1773BA`)
.setTimestamp()
.setThumbnail("https://media.discordapp.net/attachments/772915309714735205/795378037813805126/mvg_clean_2.png")
.setFooter("request by: " + message.author.tag);
;
message.channel.send(embed)
.then(function (message) {
message.react("👍")
message.react("👎")})
const filter = (reaction, user) => {
return ['👍', '👎'].includes(reaction.emoji.name) && user.id === commanduser; //changed to try and fix it didnt work as message.author.id or this
};
message.awaitReactions(filter, { max: 1, time: 60000, errors: ['time'] } )
.then(collected => {
const reaction = collected.first();
if (reaction.emoji.name === '👍') {
message.channel.send('you reacted with a thumbs up.');
}
else {
message.reply('you reacted with a thumbs down.');
}
})
.catch(collected => {
console.log(`After a minute, only ${collected.size} out of 4 reacted.`);
message.reply('you didn\'t react with neither a thumbs up, nor a thumbs down.');
});
});
;
}
You have a slight logic error. You need to fit the code from your second filter to the message.awaitReactions inside of your message.channel.send(embed).then(function (message)...) method. In your code, the bot is trying to check for reactions from the original message, which you already deleted (since the awaitReactions is outside the scope of your function where you send and react to the embed).
Like this:
message.channel.send(embed)
.then(function (message) {
message.react("👍")
message.react("👎")
const filter2 = (reaction, user) => {
return ['👍', '👎'].includes(reaction.emoji.name) && user.id === commanduser;
};
message.awaitReactions(filter2, { max: 1, time: 60000, errors: ['time'] })
.then(collected => {
const reaction = collected.first();
if (reaction.emoji.name === '👍') {
message.channel.send('you reacted with a thumbs up.');
}
else {
message.reply('you reacted with a thumbs down.');
}
})
.catch(collected => {
console.log(`After a minute, only ${collected.size} out of 4 reacted.`);
message.reply('you didn\'t react with neither a thumbs up, nor a thumbs down.');
});
})

PayPal Buttons don't close (Duplicates after re-rendering)

I'm implementing the PayPal Smart Payment Buttons with React, and every time my component re-renders I receive a duplicate of the buttons (with the one on the bottom holding the correct transaction information).
Clearly I need to close the buttons, if I try so I receive the error that window.paypal.close()is not a function.
I tried to follow this example: Paypal React shows extra buttons after changing amount
Here is my code, I'm using Redux for state management and I need to rerender the component if items in the shopping cart are removed (to update the item information of the transaction):
useEffect(() => {
if (window.myButton) {
window.myButton.close()
}
window.myButton = window.paypal
.Buttons({
createOrder: (data, actions) => {
return actions.order.create({
purchase_units: [
{
description: "test transaction",
amount: {
currency_code: "USD",
value: document.getElementById("totalAmount").innerHTML,
breakdown: {
item_total: {
currency_code: "USD",
value: document.getElementById("totalAmount").innerHTML
}
}
}
,
items: itemsInCart.map(item => {
console.log(item.value)
return {
name: item.name,
unit_amount: {
currency_code: "USD",
value: String(item.price)
},
quantity: "1"
}
})
}
]
});
},
onApprove: async (data, actions) => {
const order = await actions.order.capture();
}
.catch(function(error) {
console.error("Error writing document: ", error);
});
},
onError: err => {
// setError(err);
console.error(err);
}
})
.render(paypalRef.current)
}, [itemsInCart]);
})
.render(paypalRef.current)
The problem is you are setting myButton to the .render() promise result, not the Button itself.
You need to store a reference to the actual Button (before rendereing it), and only then .render() it -- so that later you can call .close() on the reference. Basically:
let myButton = paypal.Buttons(
....
});
myButton.render(paypalRef.current)
// and at some later point in time...
myButton.close();

React Native If Exist in Firebase

My firebase structure:
Hello, i am trying;
One person opening a announcement with own userid. After another person get in this announcement's inside. If second person wants to send a notification to first person, he uses first person's userid's table in firebase and he put own userid's to first persons userid's table. If first person wants to see, who sends notification to him, he looks to own user id's table and he sees other peoples userids (other people are sended notification to him).. Now one person can send lots of time notification, i want to one person can send just one time for this reason i am trying to control it.
if (firebase.database().ref(`/bavuruistek/${userid}`).child(katilan) === null ) {
firebase.database().ref(`/bavuruistek/${userid}`)
.push({
katilan, istek })
.then(() => {
dispatch({ type: STUDENT_REQUEST_SUCCESS });
Actions.pop();
});
}
if (firebase.database().ref(`/bavuruistek/${userid}`).child(katilan) !== null) {
console.log(firebase.database().ref(`/bavuruistek/${userid}/${katilan}`));
Alert.alert(
'Mesaj',
'Daha önce başvurunuz yapılmış!',
[
{ text: 'Tamam', onPress: () => null }
]
);
}
firebase.database().ref(`/basvuruistek/${userid}`).on('value', (snapshot) => {
const { currentUser } = firebase.auth();
const notes = snapshot.val();
Object.keys(notes).forEach(key => {
if (notes[key].katilan !== currentUser.uid) {
this.setState({ click: true });
} if (notes[key].katilan === currentUser.uid) {
this.setState({ click: false });
}
});
});
You are trying to use firebase.database().ref(`/bavuruistek/${userid}`).child(katilan) inside an if statement, which doesn't work because 1) .child() returns a Reference object. Trying something like this may help you achieve the intended outcome:
firebase.database().ref(`/bavuruistek/${userid}`).child(katilan).once('value').then(snapshot => {
if (snapshot.val() === null ) {
firebase.database().ref(`/bavuruistek/${userid}`)
.update({
katilan, istek
})
.then(() => {
dispatch({ type: STUDENT_REQUEST_SUCCESS });
Actions.pop();
});
} else {
console.log(snapshot.val());
Alert.alert(
'Mesaj',
'Daha önce başvurunuz yapılmış!',
[
{ text: 'Tamam', onPress: () => null }
]
);
}
}
The main difference is that I'm using .once, reading the resulting snapshot value, and using that as part of the if statement to check if it is null.

Resources