Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

amam/update too often prompting installation pwa #154

Closed
wants to merge 2 commits into from
Closed

amam/update too often prompting installation pwa #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee02dd2
update pwa prompt
cakasuma Jun 13, 2019
834d563
add cookie handle
cakasuma Jun 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions src/javascript/app/App/Containers/Layout/app-contents.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Cookies from 'js-cookie';
import { withRouter } from 'react-router';
import { Scrollbars } from 'tt-react-custom-scrollbars';
import { connect } from 'Stores/connect';
import routes from 'Constants/routes';
// import InstallPWA from './install-pwa.jsx';
import InstallPWA from './install-pwa.jsx';
import Loading from '../../../../../templates/app/components/loading.jsx';

const AppContents = ({
// addNotificationBar,
addNotificationBar,
children,
is_app_blurred,
is_contract_mode,
Expand All @@ -21,22 +22,21 @@ const AppContents = ({
is_slow_loading,
location,
slow_loading_status,
// setPWAPromptEvent,
setPWAPromptEvent,
}) => {
if (is_logged_in) {
// TODO: uncomment these after the issues with showing the prompt too often and in the app are fixed
// window.addEventListener('beforeinstallprompt', e => {
// console.log('Going to show the installation prompt'); // eslint-disable-line no-console
//
// e.preventDefault();
//
// setPWAPromptEvent(e);
// addNotificationBar({
// content : <InstallPWA />,
// autoShow: 10000, // show after 10 secs
// msg_type: 'pwa',
// });
// });
if (is_logged_in && !Cookies.get('PwaConsent')) {
window.addEventListener('beforeinstallprompt', e => {
console.log('Going to show the installation prompt'); // eslint-disable-line no-console

e.preventDefault();

setPWAPromptEvent(e);
addNotificationBar({
content : <InstallPWA />,
autoShow: 10000, // show after 10 secs
msg_type: 'pwa',
});
});
}

return (
Expand Down Expand Up @@ -82,7 +82,7 @@ AppContents.propTypes = {

export default withRouter(connect(
({ client, modules, ui }) => ({
// addNotificationBar : ui.addNotificationBar,
addNotificationBar : ui.addNotificationBar,
is_app_blurred : ui.is_app_blurred,
is_contract_mode : modules.smart_chart.is_contract_mode,
is_dark_mode : ui.is_dark_mode_on,
Expand All @@ -93,6 +93,6 @@ export default withRouter(connect(
is_slow_loading : ui.is_slow_loading,
pwa_prompt_event : ui.pwa_prompt_event,
slow_loading_status : ui.slow_loading_status,
// setPWAPromptEvent : ui.setPWAPromptEvent,
setPWAPromptEvent : ui.setPWAPromptEvent,
})
)(AppContents));
71 changes: 46 additions & 25 deletions src/javascript/app/App/Containers/Layout/install-pwa.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
import PropTypes from 'prop-types';
import React from 'react';
import Cookies from 'js-cookie';
import { website_name } from 'App/Constants/app-config';
import { connect } from 'Stores/connect';
import { localize } from '_common/localize';
import Button from '../../Components/Form/button.jsx';
import Checkbox from '../../Components/Form/Checkbox';

const InstallPWA = ({
onClose,
pwa_prompt_event,
removePWAPromptEvent,
}) => {
const showPrompt = () => {
class InstallPWA extends React.Component {
state = {
is_ask_checked: false,
}

showPrompt() {
const { pwa_prompt_event, removePWAPromptEvent } = this.props;
if (pwa_prompt_event) {
Cookies.set('PwaConsent', 1);
pwa_prompt_event.prompt();
pwa_prompt_event.userChoice
.then(choice_result => {
Expand All @@ -20,26 +24,43 @@ const InstallPWA = ({
}
});
}
};
}

return (
<React.Fragment>
<p>{localize('Install [_1] app?', website_name)}</p>
<Button
className='btn--secondary btn--secondary--orange btn--link notification-bar__button'
has_effect
text={localize('No')}
onClick={onClose}
/>
<Button
className='btn--primary btn--primary--orange notification-bar__button'
has_effect
text={localize('Yes')}
onClick={showPrompt}
/>
</React.Fragment>
);
};
toggleAsk() {
this.setState((state) => ({
is_ask_checked: !state.is_ask_checked,
}));
}

render() {
return (
<React.Fragment>
<h2>{localize('Install [_1] app?', website_name)}</h2>
<div className='notification-bar__wrapper'>
<Checkbox
value={this.state.is_ask_checked}
label={localize('Never ask again')}
onClick={this.toggleAsk}
/>
<div className='notification-bar__wrapper--button'>
<Button
className='btn--secondary btn--secondary--orange btn--link notification-bar__button'
has_effect
text={localize('No')}
onClick={this.props.onClose}
/>
<Button
className='btn--primary btn--primary--orange notification-bar__button'
has_effect
text={localize('Yes')}
onClick={this.showPrompt}
/>
</div>
</div>
</React.Fragment>
);
}
}

InstallPWA.propTypes = {
onClose : PropTypes.func,
Expand Down