Make columns itself scrollable, fix action creation when moving card, little refactoring

client/src/components/StaticWrapper/StaticWrapper.jsx

@@ -0,0 +1,106 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useTranslation, Trans } from 'react-i18next';
+import { Icon } from 'semantic-ui-react';
+
+import ProjectsContainer from '../../containers/ProjectsContainer';
+import BoardWrapperContainer from '../../containers/BoardWrapperContainer';
+
+import styles from './StaticWrapper.module.css';
+
+const StaticWrapper = ({ cardId, boardId, projectId }) => {
+  const [t] = useTranslation();
+
+  useEffect(() => {
+    document.body.style.overflowX = 'auto'; // TODO: only for board
+  }, []);
+
+  if (projectId === undefined) {
+    return (
+      <div className={styles.root}>
+        <ProjectsContainer />
+      </div>
+    );
+  }
+
+  if (cardId === null) {
+    return (
+      <div className={classNames(styles.root, styles.flex)}>
+        <div className={styles.message}>
+          <h1>
+            {t('common.cardNotFound', {
+              context: 'title',
+            })}
+          </h1>
+        </div>
+      </div>
+    );
+  }
+
+  if (boardId === null) {
+    return (
+      <div className={classNames(styles.root, styles.flex)}>
+        <div className={styles.message}>
+          <h1>
+            {t('common.boardNotFound', {
+              context: 'title',
+            })}
+          </h1>
+        </div>
+      </div>
+    );
+  }
+
+  if (projectId === null) {
+    return (
+      <div className={classNames(styles.root, styles.flex)}>
+        <div className={styles.message}>
+          <h1>
+            {t('common.projectNotFound', {
+              context: 'title',
+            })}
+          </h1>
+        </div>
+      </div>
+    );
+  }
+
+  if (boardId === undefined) {
+    return (
+      <div className={classNames(styles.board, styles.flex)}>
+        <div className={styles.message}>
+          <Icon inverted name="hand point up outline" size="huge" className={styles.messageIcon} />
+          <h1 className={styles.messageTitle}>
+            {t('common.openBoard', {
+              context: 'title',
+            })}
+          </h1>
+          <div className={styles.messageContent}>
+            <Trans i18nKey="common.createNewOneOrSelectExistingOne" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classNames(styles.board, styles.flex)}>
+      <BoardWrapperContainer />
+    </div>
+  );
+};
+
+StaticWrapper.propTypes = {
+  cardId: PropTypes.string,
+  boardId: PropTypes.string,
+  projectId: PropTypes.string,
+};
+
+StaticWrapper.defaultProps = {
+  cardId: undefined,
+  boardId: undefined,
+  projectId: undefined,
+};
+
+export default StaticWrapper;