feat: Version 2

Closes #627, closes #1047

client/src/components/common/Static/Static.jsx

@@ -0,0 +1,126 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { useTranslation, Trans } from 'react-i18next';
+import { Icon, Loader } from 'semantic-ui-react';
+import { useTransitioning } from '../../../lib/hooks';
+
+import selectors from '../../../selectors';
+import { BoardViews } from '../../../constants/Enums';
+import Home from '../Home';
+import Board from '../../boards/Board';
+
+import styles from './Static.module.scss';
+
+const Static = React.memo(() => {
+  const { cardId, projectId } = useSelector(selectors.selectPath);
+  const board = useSelector(selectors.selectCurrentBoard);
+  const isFetching = useSelector(selectors.selectIsContentFetching);
+  const isFavoritesActive = useSelector(selectors.selectIsFavoritesActiveForCurrentUser);
+
+  const [t] = useTranslation();
+
+  const wrapperRef = useRef(null);
+
+  const handleTransitionEnd = useTransitioning(wrapperRef, styles.wrapperTransitioning, [
+    isFavoritesActive,
+  ]);
+
+  let wrapperClassNames;
+  let contentNode;
+
+  if (isFetching) {
+    wrapperClassNames = [styles.wrapperLoader];
+    contentNode = <Loader active size="huge" />;
+  } else if (projectId === undefined) {
+    wrapperClassNames = [isFavoritesActive && styles.wrapperWithFavorites, styles.wrapperVertical];
+    contentNode = <Home />;
+  } else if (cardId === null) {
+    wrapperClassNames = [isFavoritesActive && styles.wrapperWithFavorites, styles.wrapperFlex];
+
+    contentNode = (
+      <div className={styles.message}>
+        <h1>
+          {t('common.cardNotFound', {
+            context: 'title',
+          })}
+        </h1>
+      </div>
+    );
+  } else if (board === null) {
+    wrapperClassNames = [isFavoritesActive && styles.wrapperWithFavorites, styles.wrapperFlex];
+
+    contentNode = (
+      <div className={styles.message}>
+        <h1>
+          {t('common.boardNotFound', {
+            context: 'title',
+          })}
+        </h1>
+      </div>
+    );
+  } else if (projectId === null) {
+    wrapperClassNames = [isFavoritesActive && styles.wrapperWithFavorites, styles.wrapperFlex];
+
+    contentNode = (
+      <div className={styles.message}>
+        <h1>
+          {t('common.projectNotFound', {
+            context: 'title',
+          })}
+        </h1>
+      </div>
+    );
+  } else if (board === undefined) {
+    wrapperClassNames = [
+      isFavoritesActive ? styles.wrapperProjectWithFavorites : styles.wrapperProject,
+      styles.wrapperFlex,
+    ];
+
+    contentNode = (
+      <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>
+    );
+  } else if (board.isFetching) {
+    wrapperClassNames = [
+      styles.wrapperLoader,
+      isFavoritesActive ? styles.wrapperProjectWithFavorites : styles.wrapperProject,
+    ];
+
+    contentNode = <Loader active size="big" />;
+  } else {
+    wrapperClassNames = [
+      isFavoritesActive ? styles.wrapperBoardWithFavorites : styles.wrapperBoard,
+      [BoardViews.GRID, BoardViews.LIST].includes(board.view) && styles.wrapperVertical,
+      styles.wrapperFlex,
+    ];
+
+    contentNode = <Board />;
+  }
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={classNames(styles.wrapper, ...wrapperClassNames)}
+      onTransitionEnd={handleTransitionEnd}
+    >
+      {contentNode}
+    </div>
+  );
+});
+
+export default Static;