Project managers, board members, auto-update after reconnection, refactoring

client/src/components/CoreWrapper/CoreWrapper.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation, Trans } from 'react-i18next';
+import { Loader } from 'semantic-ui-react';
+
+import CoreContainer from '../../containers/CoreContainer';
+
+import styles from './CoreWrapper.module.scss';
+
+const CoreWrapper = React.memo(({ isInitializing, isSocketDisconnected }) => {
+  const [t] = useTranslation();
+
+  return (
+    <>
+      {isInitializing ? <Loader active size="massive" /> : <CoreContainer />}
+      {isSocketDisconnected && (
+        <div className={styles.message}>
+          <div className={styles.messageHeader}>{t('common.noConnectionToServer')}</div>
+          <div className={styles.messageContent}>
+            <Trans i18nKey="common.allChangesWillBeAutomaticallySavedAfterConnectionRestored">
+              All changes will be automatically saved
+              <br />
+              after connection restored
+            </Trans>
+          </div>
+        </div>
+      )}
+    </>
+  );
+});
+
+CoreWrapper.propTypes = {
+  isInitializing: PropTypes.bool.isRequired,
+  isSocketDisconnected: PropTypes.bool.isRequired,
+};
+
+export default CoreWrapper;

client/src/components/CoreWrapper/CoreWrapper.module.scss

@@ -0,0 +1,27 @@
+:global(#app) {
+  .message {
+    background: #eb5a46;
+    border-radius: 4px;
+    bottom: 20px;
+    box-shadow: #b04632 0 1px 0;
+    padding: 12px 18px;
+    position: fixed;
+    right: 20px;
+    width: 390px;
+    z-index: 10001;
+  }
+
+  .messageContent {
+    color: #fff;
+    font-size: 16px;
+    line-height: 1.4;
+  }
+
+  .messageHeader {
+    color: #fff;
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 1.2;
+    margin-bottom: 8px;
+  }
+}

client/src/components/CoreWrapper/index.js

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