Initial commit

client/src/components/SocketStatus/SocketStatus.jsx

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation, Trans } from 'react-i18next';
+
+import styles from './SocketStatus.module.css';
+
+const SocketStatus = React.memo(({ isDisconnected, isReconnected }) => {
+  const [t] = useTranslation();
+
+  const handleReloadClick = useCallback(() => {
+    window.location.reload(true);
+  }, []);
+
+  if (isDisconnected) {
+    return (
+      <div className={styles.wrapper}>
+        <div className={styles.header}>{t('common.noConnectionToServer')}</div>
+        <div className={styles.content}>
+          <Trans i18nKey="common.allChangesWillBeAutomaticallySavedAfterConnectionRestored">
+            All changes will be automatically saved
+            <br />
+            after connection restored
+          </Trans>
+        </div>
+      </div>
+    );
+  }
+
+  if (isReconnected) {
+    return (
+      <div className={styles.wrapper}>
+        <div className={styles.header}>
+          {t('common.connectionRestored', {
+            context: 'title',
+          })}
+        </div>
+        <div className={styles.content}>
+          <Trans i18nKey="common.refreshPageToLoadLastDataAndReceiveUpdates">
+            <button type="button" className={styles.button} onClick={handleReloadClick}>
+              Refresh the page
+            </button>
+            to load last data
+            <br />
+            and receive updates
+          </Trans>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+});
+
+SocketStatus.propTypes = {
+  isDisconnected: PropTypes.bool.isRequired,
+  isReconnected: PropTypes.bool.isRequired,
+};
+
+export default SocketStatus;