Initial commit

client/src/components/CardModal/Tasks/Tasks.jsx

@@ -0,0 +1,72 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Progress } from 'semantic-ui-react';
+
+import Item from './Item';
+import Add from './Add';
+
+import styles from './Tasks.module.css';
+
+const Tasks = React.memo(({
+  items, onCreate, onUpdate, onDelete,
+}) => {
+  const [t] = useTranslation();
+
+  const handleUpdate = useCallback(
+    (id, data) => {
+      onUpdate(id, data);
+    },
+    [onUpdate],
+  );
+
+  const handleDelete = useCallback(
+    (id) => {
+      onDelete(id);
+    },
+    [onDelete],
+  );
+
+  const completedItems = items.filter((item) => item.isCompleted);
+
+  return (
+    <>
+      {items.length > 0 && (
+        <Progress
+          autoSuccess
+          value={completedItems.length}
+          total={items.length}
+          color="blue"
+          size="tiny"
+          className={styles.progress}
+        />
+      )}
+      {items.map((item) => (
+        <Item
+          key={item.id}
+          name={item.name}
+          isCompleted={item.isCompleted}
+          isPersisted={item.isPersisted}
+          onUpdate={(data) => handleUpdate(item.id, data)}
+          onDelete={() => handleDelete(item.id)}
+        />
+      ))}
+      <Add onCreate={onCreate}>
+        <button type="button" className={styles.taskButton}>
+          <span className={styles.taskButtonText}>
+            {items.length > 0 ? t('action.addAnotherTask') : t('action.addTask')}
+          </span>
+        </button>
+      </Add>
+    </>
+  );
+});
+
+Tasks.propTypes = {
+  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  onCreate: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
+export default Tasks;