vjrj
258723ea72
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.
49 lines
1.8 KiB
JavaScript
49 lines
1.8 KiB
JavaScript
/* 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';
|
|
|
|
// 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 <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
|
|
};
|
|
|
|
export default withTranslation()(Reconnect);
|