I'm fairly new to AbortController and so far I've only used it in useEffect callbacks. However, I have a screen in my React Native app which allows the user to click a button to open a dialog; in the background the button click causes an axios call to the api, and then the retrieved information is shown in the dialog.
But what happens if the user clicks the button and then quickly navigates away? In this case, the information doesn't need to be retrieved, and it can't be displayed once it's been retrieved anyway.
Is there a way to handle this? ie can I set up an AbortController and then if the user navigates away from the screen, abort the signal so that the api call gets cancelled?
I don't know If I understand you correctly, but you can use useEffect cleanup function to cancel axios request. About cleanup function: https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm.
If you want you can prevent user to go back, until axios fetching is done-> https://reactnavigation.org/docs/preventing-going-back/
Related
I am writing a functional test using Testcafe. The test scenario is as below,
There is a toggle button that activates/deactivates based on an API call
When I open my application, an API call is made that returns a value ON/OFF; based on that, the toggle switch is activated or deactivated.
I want to intercept that call when the user clicks on that toggle button again.
Long story short:
User logs in
XYZ API is called made, and it gives the response ON
Based on that response, the toggle button is activated
Then user will click on the toggle button
Now the XYZ API should be called again which will return OFF
await t.navigateTo(`${url}`);
await t
.click(myPage.toggleSwitch)
.addRequestHooks(myPage.xyzAPI.respond([{ valueBar: "ON" }
]))
.expect(myPage.toggleSwitch.checked)
.eql(true);
});```
I want to intercept that call when the user clicks on that toggle button again.
You need to add the target request hook before the click action. Also, before the click action, the actions chain should be broken.
await t.navigateTo(`${url}`);
await t.addRequestHooks(<hook that caught the API calls>);
await t
.click(myPage.toggleSwitch)
.expect(myPage.toggleSwitch.checked).eql(true);
I have a Vue application and need to know when a user is about to navigate out of my application.
I have a beforeRouteLeave in place that triggers an alert if I go from myvueapp.nl/example to myvueapp.nl/example2 however if I navigate from myvueapp.nl/example to www.google.nl it doesn't trigger.
The reason I need to do this is the following:
You can navigate to /example/123 and this will open the example page and open a modal showing the user data of person 123. when you close this modal a router.go(-1) will be triggered. This allows me to use nested modal views. However if you go from google.com directly to /example/123 and then close the modal you will be send back to google.com. My idea was to check where a user is about to navigate to and if it is outside my domain I will check if the modal is open. is the modal open then close that instead of navigation. If it was already closed then let the user go on their way.
How can I know when a user is about to navigate out of my application?
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 want to make a desktop app in vue-electron. I am new to both vue.js and electron.
I am having some problems while managing state.
When I click on login button https://cloudup.com/cFl9MTY6cnn I send data i.e sessionId and username to next screen https://cloudup.com/c76fmL8OGbF and on this screen I display these props https://cloudup.com/csahnc6Z04J using this code https://cloudup.com/cdR0F6Qyt-3 but as I go to the third screen https://cloudup.com/c0F1ztX8qu3 and then come back then this data disappears https://cloudup.com/cTFW32DxeRa
I am going back to second screen using router.go(-1) https://cloudup.com/cvpxk4GsIRx
The vue-router documentation https://router.vuejs.org/en/essentials/navigation.html says that
“router.push method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.”
and router.go(n) "This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack"
However in my case, lifecycle hooks are called again when I go back to history stack. So does that mean when we come to previous page that component is created again and not popped from stack. I actually don’t want to refresh / reload the page on back button.
You need to send the data to the third screen,too.
Instead of
<route-link to="third_screen"></router-link>
You need to write,
<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link>
And instead of router.go(-1) you need to send the data as params again to your second screen using router.push() method.
But I won't suggest the above method as you need to pass the same data as params to all routes.
You should also have a look at Vuex.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
You should store your Session Id as cookie instead of passing it as props.
Update
Also have a look at <keep-alive></keep-alive>.
Reference
In my Durandal app, I have a search page - I'd like to:
Load a clean search page when it's loaded from the menu (router.navigate('#/search'))
When navigating to an item from the search page, then using the back button, this should return to the original search result & criteria.
I'm also storing my search criteria & results as a (app-wide) singleton, which is injected to the view model via RequireJS.
Am I able to: distinguish how the user entered the page? I can see that the activate() lifecycle call is triggered under both entry methods.
If you want to know if the user landed to the search page by clicking a link/button from your app or by visiting by entering a url/back button, what I would do is to raise an event when the user clicks on the link/button and on the search page check if the event has been raised or pass some parameter in router.navigate.
I have been recently doing some work on distinguishing a user click from within the application and a back or forward button from the browser. If you are using router.navigate() to navigate around the Durandal application the router.explicitNavigation flag is set to true. But you would want to capture this before the 'router:navigation:complete' event in 'router:route:activating' event as the flag gets set back to false on 'router:navigation:complete' event.
Bottom line is if you are using router.navigate to navigate around the application the router.explicitNavigation property will be set to true and if navigation is triggered using the back/forward button in the browser router.explicitNavigation will be set to false.
In actual case you might not even need to perform router.navigate() to distinguish between an in app navigation and a browser back/forward because Durandal's router module listens to all 'a' tag click on the document level and sets the explicitNavigation flag to true. However I haven't tested this fully.