React: stop page reload when I press refresh, instead show a modal - javascript

When I press refresh in a page, I want to show this modal:
But I want to prevent the page to reload except if I click the continue button.
This is the code
import dialog from '#catapulthealth/catapult-dialog';
.
.
.
componentDidMount() {
window.addEventListener('beforeunload', this.showModal);
}
showModal() {
return (
dialog({
title: 'We are processing your file',
body: 'Importing will continue even if you leave the page',
buttons: {
ok: 'Continue',
},
})
);
}
dialog, comes from a private library. How can I stop reloading the page?

You can use Cookie once you clicked on Button, so when page reloads you have to check whether the cookie is set or not. On the basis of cookie, you can show hide popup. Please check following code reference.
import cookie from "react-cookie";
setCookie() => {
let d = new Date();
d.setTime(d.getTime() + (minutes*60*1000));
cookie.set("onboarded", true, {path: "/", expires: d});
};

Related

Reload page after a change in a modal

I have a page: customers, where I have a list of customers.
There I have a button to edit the informations'customers.
When I click on this edit button I open a modal in another page: CustomerDetail.
So clicking in editing button I can modify the data in the modal, and when I save date I have a problem. Basically the info in the page customers are not update until I refresh the page.
So in my customerDetail.page.ts, when I click on save:
onUpdateCustomer(customer){
//...code...
updateCustomer.pipe(untilDestroyed(this)).subscribe(
(data) => {
this.loading = false;
this.showingUpdateMessage = true
this.goToCustomers();
},
(error) => {
console.log("error - update customer ", error);
}
);
}
I have tried using goToCustomers but it doesn't work properly
goToCustomers(){
this.router.navigate(["/customers"])
}
I Would not use window.location.reload() but I don't know how to do to have updated data without reload the page.
Imagine to have a page with a table (customers page), when click on edit button I call the other page CustomerDetail as:
openCreateCustomerPage() {
this.router.navigate(["/customerDetails"], {
queryParams: { customerCreate: true },
});
So I open the modal.

Ionic: imageModal.onDidDismiss() refresh the app on real device

Im using the follow code to upload an image:
On simultaed device its working completly ok while on real one the modal get opened and than after choose the pic from phone the app reloaded and go into tabs section (main page).
async adRemoveImage(event: Event) {
const imageModal = await this.modalController.create({
component: AddRemoveImagesModal,
id: "my-modal-id",
cssClass: "image-modal",
swipeToClose: true,
showBackdrop: true,
});
imageModal.onDidDismiss().then((x) => {
console.log("dismisssssssssheree", x);
});
return await imageModal.present();
}
And on the modal after executing the upload modal should be dismissed.
... some code ....
this.modalController.dismiss();

Trying to get to the popup window (sign up) form after clicking on 'sign up' button using cypress

I am navigating to this website https://www.twitch.tv/ and to register a new user.
I am performing those steps:
navigating to the page.
clicking on sign up button
moving to popup and clicking on log in
then a sign up pop up window comes up.
I am trying to get this window but my application does not recognize the page and I am getting an error. please mind the image attached:
this is my code:
describe('RegisterTwitchTv', function() {
it('Register New User', function() {
cy.visit('')
cy.title().should('eq', 'Twitch')
cy.get('button[data-a-target="signup-button"]').click()
// cy.on('window:confirm', ($alertElement) => {
// expect($alertElement).to.equal('Log in')
// }).click
cy.contains('Log in').click()
cy.window().then((win) => {
cy.get('button[class~="tw-pd-x-1"]').click()
})
})
})
but my code does not recognize the new window which is the one I want to handle.
Unfortunately accessing new windows via Cypress is not possible in its current version.
I would be a good practice to test this functionality using two isolated tests:
describe('RegisterTwitchTv', () => {
// Check the popup is opened
it('Register New User popup is opened', () => {
cy.visit('', {
onBeforeLoad(win) {
cy.stub(win, 'open');
}
});
cy.title().should('eq', 'Twitch')
cy.get('button[data-a-target="signup-button"]').click();
cy.contains('Log in').click();
cy.window()
.its('open')
.should('be.called');
});
// Check the login works
it('Register New User2 login', () => {
cy.visit('/login?popup=true');
cy.get('button[class~="tw-pd-x-1"]').click()
cy.get('#signup-username').type('test#test.com');
...
...
});
});

Cannot interact with page after $state.reload()

I want to add a row in database, after that, reload current page to update new data, but when I use $state.reload(), all page becomes dark and I cannot interact with this page.
DeviceService.addDevice($scope.newDevice).then(function (result) {
if (result.data.success) {
flash.success = result.data.message;
// current state is 'profile' and I want to reload to update data
$state.go('profile', {}, { reload: true });
} else {
flash.error = result.data.message;
}
});
After reload, from this:
becomes this:
UPDATE:
I think maybe it's because I use a modal to add device. Are there anyway to fix it ? How can I close the modal before reload the state. I am using bootstrap modal inside file profile.html
try following:
$state.reload();
and if will not work try this:
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});

React component breaks on browser back/forward button

I have two forms, one is called profile, the other is settings. I'm using introjs to have a guided tour through these two forms. If I only move forward through the tour using the introjs 'Next Step' button there are no issues (first image). But, if I use the browser back or forward button, my forms look like the second image.
Code on profile page that utilize introjs:
runTour() {
if (this.state.showTour === true) {
const tourObj = {
userId: Meteor.userId(),
page: 'profile',
};
introJs.introJs().setOption('doneLabel', 'Next step').start().oncomplete(()
=> {
changeIntroTour.call(tourObj);
browserHistory.push('/user/settings');
})
.onexit(() => {
changeIntroTour.call(tourObj);
});
}
}
componentWillReceiveProps(nextProps) {
this.existingSettings(nextProps);
if (nextProps.intro.length > 0) {
this.setState({
showTour: nextProps.intro[0].profileTour,
}, () => {
this.runTour();
});
}
}
The issue was I was not calling introJs.exit() on componentWillUnmount. This was keeping my instance of introJs running from one component to the next which caused the bug.

Categories

Resources