I'm building a bot in discord and i would like to add a slash command feature that will allow the user to select a choice from many (like a drop down menu). However, you can't add more than 25 choices for a slash command option. So my alternative solution is to have a content matching preview like with giphy bot when the user type a string i will update the content accordingly.
However, i don't find any guide on how i can implement this behavior. is it about updating choices on interactionCreate event?
The way the bot is doing that is through something called Autocomplete. Basically, you can declare a command to have Autocomplete and then, in the interactionCreate event listener, you can check if the command is an Autocomplete interaction, then respond with something. You can set the command to be Autocomplete by using this in one of the options for the command:
.setAutocomplete(true)
Then, in your main file, where you have the interactionCreate event listener, you can just check when a command is an Autocomplete interaction by using interaction.isAutocomplete(). Then, you can respond to the interaction by using this:
const value = interaction.options.getFocused() // This gets the value which the user typed
const response = await interaction.respond({
name: '', // The name of the response
value: '' // The value of the response
})
You can learn more about Autocomplete here => Autocomplete | discord.js
However, I'm not sure if any bot can do that since this was hard coded to be like that by Discord and since bots can only respond with strings (I think).
Related
So currently I have an issue where I have a Channel Tab where it displays the channel icon and name. Now the problem is, every time I change channels the icon stays the same as the first channel I clicked.
PREVIEW
This is my current code: https://sourceb.in/IsTYrBRjMv
How do I make it change every time I enter a new channel?
Note:
Every channel has a different endpoint
Try adding a useEffect, something like this (you may need to adjust)
useEffect(() => {
setData(channel.icon);
},[channel]);
I've been playing around with React and Azure App Insights.
const appInsights = useAppInsightsContext();
For Events and Metrics only, there seems to be 2 ways of doing things. Why is this? And why is it only for these 2 things only ie for PageViews or exceptions you can only use the second way (appInsights.trackPageView, appInsights.trackException)
//first way
const trackEventHook = useTrackEvent(
appInsights,
"AppInsightsPage Track Event Hook",
{ extraData: "some extra data important to this" },
false
);
trackEventHook({ extraData: "function call extra data" });
//2nd way
appInsights.trackEvent({ name: "AppInsightsPage Custom Event" }, undefined);
While using Application Insight, we use TrackEvent in our code to count various events. How often users choose a particular feature or maybe how often they make particular choices.
For Example, we want to understand the user behavior on a site and we want to know about specific actions like clicking the Add to Cart button.
This can be done by two ways :
Using trackEvent Method
appInsights.trackEvent({ name: 'EventName', properties: { anyProperty } })
We use appInsights object that we are exporting and pass some data to trackEvent, the name of the event we are tracking and any custom properties we want to include in the event.
Using React Plugin useTrackEvent Hook
const trackEventName = useTrackEvent(appInsights, "Event Name", condition);
The useTrackEvent Hook is used to track any custom event that an application may need to track, such as a button click or other API call. It takes four arguments:
Application Insights instance (which can be obtained from the useAppInsightsContext Hook).
Name for the event.
Event data object that encapsulates the changes that has to be tracked.
skipFirstRun (optional) flag to skip calling the trackEvent call on initialization. Default value is set to true.
trackExpection is used to log exception which are related to API, we don't know when they will happen and for trackPageView, page view telemetry is sent by default when each screen or page is loaded. So, in trackExpection and trackPageView we don't have any data object to track any changes. That's why we don't use useTrackEvent hook for this two.
For more information please check the following Microsoft Documents:
React Plugins for Application Insights.
Application Insight API.
I'm using testcafe in a React app and I'm having some trouble with making testcafe click a dropdown option from a Reach dropdown menu.
I can access the option with Selector after triggering a click on the button that activates the dropdown menu, but clicking the desired option doesn't seem to do anything at all.
However, the action is triggered if I reach the option via keys.
//This works
await t
.click('[testid="menuButton"]')
.pressKey('down')
.pressKey('down')
.pressKey('enter');
//This doesn't
await t
.click('[testid="menuButton"]')
.click('[data-reach-menu-item]:nth-of-type(3)');
I made sure that the selection is made properly in the second case, so that doesn't seem to be the problem.
Any thoughts?
Thanks!
This test is successfully executed on my side:
import { Selector } from 'testcafe';
fixture `fixture 1`
.page `https://reacttraining.com/reach-ui/menu-button/`
test('test', async t => {
await t
.click('[data-reach-menu-button]')
.click('[data-reach-menu-item]:nth-of-type(3)');
})
Perhaps there is more than one menu button on your page, so the '[data-reach-menu-item]:nth-of-type(3)' selector points to an invisible item. To check this, insert .debug() after .click('[testid="menuButton"]') in you code:
await t
.click('[testid="menuButton"]')
.debug()
.click('[data-reach-menu-item]:nth-of-type(3)');
After the test code stops at debug(), open the browser's development console, execute the document.querySelectorAll('[data-reach-menu-item]:nth-of-type(3)') command, and check if the first returned node matches the third element in the menu's dropdown.
I am switching to payment intents and am trying to reuse a saved card. (react-stripe-elements)
This works quite well right now and instead of
stripe.handleCardPayment(intentData.client_secret);
(as suggested in the docs) I am using the following, because this worked.
stripe.confirmPaymentIntent(intentData.client_secret)
With the first one I always got an error, that the card number is not filled out - seems like it always takes the react-elements-form that is on the same page as a basis.
It worked and I could pay with my saved cards until now, but now I tested it, with the "requires auth on all transactions" card: 4000002760003184
When I use confirmPaymentIntent it just gets stuck on the status: [status] => requires_source_action
How would I go about and show the "confirmation" dialog, as it did with the handleCardPayment method, in case it is needed?
The transactions are all happening on the page and are triggered via react-stripe-elements.
Seems like react-stripe-elements will always take the Elements form context, whenever you have a form initialized (which I had on the same page) and you use the stripe prop.
This is pretty neat, when you fill out the form to add a new credit card, but really annoying, when you don't want to use form data, but your saved card.
I asked the stripe support and they told me, that there is no way to get around this, so I looked around a little more and found, that react-stripe-elements is just using the normal Stripe JS SDk and thereby the window.Stripe object should be available (out of the content) to do this easily.
So this is how I solved it for us:
const { stripe } = this.props;
// if we use a saved payment method and the Stripe obj is available
if (isSavedPaymentMethod && typeof Stripe !== 'undefined') {
// don't use the context bound stripe from react-stripe-elements, but the uninitialized Stripe and pass your key
const stripeOutofBound = Stripe(STRIPE_API_KEY);
await stripeOutofBound.handleCardPayment(
intentData.client_secret,
);
} else {
// otherwise use the react-stripe-elements prop directly, that passes the new credit card form data
await stripe.handleCardPayment(
intentData.client_secret,
);
}
I would like to have a two part submit strategy for my redux-form. First, the user called submit on the form which calls a validation method. The response might have some warnings. I want the user to see the warnings, if any, and optionally continue with another submit that will be a real POST to the server rest api.
If there are no warnings, I would like the component to submit automatically. I am trying to kick this off from the componentWillReceiveProps method.
The problem is that nextProps.handleSubmit(this.doSubmit2of2); does not call this.doSubmit2of2. Execution just steps over that call.
componentWillReceiveProps(nextProps) {
//boolean that indicates validation just occured against the server
if (nextProps.storeWithValidation) {
//the user hit submit, first it was validated, if no issues, go ahead and try to create
if (nextProps.storeValidationOk) {
//fire off create store
nextProps.handleSubmit(this.doSubmit2of2);
}
else {
//there are validation issues of some kind, let the user see them
//do nothing here and let the render method do its thing with the props
}
}
}
I have found the discussion here: https://github.com/erikras/redux-form/issues/67, but in my case the submit is happening as result of a particular server response. Also, I realize that there are validation features of redux-form. Am I designing too far outside of the intended framework convention?
Also, I have thought of redesigning my server api, but I would like to know how far I can go with this current approach of automatically resubmitting after a response from the server.
From what I understand you want to submit the form remotely after a response from the server. You can create a remote submit following this example from the docs. Then you can dispatch(submit('yourFormName')) whenever you want to as many times as you want to.