Initial commit

client/src/components/UsersModal/UsersModal.jsx

@@ -0,0 +1,83 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import {
+  Button, Header, Modal, Table,
+} from 'semantic-ui-react';
+
+import AddUserPopupContainer from '../../containers/AddUserPopupContainer';
+import Item from './Item';
+
+import styles from './UsersModal.module.css';
+
+const UsersModal = React.memo(({
+  items, onUpdate, onDelete, onClose,
+}) => {
+  const [t] = useTranslation();
+
+  const handleUpdate = useCallback(
+    (id, data) => {
+      onUpdate(id, data);
+    },
+    [onUpdate],
+  );
+
+  const handleDelete = useCallback(
+    (id) => {
+      onDelete(id);
+    },
+    [onDelete],
+  );
+
+  return (
+    <Modal open closeIcon size="large" onClose={onClose}>
+      <Modal.Content>
+        <Header size="huge" className={styles.title}>
+          {t('common.users', {
+            context: 'title',
+          })}
+        </Header>
+        <Table basic="very">
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>{t('common.name')}</Table.HeaderCell>
+              <Table.HeaderCell>{t('common.email')}</Table.HeaderCell>
+              <Table.HeaderCell>{t('common.administrator')}</Table.HeaderCell>
+              <Table.HeaderCell />
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {items.map((item) => (
+              <Item
+                key={item.id}
+                name={item.name}
+                email={item.email}
+                isAdmin={item.isAdmin}
+                onUpdate={(data) => handleUpdate(item.id, data)}
+                onDelete={() => handleDelete(item.id)}
+              />
+            ))}
+          </Table.Body>
+          <Table.Footer>
+            <Table.Row>
+              <Table.HeaderCell colSpan="4">
+                <AddUserPopupContainer>
+                  <Button positive content={t('action.addUser')} className={styles.button} />
+                </AddUserPopupContainer>
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Footer>
+        </Table>
+      </Modal.Content>
+    </Modal>
+  );
+});
+
+UsersModal.propTypes = {
+  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  onUpdate: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default UsersModal;