Telegraf.js How to pass parameters to a function from inline keyboard - telegram-bot

I have an array of messages containing some text and an inline keyboard with "delete" button.
bot.command('items', ctx => {
items.forEach(async data => {
await ctx.reply(data.Title,
Markup.inlineKeyboard([Markup.button.callback("delete item", "DeleteItem")]));
})
})
And I have a function bot.action for the delete buttons on my inline keyboard. How do I pass a parameter to the bot.action so I can delete the item via the delete button.
bot.action("DeleteItem", async ctx => {
ctx.reply("deleting item");
})

For delete message, you can use:
bot.action('delete', ctx => ctx.deleteMessage())
As you can see from examples/echo-bot-module.js.
If you need pass a parameter to the bot.action, you may try:
bot.action(/^data-(\d+)$/, (ctx) => {
return ctx.answerCbQuery(`Param: ${ctx.match[1]}! 👍`)
})
// And send with callback data
Markup.button.callback('Button', `data-${Math.round(Math.random()*1000)}`)

Related

How can I access to each element inside of a grid element with Cypress?

I have a Grid component which includes 24 divs and inside of each div I need to take the value.
This value actually arrives in <p>, so which is the best way to do this?
Below is the app image. I would appreciate an example.
You could probably do something like storing the data in an object or array outside of the Cypress chain. Without a code example, here's my best guess.
cy.get('grid').within(() => { // cy.within() searches only within yielded element
const data = {}; // create data object
cy.get('div').each(($div, index) => { // cy.each() allows us to iterate through yielded elements
data[index] = $div.text() // or possibly some other JQuery command to get the value
// additionally, could go without the index at all and make `data` an array.
}).then(() => {
// whatever needs to be done with `data`, wrapped in `then` to make sure data is populated correctly.
});
});
You can add use each for this to loop through the elements and then do further operations:
cy.get('.chakra-stack')
.find('p')
.each(($ele) => {
cy.log($ele.text().trim()) //Logs all the texts one by one
})
Just add the p selector to your cy.get() command
cy.get('div.chakra-stack p') // access <p> within <div>
.each($el => {
cy.wrap($el).invoke('text')
.then(text => {
...
})
})
To get the value before the text
cy.get('div.chakra-stack p') // access <p> within <div>
.each($el => {
cy.wrap($el)
.prev() // element with value
.invoke('text')
.then(value => {
...
})
})
Accessing values by text label like this
const values = {}
cy.get('div.chakra-stack p')
.each($el => {
const frase = $el.text()
cy.wrap($el).prev().invoke('text')
.then(value => values[frase] = +value)
})
.then(() => {
// values = {'shield': 1, 'session': 2, ...}
})

How to solve Validation error after submit

I use veevalidate rule for each input in my form. After submit with valid data, all these data have been sent successfully to backend-side, but on frontend-side each input is highlighted as it ivalid.
I had added reset method from veevalidate to unset any errors when submit is selected. But it don't work. Here is the part of my code
beforeSubmit() {
this.$validator.pause();
this.$nextTick(() => {
this.$validator.errors.clear();
this.$validator.fields.items.forEach(field =>
field.reset());
this.$validator.fields.items.forEach(field =>
this.errors.remove(field));
this.$validator.resume();
});
this.$validator.validateAll().then((result) => {
this.onSubmit();
...
I came to solution: when all errors have been removed from the form in next render with $nextTick, we should replace this.$validator.resume() method with this.$validator.reset(). Thant's it.
In general, the working part is
beforeSubmit() {
this.$validator.pause();
this.$nextTick(() => {
this.$validator.errors.clear();
this.$validator.fields.items.forEach(field =>
field.reset());
this.$validator.fields.items.forEach(field =>
this.errors.remove(field));
this.$validator.reset();
});
this.$validator.validateAll().then((result) => {
this.onSubmit();
...

Fetching data as reaction to observable array change in MobX

Suppose we have an observable main object array, and observable data about that array (e.g. suppose we have selectedReports and reportParameters) . Now suppose we emit action to either add report to the array or remove report from that array. How do we run an action to fetch the data for reportParameters, as reaction?
Thus far, my attempt, which isn't working, looks like this:
// report parameters stuff
async fetchAllReportParameters() {
reaction(
() => this.selectedReports,
async (reports) => {
// reset the report parameters
this.reportParameters = {}
// fetch the parameters for all the reports
await reports
.forEach((report) => {
this.fetchReportParameters(report.Id)
})
}
)
}
/**
* fetches report parameters for a reportId
* #param {number} reportId
*/
fetchReportParameters = (reportId) => {
this.reportParameters[reportId] = []
const onSuccess = (reportParameters) => {
this.reportParameters[reportId] = reportParameters
}
this.api.GetReportParameters(reportId)
.then(onSuccess, this.fetchReportParametersError)
}
fetchReportParametersError = (error) => {
// TODO: output some error here
}
Are you ever actually calling fetchAllReportParameters? If you don't, the reaction will never be created. You may instead like to create the reaction from the constructor, assuming you always want it to be run. One example:
class SomeStore {
constructor() {
this.disposeReportsReaction = reaction(
() => this.selectedReports.slice(),
reports => {
// ...
}
)
}
}
Call storeInstanceName.disposeReaction() whenever you're done with the reaction.
Notice that I've used .slice() here. This is because if you simply pass the array reference, the reaction will never be called. See reaction docs: you have to actually use the value in some way.
You also need to tweak the async code a bit. This:
async (reports) => {
await reports.forEach((report) => {
// ...
})
}
won't do what you hope, because forEach returns undefined. Even if you shift the async keyword to the forEach callback, all the API requests will be sent in quick succession. Consider using something like this instead, depending on whether you want to wait for the preceding request before sending the next one:
try {
for (const report of reports) {
await this.fetchReportParameters(report.id)
}
} catch (e) {
// handle error
}
This isn't always the right answer: sometimes it's fine to send a bunch of requests in quick succession (perhaps especially if it's a small batch, and/or in the context of HTTP/2). If that's ok with you, you could use:
reports => {
// ...
reports.forEach(report => this.fetchReportParameters(report.id))
}

Asynchrounous call issue in Angular 5

I am working with Angular5 , I have a big issue (please see the below code)
In simple words it is a asynchronous execution issue, how to reduce this
let confirmData = {
dlgHeader: 'Add',
msgTxt: 'Are you sure to Add Language!!',
eventName: 'locationmanagement_languages_assign'
};
this.confirmService.confirmData = confirmData;
(1) this.confirmationService.setShowConfirm(true);
(2) this.confirmAnchor.createConfirmation(ConfirmationComponent);
this.confirmService.getReturnValue()
.subscribe(
suc => {
if (suc.eventName == 'locationmanagement_languages_assign') {
this.assignLanguage(suc);
}
});
in above (1) line of code is responsible to create confirmation.(i have created custom confirmation component)
inside custom confirmation user can click CONFIRM/CANCEL buttons.
I want to stop (2) line code execution until user click CONFIRM/CANCEL buttons in custom confirmation component.
Now i am using as below in language.component.ts ,, but i am calling the getReturnValue() in ngOnInit().
I dont want to use ngOnInit() to get action from custom confirmation component either it is CONFIRM/CANCEL action
ngOnInit() {
this.getReturnValueEvent();
}
assignLanguageEvent() {
debugger;
this.requestedData = [];
for (let data of this.selectedAssignLanguages) {
this.requestedData.push({
id: data.value.id,
set_value: data.value.setValue
});
}
console.log('Requested Data::', this.requestedData);
let confirmData = {
dlgHeader: 'Add',
msgTxt: 'Are you sure to Add Language!!',
eventName: 'locationmanagement_languages_assign'
};
this.confirmService.confirmData = confirmData;
this.confirmationService.setShowConfirm(true);
this.confirmAnchor.createConfirmation(ConfirmationComponent);
}
getReturnValueEvent() {
this.subscription1 = this.confirmService.getReturnValue()
.subscribe(
suc => {
if (suc.eventName == 'locationmanagement_languages_assign') {
this.assignLanguage(suc);
}
}
);
}

ev.off() seems to kill listeners when switching between 2 map() calls

I have list with a filter that toggles between "all" and "favorites".
This works OK. However, when I activate the outcommented ev.off() in both methods, a toggle from one filter to the other will not produce results anymore.
Both lists will stay empty from that point on.
(btw: since ev.off() is still experimental, I'm ok for now, not using it. Maybe this info might help for future release)
1.subscribe() method that calls the relevant list methods
export const subscribe = (payload, cb) => {
const filter = payload.filter
const user = payload.user
switch (filter) {
case 'all' :
subscribeAllSkills(cb)
break
case 'favorites' :
subscribeFavoriteSkills(user, cb)
break
...
}
}
2.subscribeAllSkills()
const subscribeAllSkills = (cb) => {
gun.get('skill')
.map()
.on(
(skill, pk, ctx, ev) => {
//ev.off()
cb(skill, pk)
}
)
}
3.
const subscribeFavoriteSkills = (user, cb) => {
gun.get('user')
.get(user.pk)
.get('favorite_skill')
.map()
.on(
(skill, pk, ctx, ev) => {
//ev.off()
cb(skill, pk)
}
)
}