I am now using the react-admin framework, when the user clicks the Save button on the Edit page. Normally it will go to the List page and show an undo notification at the bottom, but at that time server-side gets validation error (for example, image size, file size). Then all user input at the Edit page is lost.
How can we still remain on the Edit page in case of the server-side error, and go to the List page only if the sever-side returns success?
If I put redirect = false, it will not go to the List page even if the server-side returns success:
const CustomToolbar = props => (
<Toolbar {props} >
<SaveButton redirect={false}/>
</Toolbar>
)
React Admin uses an approach called Optimistic Rendering: when a user fill a form, we are optimistic and render the better result.
This globally improve the user experience by making the results displayed faster, even before the API is reached.
The bad side is that, if the form isn't strictly validated client-side and the API throws an error, the user have to do it again.
From here, I see two solutions to your problem:
Implement a more strict client-side validation of your form
Disable the optimistic rendering by specifying undoable={false}
<Edit {...props} undoable={false}>
{...}
</Edit>
Related
I am working on an application using react-admin, where each registered user will have it's own set of resources which are dynamically loaded, we don't know the exact resources upfront. Users register and login using Auth0. The data is fetched from Hasura. The solution is based on the following example to load the resources: https://marmelab.com/react-admin/Admin.html#unplugging-the-admin-using-admincontext-and-adminui
Loading the resources dynamically is working (see snippet below), however i need to refresh the page manually in order to see the resources in the sidebar menu, while the sidebar menu must be updated as soon as the dynamic resources are available. After logging out and logging back in, the resources are again not visible and a refresh is required again.
function AsyncResources() {
...
return (
<AdminUI
title="Hasura Dashboard"
dashboard={Dashboard}
history={history}
loginPage={LoginPage}
layout={Layout}
>
{resources.map(resource => (
<Resource name={resource.name} key={resource.name} options={getOptions(resource.name)} list={getList(resource.name)} />
))}
<Resource /> { /* Without this Resource, the initial page doesn't load */ }
</AdminUI>
);
}
I had a look at the following issues regarding the same topic, but i couldn't find a definite solution to my specific problem: https://github.com/marmelab/react-admin/issues/5177
with answer: "Basically you write components for every resource but only enable what you want." This is not a solution for me because that would mean i have to manually add every single resource of every new registered user.
I already created a custom Menu to see if that would help, but shows the same behaviour as the default Menu.
How can i make sure the dynamic loaded resources are visible in the menu without the user having to refresh the window after logging in?
I'm new to Nuxt, but I have a bootstrap header with the standard v-if="authenticated" kinda state for login\logout buttons.
The auth provider is firebase which has a onAuthStateChanged method that I use to set (or reset) the user property in the state store.
So page loads, I see the login button, onAuthStateChanged runs, sets the user, then login disappears and logout button shows up (can see the Vuex events from base->set as well).
Question is, what am I doing fundamentally wrong such that I'm getting this flashing state. Is the only way to handle this to work with localStorage? ...should I NOT be storing the user in the state.store?
You need to save it in the store. But make no mistake because when reloading you have to set the token value using localstorage.
These are very good explanations
I'm in Registration.vue component. The component contains registration form with email, password, etc.. fields.
I would like to thanks user for successful registering (with instruction that he should go check email).
What is the best solution to do this?
I was thinking about:
redirecting to second component using this.$router.push or this.$router.replace but this will change URL and when somebody go this URL without registering he will see message that he should check email...
replacing current component with other when registering action successful but I dont know how to do this (without URL change, and with good code).
using <component v-bind:is="currentView"> but I am not sure if this is best solution. I need to make three files (for parent component with :is, for form and for thanks). Also i need to emit event from child that registration went well, but on the other hand i should fire vuex registration action and dont expect for response (see the next sequence)
The other thing is that we should not wait for the vuex action to be completed, but i need to know if registration went well - https://github.com/vuejs/vuex/issues/46#issuecomment-174539828
I am using vue.js 2, vue-router, vuex
Thanks
You could use something like Sweet Alert to display a success or error dialog. It supports Ajax requests so you can display a "your registration is processing, please check your email" message while it is being handled.
The first approach is suitable when user successfully registers and then redirected to login page.
Now issue how to check whether user has entered required field? So there comes form validations. You can use vee-validate plugin and it's perfect for all projects. I am using it and it has so many available validations.
With these UI validations, after they are passed successfully then only submit action will be fired or else user will be prompted for entering required field.
You can see basic example here - http://vee-validate.logaretm.com/index.html#basic-example
When action is performed,
///main.js
...
Vue.use(VeeValidate)
...
// register.vue
this.$validator.validateAll().then((result) => {
if (result) {
//done
this.$router.replace( '/login' );
}
else{
// throw error
}
Simple as that.
Try this approach if you want the UI validations on the form.
I have an elm app that incorporates logging in and fetching data from a server. Once I've logged in, I navigate to /#/pages/13 and it updates the model with page id 13. If I click around within the app, I see evidence that that page persists in the model.
When I navigate away from that page via internal links, then enter http://localhost:3000/#/pages/13 into the URL, I still see that page.
If I enter that URL while I am at that location, it seems to treat the behavior as a complete refresh, resetting the model...including my token, so it logs me out.
How can I enter the same page into the URL without elm resetting the model?
(If it matters, I am using gulp)
That behaviour seems to be by design, although I didn't find an official source for this.
The most you can do is register a beforeunload listener, which might show a prompt allowing the user to cancel the navigation.
Related: https://stackoverflow.com/a/34415095/2014893
Giving the scenario where when leaving the page is losing unsaved data, the idea is to ask the user for a confirmation.
Using the canDeactivate hook I can easily avoid the user from leaving the page (I'm displaying a confirm dialog).
However, as soon the user press back on the second time, he can leave without a problem. It seems that the state is lost and the canDeactivate hook is no longer called.
*This applies to all pipeline steps (I tried then all, none safes the state after the first next.cancel)
Is there a better way to avoid the user leaving the page?
canDeactivate() {
return Promise.resolve(false);
}