From d3a4c2a6f30501092c50f5cbefd275069f3d90dd Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 27 Feb 2019 17:48:06 +0100 Subject: [PATCH 1/3] Add new state to overlay blocker --- .../admin/src/translations/en.json | 2 + .../admin/src/translations/fr.json | 2 + .../src/components/OverlayBlocker/index.js | 58 +++++++++++++++++-- .../src/components/OverlayBlocker/styles.scss | 3 + 4 files changed, 59 insertions(+), 6 deletions(-) diff --git a/packages/strapi-admin/admin/src/translations/en.json b/packages/strapi-admin/admin/src/translations/en.json index 67dacc1e6c..859567ebc3 100644 --- a/packages/strapi-admin/admin/src/translations/en.json +++ b/packages/strapi-admin/admin/src/translations/en.json @@ -119,7 +119,9 @@ "components.Input.error.validation.required": "This value is required.", "components.ListRow.empty": "There is no data to be shown.", "components.OverlayBlocker.description": "You're using a feature that needs the server to restart. Please wait until the server is up.", + "components.OverlayBlocker.description.serverError": "The server should have restarted, please check your logs in the terminal.", "components.OverlayBlocker.title": "Waiting for restart...", + "components.OverlayBlocker.title.serverError": "The restart takes longer than expected", "components.PageFooter.select": "entries per page", "components.ProductionBlocker.description": "For safety purposes we have to disable this plugin in other environments.", "components.ProductionBlocker.header": "This plugin is only available in development.", diff --git a/packages/strapi-admin/admin/src/translations/fr.json b/packages/strapi-admin/admin/src/translations/fr.json index ca05153c06..374634458b 100644 --- a/packages/strapi-admin/admin/src/translations/fr.json +++ b/packages/strapi-admin/admin/src/translations/fr.json @@ -120,7 +120,9 @@ "components.Input.error.validation.required": "Ce champ est obligatoire.", "components.ListRow.empty": "Il n'y a pas de données à afficher.", "components.OverlayBlocker.description": "Vous utilisez une fonctionnalité qui nécessite le redémarrage du server. Merci d'attendre que celui-ci ait redémarré.", + "components.OverlayBlocker.description.serverError": "Le serveur aurait déjà du redémarrer, vous devriez regarder les messages dans le terminal.", "components.OverlayBlocker.title": "Le serveur est en train de redémarrer", + "components.OverlayBlocker.title.serverError": "Le serveur aurait déjà du redémarrer", "components.PageFooter.select": "entrées par page", "components.ProductionBlocker.description": "Pour des raisons de sécurité il est désactivé dans les autres environnements.", "components.ProductionBlocker.header": "Ce plugin est disponible uniquement en développement.", diff --git a/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js b/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js index 36623534aa..ff7a240760 100644 --- a/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js @@ -12,27 +12,71 @@ import cn from 'classnames'; import styles from './styles.scss'; +const DELAY = 1000; + class OverlayBlocker extends React.Component { constructor(props) { super(props); + this.state = { elapsed: 0, start: 0 }; this.overlayContainer = document.createElement('div'); document.body.appendChild(this.overlayContainer); } + componentDidUpdate(prevProps) { + const { isOpen } = this.props; + + if (prevProps.isOpen !== this.props.isOpen && isOpen) { + this.startTimer(); + } + + if (prevProps.isOpen !== isOpen && !isOpen) { + this.stopTimer(); + } + } + componentWillUnmount() { document.body.removeChild(this.overlayContainer); } + tick = () => { + const { elapsed } = this.state; + + if (elapsed > 30) { + clearInterval(this.timer); + + return; + } + + this.setState(prevState => ({ elapsed: (Math.round(Date.now() - prevState.start) / 1000) })); + } + + startTimer = () => { + this.setState({ start: Date.now() }); + this.timer = setInterval(this.tick, DELAY); + } + + stopTimer = () => { + this.setState({ elapsed: 0 }); + clearInterval(this.timer); + } + render() { - const { title, description, icon } = this.props; + let { title, description, icon } = this.props; + const { elapsed } = this.state; + + if (elapsed > 30) { + title = 'components.OverlayBlocker.title.serverError'; + description = 'components.OverlayBlocker.description.serverError'; + icon = 'fa fa-clock-o'; + } const content = this.props.children ? ( this.props.children ) : (
-
+
@@ -42,9 +86,11 @@ class OverlayBlocker extends React.Component {

- + { elapsed < 30 && ( + + )}
); @@ -65,7 +111,7 @@ class OverlayBlocker extends React.Component { } OverlayBlocker.defaultProps = { - children: '', + children: null, description: 'components.OverlayBlocker.description', icon: 'fa fa-refresh', isOpen: false, diff --git a/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/styles.scss b/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/styles.scss index e365f100cf..5cbda16d99 100644 --- a/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/styles.scss +++ b/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/styles.scss @@ -23,6 +23,9 @@ color: #323740; margin-right: 20px; line-height: 9.3rem; +} + +.spin { > i { -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; From 2448bc63fe207d8a0fa5dee2cbc58c74998f37cc Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 27 Feb 2019 17:51:41 +0100 Subject: [PATCH 2/3] Fix button delay --- .../lib/src/components/OverlayBlocker/index.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js b/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js index ff7a240760..bf303acf4f 100644 --- a/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js @@ -66,10 +66,17 @@ class OverlayBlocker extends React.Component { let { title, description, icon } = this.props; const { elapsed } = this.state; + let button = ( +
+ Read the documentation +
+ ); + if (elapsed > 30) { - title = 'components.OverlayBlocker.title.serverError'; - description = 'components.OverlayBlocker.description.serverError'; + button = null; icon = 'fa fa-clock-o'; + description = 'components.OverlayBlocker.description.serverError'; + title = 'components.OverlayBlocker.title.serverError'; } const content = this.props.children ? ( @@ -86,11 +93,7 @@ class OverlayBlocker extends React.Component {

- { elapsed < 30 && ( -
- Read the documentation -
- )} + {button}
); From 8d01b9380ce6d1bef7d4ddf2a004a5fc67b68a2d Mon Sep 17 00:00:00 2001 From: Jim LAURIE Date: Thu, 7 Mar 2019 15:10:09 +0100 Subject: [PATCH 3/3] Update 30s to 15s --- .../lib/src/components/OverlayBlocker/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js b/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js index bf303acf4f..913ebbc47b 100644 --- a/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js @@ -43,7 +43,7 @@ class OverlayBlocker extends React.Component { tick = () => { const { elapsed } = this.state; - if (elapsed > 30) { + if (elapsed > 15) { clearInterval(this.timer); return; @@ -72,7 +72,7 @@ class OverlayBlocker extends React.Component { ); - if (elapsed > 30) { + if (elapsed > 15) { button = null; icon = 'fa fa-clock-o'; description = 'components.OverlayBlocker.description.serverError'; @@ -83,7 +83,7 @@ class OverlayBlocker extends React.Component { this.props.children ) : (
-
+