diff --git a/src/components/Header/__snapshots__/test.js.snap b/src/components/Header/__snapshots__/test.js.snap
index 332bdd7..a78a5a9 100644
--- a/src/components/Header/__snapshots__/test.js.snap
+++ b/src/components/Header/__snapshots__/test.js.snap
@@ -59,7 +59,7 @@ exports[`Header opening the Privacy Policy modal 1`] = `
@@ -135,7 +135,7 @@ exports[`Header opening the Privacy Policy modal while holding alt key 1`] = `
@@ -211,7 +211,7 @@ exports[`Header opening the Privacy Policy modal while holding ctrl key 1`] = `
@@ -287,7 +287,7 @@ exports[`Header opening the Privacy Policy modal while holding meta key 1`] = `
@@ -363,7 +363,7 @@ exports[`Header opening the Privacy Policy modal while holding shift key 1`] = `
@@ -440,7 +440,7 @@ exports[`Header rendering 1`] = `
@@ -516,7 +516,7 @@ exports[`Header rendering with no banner 1`] = `
diff --git a/src/components/InstallPrompt/__snapshots__/test.js.snap b/src/components/InstallPrompt/__snapshots__/test.js.snap
index 17abdcb..f034bc7 100644
--- a/src/components/InstallPrompt/__snapshots__/test.js.snap
+++ b/src/components/InstallPrompt/__snapshots__/test.js.snap
@@ -1,41 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`InstallPrompt accepting install prompt 1`] = `
-
-
-
- Add to Home Screen
-
-
-
-`;
-
-exports[`InstallPrompt accepting install prompt 2`] = ``;
-
-exports[`InstallPrompt rejecting install prompt 1`] = `
-
-
-
- Add to Home Screen
-
-
-
-`;
-
-exports[`InstallPrompt rejecting install prompt 2`] = ``;
-
exports[`InstallPrompt rendering 1`] = ``;
exports[`InstallPrompt rendering after an install prompt has been requested 1`] = ``;
diff --git a/src/components/InstallPrompt/index.js b/src/components/InstallPrompt/index.js
index 57b31d9..73bb1b4 100644
--- a/src/components/InstallPrompt/index.js
+++ b/src/components/InstallPrompt/index.js
@@ -1,30 +1,12 @@
-import React from 'react';
-import { withTranslation, Trans } from 'react-i18next';
+import React, { useState, useEffect, useCallback } from 'react';
+import { Trans } from 'react-i18next';
-class InstallPrompt extends React.PureComponent {
- state = {
- installPrompt: null
- }
+const InstallPrompt = () => {
+ const [ installPrompt, updateInstallPrompt ] = useState(null);
- componentDidMount() {
- window.addEventListener('beforeinstallprompt', this.handleInstallPrompt);
- }
-
- componentWillUnmount() {
- window.removeEventListener('beforeinstallprompt', this.handleInstallPrompt);
- }
-
- handleInstallPrompt = event => {
- this.setState({
- installPrompt: event
- });
- }
-
- handleInstall = async event => {
+ const handleInstall = useCallback(async event => {
event.preventDefault();
- const { installPrompt } = this.state;
-
try {
installPrompt.prompt();
await installPrompt.userChoice;
@@ -33,24 +15,27 @@ class InstallPrompt extends React.PureComponent {
// User cancelled install
}
- this.setState({ installPrompt: null });
+ updateInstallPrompt(null);
+ }, [installPrompt, updateInstallPrompt]);
+
+ useEffect(() => {
+ window.addEventListener('beforeinstallprompt', updateInstallPrompt);
+
+ return () => {
+ window.removeEventListener('beforeinstallprompt', updateInstallPrompt);
+ };
+ });
+
+ if (!installPrompt) {
+ return null;
}
- render() {
- const { installPrompt } = this.state;
+ return
+ Add to Home Screen
+ ;
+};
- if (!installPrompt) {
- return null;
- }
-
- return
- Add to Home Screen
- ;
- }
-}
-
-export { InstallPrompt };
-export default withTranslation()(InstallPrompt);
+export default InstallPrompt;
diff --git a/src/components/InstallPrompt/test.js b/src/components/InstallPrompt/test.js
index ea3edb2..0283703 100644
--- a/src/components/InstallPrompt/test.js
+++ b/src/components/InstallPrompt/test.js
@@ -1,7 +1,7 @@
import React from 'react';
import { render, fireEvent } from 'react-testing-library';
-import { InstallPrompt } from 'components/InstallPrompt';
+import InstallPrompt from 'components/InstallPrompt';
describe('InstallPrompt', () => {
test('rendering', () => {
@@ -39,48 +39,4 @@ describe('InstallPrompt', () => {
'beforeinstallprompt',
expect.any(Function));
});
-
- test('accepting install prompt', async () => {
- const { asFragment, getByTestId } = render(
-
- );
- const promptEvent = new Event('beforeinstallprompt');
- promptEvent.prompt = jest.fn();
- promptEvent.userChoice = Promise.resolve();
- const clickEvent = new MouseEvent('click', { bubbles: true });
- jest.spyOn(clickEvent, 'preventDefault');
-
- fireEvent(window, promptEvent);
- expect(asFragment()).toMatchSnapshot();
- fireEvent(getByTestId('install'), clickEvent);
-
- // Allow async code to run
- await new Promise(resolve => setTimeout(resolve));
-
- expect(clickEvent.preventDefault).toHaveBeenCalled();
- expect(promptEvent.prompt).toHaveBeenCalled();
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('rejecting install prompt', async () => {
- const { asFragment, getByTestId } = render(
-
- );
- const promptEvent = new Event('beforeinstallprompt');
- promptEvent.prompt = jest.fn();
- promptEvent.userChoice = Promise.reject();
- const clickEvent = new MouseEvent('click', { bubbles: true });
- jest.spyOn(clickEvent, 'preventDefault');
-
- fireEvent(window, promptEvent);
- expect(asFragment()).toMatchSnapshot();
- fireEvent(getByTestId('install'), clickEvent);
-
- // Allow async code to run
- await new Promise(resolve => setTimeout(resolve));
-
- expect(clickEvent.preventDefault).toHaveBeenCalled();
- expect(promptEvent.prompt).toHaveBeenCalled();
- expect(asFragment()).toMatchSnapshot();
- });
});