React admin delete update notification or snack bar is showing before getting response from the respective query form data-provider
What it should be like
when I hit the delete button the below toast notification should wait for the response from the graphql query defined in dataProvider and show the error in toast or snackbar below
What is happening instead
when I hit the delete button the below toast notification does not wait for the response from the graphql query defined in dataProvider and shows the Elemnent is Deleted in toast or snackbar below after that if the query got an error it shows them after Elemnent is Deleted toast this is wrong behavior.
Here is the proof:
https://streamable.com/rlef7y
This behavior is configurable, here is a description of the logic of work: "Optimistic Rendering and Undo"
Related
I am updating query params everytime some filter changes but clicking on browser back button going to a route without query params.
eg. I'm in hats page -> I selected a colour filter then I do navigate('/hats?colour=abc') and again select price filter then I do navigate('/hats?colour=abc&price=500').
Now if I click on browser back button it goes directly to /hats instead of previous route '/hats?colour=abc'.
How can achieve this ?
Expected behaviour - On clicking browser back button it should go from '/hats?colour=abc&price=500' to '/hats?colour=abc'.
I am implementing SSO in my reactjs app on a button click and debugging one error by adding console.log to see the this.props.location variable. But as I click on the auth me button (that will trigger the sso auth) it shows the log for few second and then disappear. I have taken printscreen
I want to expand the object in console and view the attributes value , but unable to do it as it is disappearing. I have added wait timers also to hold the block but its getting hanged. Is there is a better way so that I can log the console.log's data to a file and view the errors peacefully without getting in a rush.
You have to use this code inside your submit button to prevent the default submit event.
onSubmitClicked = (e) => {
e.preventDefault()
//additional codes
}
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 have a login page(Functional Component), When a user tries to login without entering the required fields, I have to show the error message(ex:"Email is required"). When an invalid field exists, I shouldn't make the API call.
But, without entering fields, when I click on login button, API call is done. Again clicking on login button stops the API call.
I have made this demo - https://stackblitz.com/edit/react-pd6vvk?file=login.js which explains the issue.
Steps to follow:
1.Click on login without filling any text values. You can see "API request made" statement when fields are invalid.
2.Again click on login button, "API Request stopped" statement is displayed now.
I am new to React and I don't know, the reason and the solution to fix this issue.
Can somebody please help me out?
Thank you,
Abhilash
Because, setValidFields has async behaviour :
validateLoginForm(); //<--- inside this setValidFieldsis async
console.log(validFields);
if (isFormValid()) { //<---- so,this will still have true value ( means not updated )
// inside validateLoginForm()
// this state change won,t be reflected immediately
setValidFields(validFields => ({
...validFields,
[key]: error.length == 0
}));
I have made few changes as per your code structure, as long as I know you will need useEffect also as shown in working demo.
WORKING DEMO
To learn react + flux, I am building a simple compose box where the paragraph is broken down into multiple tweets and then by clicking a button you can tweet the series of tweets. The high level app has the following components:
<div>
<ComposeBox tweetParaText={this.state.tweetParaText} ref='composeBox' />
<DisplayTweets tweetCollection={this.state.tweetCollection} ref='displayTweets' />
<TweetButton signedInSignature={this.state.signedInSignature} ref='tweetButton' />
</div>
Once you are done composing the text, you click on the TweetButton. The TweetButton has 4 UI states:
Ready (Show the Tweet Button)
Tweeting (in which case I show a
loading gif as well as change the text from "Tweet" to "Tweeting..")
Tweeted Succesfully (In which case I want to revert text of the button to "Tweet", hide the ajax laoder gif and show a message "Tweets sent successfully!" for a duration of 7 seconds.)
Error (In which case I want to revert text of the button to "Tweet", hide the ajax loader gif and show an error message)
These states are unique to the tweet button and are different from the application state which I am storing in the store.
The onclick of the TweetButton component is as follows:
_onClick:function(){
this.setState({buttonState:tweeting});
ActionCreator.tweet(this.props.tweetCollection,this.props.signedInSignature);
}
On changing the state here, the UI changes for this state happen, as that is how the component has been written. However, I am a bit stumped after this.
The flow of data being unidirectional, the action upon completion dispatches an event to the store which updates its state and thus the state of the ComposeBox component. But how and where do I set the state of the TweetButton component? Should I write a different store for this? Or is there a better way of achieving this?
I use the same store for the status/state of the call.
Lets say the result of your call will be stored in _Tweets = {}; inside the TweetStore object.
I register the results uniquely (not mandatory I guess) inside the store like this
_Tweets["someresultid/tag"] = {
data: result.data,
status: result.status
}
TweetStore is listening for 2 events : case : "Loading" and case : "ReceiveResults/answer/wtv"
When the user initiate the call you'll dispatch "loading" at the same time than your call. Then when it receive the answer you dispatch "answer".
Your view is listening for any change of your store, when a change occurs the callback will check the status and rerender accordingly (lording,error or result).
I hope it helps