From 18427f9fc674f9bb9d30aad3c7cd264a9da23a16 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Tue, 26 Mar 2019 21:12:35 -0400 Subject: [PATCH] Updating InstallPrompt to use hooks --- .../Header/__snapshots__/test.js.snap | 14 ++-- .../InstallPrompt/__snapshots__/test.js.snap | 36 ---------- src/components/InstallPrompt/index.js | 67 +++++++------------ src/components/InstallPrompt/test.js | 46 +------------ 4 files changed, 34 insertions(+), 129 deletions(-) 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(); - }); });