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 (
+
+ );
+};
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';