Initial commit

2019-08-31 04:07:25 +05:00
commit 36fe34e8e1
583 changed files with 91539 additions and 0 deletions
@@ -0,0 +1,101 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import {
+  Comment, Icon, Loader, Visibility,
+} from 'semantic-ui-react';
+
+import { ActionTypes } from '../../../constants/Enums';
+import AddComment from './AddComment';
+import Item from './Item';
+
+import styles from './Actions.module.css';
+
+const Actions = React.memo(
+  ({
+    items,
+    isFetching,
+    isAllFetched,
+    isEditable,
+    onFetch,
+    onCommentCreate,
+    onCommentUpdate,
+    onCommentDelete,
+  }) => {
+    const [t] = useTranslation();
+
+    const handleCommentUpdate = useCallback(
+      (id, data) => {
+        onCommentUpdate(id, data);
+      },
+      [onCommentUpdate],
+    );
+
+    const handleCommentDelete = useCallback(
+      (id) => {
+        onCommentDelete(id);
+      },
+      [onCommentDelete],
+    );
+
+    return (
+      <>
+        <div className={styles.contentModule}>
+          <div className={styles.moduleWrapper}>
+            <Icon name="comment outline" className={styles.moduleIcon} />
+            <div className={styles.moduleHeader}>{t('common.addComment')}</div>
+            <AddComment onCreate={onCommentCreate} />
+          </div>
+        </div>
+        <div className={styles.contentModule}>
+          <div className={styles.moduleWrapper}>
+            <Icon name="list ul" className={styles.moduleIcon} />
+            <div className={styles.moduleHeader}>{t('common.actions')}</div>
+            <div className={styles.wrapper}>
+              <Comment.Group>
+                {items.map((item) => (item.type === ActionTypes.COMMENT_CARD ? (
+                  <Item.Comment
+                    key={item.id}
+                    data={item.data}
+                    createdAt={item.createdAt}
+                    isPersisted={item.isPersisted}
+                    user={item.user}
+                    isEditable={isEditable}
+                    onUpdate={(data) => handleCommentUpdate(item.id, data)}
+                    onDelete={() => handleCommentDelete(item.id)}
+                  />
+                ) : (
+                  <Item
+                    key={item.id}
+                    type={item.type}
+                    data={item.data}
+                    createdAt={item.createdAt}
+                    user={item.user}
+                  />
+                )))}
+              </Comment.Group>
+            </div>
+            {isFetching ? (
+              <Loader active inverted inline="centered" size="small" className={styles.loader} />
+            ) : (
+              !isAllFetched && <Visibility fireOnMount onOnScreen={onFetch} />
+            )}
+          </div>
+        </div>
+      </>
+    );
+  },
+);
+
+Actions.propTypes = {
+  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  isFetching: PropTypes.bool.isRequired,
+  isAllFetched: PropTypes.bool.isRequired,
+  isEditable: PropTypes.bool.isRequired,
+  onFetch: PropTypes.func.isRequired,
+  onCommentCreate: PropTypes.func.isRequired,
+  onCommentUpdate: PropTypes.func.isRequired,
+  onCommentDelete: PropTypes.func.isRequired,
+};
+
+export default Actions;