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;

client/src/components/SocketStatus/SocketStatus.module.css

@@ -0,0 +1,35 @@
+.button {
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  text-decoration: underline;
+}
+
+.content {
+  color: #fff;
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+.header {
+  color: #fff;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1.2;
+  margin-bottom: 8px;
+}
+
+.wrapper {
+  background: #eb5a46;
+  border-radius: 4px;
+  bottom: 20px;
+  box-shadow: #b04632 0 1px 0;
+  padding: 12px 18px;
+  position: absolute;
+  right: 20px;
+  width: 390px;
+  z-index: 10001;
+}

client/src/components/SocketStatus/index.js

@@ -0,0 +1,3 @@
+import SocketStatus from './SocketStatus';
+
+export default SocketStatus;