refactor: Reconnect banner Blaze -> native React (drops findDOMNode)

Reconnect rendered the Blaze meteorStatus template via
gadicc:blaze-react-component, whose bridge uses the deprecated findDOMNode
(warned on every page since it's always mounted). Reimplemented natively
with useTracker(Meteor.status) + a countdown effect, same behaviour and
reusing 255kb:meteor-status's .meteor-status CSS. Also dropped the dead
Blaze import from App.js.

Remaining findDOMNode warnings are third-party only: react-progress-bar.js
(LoadingBar) and Status.js's Blaze serverFacts (/status admin page).
Browser-verified home renders, no banner while connected, no new errors.
REST smoke byte-identical.

imports/ui/components/Reconnect/Reconnect.js

@@ -1,38 +1,49 @@
-/* eslint-disable react/jsx-indent-props */
+/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable import/no-absolute-path */
+import React, { useState, useEffect } from 'react';
-
-import React 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 }) => (
+// Native-React reconnection banner. Replaces the Blaze `meteorStatus` template
-  <div>
+// (rendered through gadicc:blaze-react-component, which used the deprecated
-    { true && /* !authenticated && */
+// findDOMNode). Behaviour mirrors 255kb:meteor-status; its CSS (.meteor-status)
-      <Blaze
+// is still provided by that package.
-          template="meteorStatus"
+const Reconnect = ({ t }) => {
-          textDisconnect={t('Desconectado del servidor, reconectando en %delay% segundos.')}
+  const status = useTracker(() => Meteor.status(), []);
-          textConnecting={t('Desconectado del servidor, reconectando...')}
+  const [nextRetry, setNextRetry] = useState(0);
-          linkText={t('Reintentar ahora')}
+
-      /> }
+  useEffect(() => {
-  </div>
+    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 <div />;
+
+  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 (
+    <div className="meteor-status meteor-status-overlay">
+      {message}
+      {!connecting && <span> <a href="#" className="meteor-status-retry" onClick={onRetry}>{t('Reintentar ahora')}</a></span>}
+    </div>
+  );
+};
 
 Reconnect.propTypes = {
-  t: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
-  authenticated: PropTypes.bool.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();
-    }
-  });
-} */

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';