Initial commit

client/src/components/ProjectMembershipsStep/ProjectMembershipsStep.jsx

@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Menu } from 'semantic-ui-react';
+import { Popup } from '../../lib/custom-ui';
+
+import Item from './Item';
+
+import styles from './ProjectMembershipsStep.module.css';
+
+const ProjectMembershipsStep = React.memo(
+  ({
+    items, currentUserIds, title, onUserSelect, onUserDeselect, onBack,
+  }) => {
+    const [t] = useTranslation();
+
+    const handleUserSelect = useCallback(
+      (id) => {
+        onUserSelect(id);
+      },
+      [onUserSelect],
+    );
+
+    const handleUserDeselect = useCallback(
+      (id) => {
+        onUserDeselect(id);
+      },
+      [onUserDeselect],
+    );
+
+    return (
+      <>
+        <Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
+        <Popup.Content>
+          <Menu secondary vertical className={styles.menu}>
+            {items.map((item) => (
+              <Item
+                key={item.id}
+                isPersisted={item.isPersisted}
+                isActive={currentUserIds.includes(item.user.id)}
+                user={item.user}
+                onUserSelect={() => handleUserSelect(item.user.id)}
+                onUserDeselect={() => handleUserDeselect(item.user.id)}
+              />
+            ))}
+          </Menu>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+ProjectMembershipsStep.propTypes = {
+  /* eslint-disable react/forbid-prop-types */
+  items: PropTypes.array.isRequired,
+  currentUserIds: PropTypes.array.isRequired,
+  /* eslint-enable react/forbid-prop-types */
+  title: PropTypes.string,
+  onUserSelect: PropTypes.func.isRequired,
+  onUserDeselect: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
+};
+
+ProjectMembershipsStep.defaultProps = {
+  title: 'common.members',
+  onBack: undefined,
+};
+
+export default ProjectMembershipsStep;