Initial commit

client/src/components/Projects/Projects.jsx

@@ -0,0 +1,83 @@
+import isUndefined from 'lodash/isUndefined';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { Container, Grid } from 'semantic-ui-react';
+
+import Paths from '../../constants/Paths';
+import ProjectWrapperContainer from '../../containers/ProjectWrapperContainer';
+import { ReactComponent as PlusIcon } from '../../assets/images/plus-icon.svg';
+
+import styles from './Projects.module.css';
+
+const Projects = React.memo(({
+  items, currentId, isEditable, onAdd,
+}) => {
+  const [t] = useTranslation();
+
+  if (isUndefined(currentId)) {
+    return (
+      <Container className={styles.cardsWrapper}>
+        <Grid className={styles.gridFix}>
+          <Grid.Row>
+            {items.map((item) => (
+              <Grid.Column key={item.id} width={4}>
+                <Link
+                  to={
+                    item.firstBoardId
+                      ? Paths.BOARDS.replace(':id', item.firstBoardId)
+                      : Paths.PROJECTS.replace(':id', item.id)
+                  }
+                >
+                  <div className={classNames(styles.card, styles.open)}>
+                    <div className={styles.cardOverlay} />
+                    <div className={styles.openTitle}>{item.name}</div>
+                  </div>
+                </Link>
+              </Grid.Column>
+            ))}
+            {isEditable && (
+              <Grid.Column width={4}>
+                <button
+                  type="button"
+                  className={classNames(styles.card, styles.add)}
+                  onClick={onAdd}
+                >
+                  <div className={styles.addTitleWrapper}>
+                    <div className={styles.addTitle}>
+                      <PlusIcon className={styles.addGridIcon} />
+                      {t('action.createProject')}
+                    </div>
+                  </div>
+                </button>
+              </Grid.Column>
+            )}
+          </Grid.Row>
+        </Grid>
+      </Container>
+    );
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.project}>
+        <ProjectWrapperContainer />
+      </div>
+    </div>
+  );
+});
+
+Projects.propTypes = {
+  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  currentId: PropTypes.number,
+  isEditable: PropTypes.bool.isRequired,
+  onAdd: PropTypes.func.isRequired,
+};
+
+Projects.defaultProps = {
+  currentId: undefined,
+};
+
+export default Projects;