From bbdc5a3b12279fe8bc86a30006d750c3cf6f9ef1 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Tue, 15 Jan 2019 21:19:28 -0500 Subject: [PATCH] Reverting PWA install prompt This protocol changed from when the old React implementation was built and it doesn't work from a user-experience perspective now --- .../InstallPrompt/__snapshots__/test.js.snap | 28 ----- src/components/InstallPrompt/index.js | 21 ---- src/components/InstallPrompt/style.module.css | 38 ------- src/components/InstallPrompt/test.js | 13 --- src/pages/__snapshots__/index.test.js.snap | 88 --------------- src/pages/index.js | 102 +++++------------- src/pages/index.test.js | 71 +----------- 7 files changed, 29 insertions(+), 332 deletions(-) delete mode 100644 src/components/InstallPrompt/__snapshots__/test.js.snap delete mode 100644 src/components/InstallPrompt/index.js delete mode 100644 src/components/InstallPrompt/style.module.css delete mode 100644 src/components/InstallPrompt/test.js diff --git a/src/components/InstallPrompt/__snapshots__/test.js.snap b/src/components/InstallPrompt/__snapshots__/test.js.snap deleted file mode 100644 index 9fa9b76..0000000 --- a/src/components/InstallPrompt/__snapshots__/test.js.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`InstallPrompt rendering 1`] = ` -
-

- Add Regexper to your home screen? -

-
- - -
-
-`; diff --git a/src/components/InstallPrompt/index.js b/src/components/InstallPrompt/index.js deleted file mode 100644 index afd4f8b..0000000 --- a/src/components/InstallPrompt/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import style from './style.module.css'; - -const InstallPrompt = ({ onAccept, onReject }) => ( -
-

Add Regexper to your home screen?

-
- - -
-
-); - -InstallPrompt.propTypes = { - onAccept: PropTypes.func.isRequired, - onReject: PropTypes.func.isRequired -}; - -export default InstallPrompt; diff --git a/src/components/InstallPrompt/style.module.css b/src/components/InstallPrompt/style.module.css deleted file mode 100644 index 072c370..0000000 --- a/src/components/InstallPrompt/style.module.css +++ /dev/null @@ -1,38 +0,0 @@ -@import url('../../globals.module.css'); - -.install { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background: var(--color-tan); - color: var(--color-black); -} - -.cta { - margin: 0; - padding: var(--spacing-margin); - text-align: center; -} - -.actions { - display: flex; - flex-wrap: nowrap; - justify-content: space-evenly; - padding: var(--spacing-margin); - - & button { - font-size: inherit; - line-height: 2.8rem; - border: 0 none; - background: var(--control-gradient); - color: var(--color-black); - cursor: pointer; - padding: 0; - width: 40vw; - - &.primary { - font-weight: bold; - } - } -} diff --git a/src/components/InstallPrompt/test.js b/src/components/InstallPrompt/test.js deleted file mode 100644 index f3a0d12..0000000 --- a/src/components/InstallPrompt/test.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; - -import InstallPrompt from 'components/InstallPrompt'; - -describe('InstallPrompt', () => { - test('rendering', () => { - const component = shallow( - - ); - expect(component).toMatchSnapshot(); - }); -}); diff --git a/src/pages/__snapshots__/index.test.js.snap b/src/pages/__snapshots__/index.test.js.snap index dd7b1c0..3a71349 100644 --- a/src/pages/__snapshots__/index.test.js.snap +++ b/src/pages/__snapshots__/index.test.js.snap @@ -42,94 +42,6 @@ exports[`Index Page rendering 1`] = ` `; -exports[`Index Page rendering after an install prompt has been requested 1`] = ` - - - - - -`; - -exports[`Index Page rendering after an install prompt has been requested 2`] = ` - - - - - - -`; - exports[`Index Page rendering with an expression on the URL 1`] = ` diff --git a/src/pages/index.js b/src/pages/index.js index cb72eee..a9c36e2 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,7 +6,6 @@ import URLSearchParams from '@ungap/url-search-params'; import Metadata from 'components/Metadata'; import Message from 'components/Message'; import App from 'components/App'; -import InstallPrompt from 'components/InstallPrompt'; export const query = graphql` query IndexPageQuery { @@ -40,81 +39,36 @@ const readURLHash = (location, defaultSyntax) => { } }; -class IndexPage extends React.PureComponent { - state={ - installPrompt: null - } +export const IndexPage = ({ + location, + data: { site: { siteMetadata } } +}) => <> + + + +; - static propTypes = { - location: PropTypes.object, - data: PropTypes.shape({ - site: PropTypes.shape({ - siteMetadata: PropTypes.shape({ - defaultSyntax: PropTypes.string, - syntaxList: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string, - label: PropTypes.string - })) - }) +IndexPage.propTypes = { + location: PropTypes.object, + data: PropTypes.shape({ + site: PropTypes.shape({ + siteMetadata: PropTypes.shape({ + defaultSyntax: PropTypes.string, + syntaxList: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string, + label: PropTypes.string + })) }) }) - } - - componentDidMount() { - window.addEventListener('beforeinstallprompt', this.handleInstallPrompt); - } - - componentWillUnmount() { - window.removeEventListener('beforeinstallprompt', this.handleInstallPrompt); - } - - handleInstallPrompt = event => { - event.preventDefault(); - - this.setState({ - installPrompt: event - }); - } - - handleInstallReject = () => { - this.setState({ installPrompt: null }); - } - - handleInstallAccept = () => { - const { installPrompt } = this.state; - - this.setState({ installPrompt: null }); - installPrompt.prompt(); - } - - render() { - const { - installPrompt - } = this.state; - const { - location, - data: { site: { siteMetadata } } - } = this.props; - - return <> - - - - { installPrompt && } - ; - } -} + }) +}; export default IndexPage; diff --git a/src/pages/index.test.js b/src/pages/index.test.js index 473e72a..e2f6f9f 100644 --- a/src/pages/index.test.js +++ b/src/pages/index.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import IndexPage from 'pages/index'; +import { IndexPage } from 'pages/index'; const queryResult = { site: { @@ -32,73 +32,4 @@ describe('Index Page', () => { ); expect(component).toMatchSnapshot(); }); - - test('rendering after an install prompt has been requested', () => { - const component = shallow( - - ); - expect(component).toMatchSnapshot(); - - component.instance().handleInstallPrompt({ - preventDefault: jest.fn(), - prompt: jest.fn() - }); - - expect(component).toMatchSnapshot(); - }); - - test('removing event listener on umount', () => { - jest.spyOn(window, 'addEventListener'); - jest.spyOn(window, 'removeEventListener'); - - const component = shallow( - - ); - - expect(window.addEventListener).toHaveBeenCalledWith( - 'beforeinstallprompt', - expect.any(Function)); - - component.unmount(); - - expect(window.removeEventListener).toHaveBeenCalledWith( - 'beforeinstallprompt', - expect.any(Function)); - }); - - test('rejecting install prompt', () => { - const component = shallow( - - ); - const instance = component.instance(); - const installEvent = { - preventDefault: jest.fn(), - prompt: jest.fn() - }; - - instance.handleInstallPrompt(installEvent); - - instance.handleInstallReject(); - - expect(installEvent.prompt).not.toHaveBeenCalled(); - expect(component.state('installPrompt')).toEqual(null); - }); - - test('accepting install prompt', () => { - const component = shallow( - - ); - const instance = component.instance(); - const installEvent = { - preventDefault: jest.fn(), - prompt: jest.fn() - }; - - instance.handleInstallPrompt(installEvent); - - instance.handleInstallAccept(); - - expect(installEvent.prompt).toHaveBeenCalled(); - expect(component.state('installPrompt')).toEqual(null); - }); });