diff --git a/imports/ui/components/Reconnect/Reconnect.js b/imports/ui/components/Reconnect/Reconnect.js index b2e8aac..d42a727 100644 --- a/imports/ui/components/Reconnect/Reconnect.js +++ b/imports/ui/components/Reconnect/Reconnect.js @@ -1,38 +1,49 @@ -/* eslint-disable react/jsx-indent-props */ -/* eslint-disable import/no-absolute-path */ - -import React from 'react'; +/* eslint-disable jsx-a11y/anchor-is-valid */ +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; +import { Meteor } from 'meteor/meteor'; +import { useTracker } from 'meteor/react-meteor-data'; import { withTranslation } from 'react-i18next'; -/* import { Meteor } from 'meteor/meteor'; -import { Tracker } from 'meteor/tracker'; */ -import Blaze from 'meteor/gadicc:blaze-react-component'; -const Reconnect = ({ t, authenticated }) => ( -
- { true && /* !authenticated && */ - } -
-); +// Native-React reconnection banner. Replaces the Blaze `meteorStatus` template +// (rendered through gadicc:blaze-react-component, which used the deprecated +// findDOMNode). Behaviour mirrors 255kb:meteor-status; its CSS (.meteor-status) +// is still provided by that package. +const Reconnect = ({ t }) => { + const status = useTracker(() => Meteor.status(), []); + const [nextRetry, setNextRetry] = useState(0); + + useEffect(() => { + if (status.status !== 'waiting') return undefined; + const tick = () => setNextRetry(Math.round((status.retryTime - Date.now()) / 1000)); + tick(); + const id = Meteor.setInterval(tick, 1000); + return () => Meteor.clearInterval(id); + }, [status.status, status.retryTime]); + + const show = !status.connected && status.status !== 'offline' && status.retryCount > 2; + if (!show) return
; + + const connecting = status.status === 'connecting' || nextRetry === 0; + const message = connecting + ? t('Desconectado del servidor, reconectando...') + : t('Desconectado del servidor, reconectando en %delay% segundos.').replace('%delay%', nextRetry); + + const onRetry = (e) => { + e.preventDefault(); + if (status.status !== 'connecting') Meteor.reconnect(); + }; + + return ( +
+ {message} + {!connecting && {t('Reintentar ahora')}} +
+ ); +}; Reconnect.propTypes = { - t: PropTypes.func.isRequired, - authenticated: PropTypes.bool.isRequired + t: PropTypes.func.isRequired }; export default withTranslation()(Reconnect); - -/* -if (!Meteor.isProduction) { - // We clear the console on disconnect during development - Tracker.autorun(() => { - if (Meteor.status().status === 'waiting') { - console.clear(); - } - }); -} */ diff --git a/imports/ui/layouts/App/App.js b/imports/ui/layouts/App/App.js index e9d21af..ee8294d 100644 --- a/imports/ui/layouts/App/App.js +++ b/imports/ui/layouts/App/App.js @@ -9,8 +9,6 @@ import { I18nextProvider } from 'react-i18next'; import { Helmet } from 'react-helmet-async'; import { Meteor } from 'meteor/meteor'; import { withTracker } from 'meteor/react-meteor-data'; -// https://github.com/gadicc/meteor-blaze-react-component/ -import Blaze from 'meteor/gadicc:blaze-react-component'; // i18n import i18n, { i18nReady } from '/imports/startup/client/i18n'; import '/imports/startup/client/meta';