feat: Version 2

Closes #627, closes #1047

client/src/components/comments/Comments/Add.jsx

@@ -0,0 +1,132 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import TextareaAutosize from 'react-textarea-autosize';
+import { Button, Form, TextArea } from 'semantic-ui-react';
+import { useClickAwayListener, useDidUpdate, useToggle } from '../../../lib/hooks';
+
+import entryActions from '../../../entry-actions';
+import { useEscapeInterceptor, useForm, useNestedRef } from '../../../hooks';
+import { isModifierKeyPressed } from '../../../utils/event-helpers';
+
+import styles from './Add.module.scss';
+
+const DEFAULT_DATA = {
+  text: '',
+};
+
+const Add = React.memo(() => {
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+  const [isOpened, setIsOpened] = useState(false);
+  const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
+  const [selectTextFieldState, selectTextField] = useToggle();
+
+  const [textFieldRef, handleTextFieldRef] = useNestedRef();
+  const [buttonRef, handleButtonRef] = useNestedRef();
+
+  const submit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      text: data.text.trim(),
+    };
+
+    if (!cleanData.text) {
+      textFieldRef.current.select();
+      return;
+    }
+
+    dispatch(entryActions.createCommentInCurrentCard(cleanData));
+    setData(DEFAULT_DATA);
+    selectTextField();
+  }, [dispatch, data, setData, selectTextField, textFieldRef]);
+
+  const handleEscape = useCallback(() => {
+    setIsOpened(false);
+    textFieldRef.current.blur();
+  }, [textFieldRef]);
+
+  const [activateEscapeInterceptor, deactivateEscapeInterceptor] =
+    useEscapeInterceptor(handleEscape);
+
+  const handleSubmit = useCallback(() => {
+    submit();
+  }, [submit]);
+
+  const handleFieldFocus = useCallback(() => {
+    setIsOpened(true);
+  }, []);
+
+  const handleFieldKeyDown = useCallback(
+    (event) => {
+      if (isModifierKeyPressed(event) && event.key === 'Enter') {
+        submit();
+      }
+    },
+    [submit],
+  );
+
+  const handleAwayClick = useCallback(() => {
+    setIsOpened(false);
+  }, []);
+
+  const handleClickAwayCancel = useCallback(() => {
+    textFieldRef.current.focus();
+  }, [textFieldRef]);
+
+  const clickAwayProps = useClickAwayListener(
+    [textFieldRef, buttonRef],
+    handleAwayClick,
+    handleClickAwayCancel,
+  );
+
+  useDidUpdate(() => {
+    if (isOpened) {
+      activateEscapeInterceptor();
+    } else {
+      deactivateEscapeInterceptor();
+    }
+  }, [isOpened]);
+
+  useDidUpdate(() => {
+    textFieldRef.current.focus();
+  }, [selectTextFieldState]);
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <TextArea
+        {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+        ref={handleTextFieldRef}
+        as={TextareaAutosize}
+        name="text"
+        value={data.text}
+        placeholder={t('common.writeComment')}
+        maxLength={1048576}
+        minRows={isOpened ? 3 : 1}
+        spellCheck={false}
+        className={styles.field}
+        onFocus={handleFieldFocus}
+        onKeyDown={handleFieldKeyDown}
+        onChange={handleFieldChange}
+      />
+      {isOpened && (
+        <div className={styles.controls}>
+          <Button
+            {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+            positive
+            ref={handleButtonRef}
+            content={t('action.addComment')}
+            className={styles.button}
+          />
+        </div>
+      )}
+    </Form>
+  );
+});
+
+export default Add;

client/src/components/comments/Comments/Add.module.scss

@@ -0,0 +1,35 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .button {
+    white-space: nowrap;
+  }
+
+  .controls {
+    align-items: center;
+    display: flex;
+    font-size: 12px;
+    margin-top: 6px;
+  }
+
+  .field {
+    background: #fff;
+    border: 0;
+    box-sizing: border-box;
+    color: #333;
+    display: block;
+    line-height: 1.5;
+    font-size: 14px;
+    overflow: hidden;
+    padding: 8px 12px;
+    resize: none;
+    width: 100%;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

client/src/components/comments/Comments/Comments.jsx

@@ -0,0 +1,81 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useInView } from 'react-intersection-observer';
+import { Comment, Loader } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { isListArchiveOrTrash } from '../../../utils/record-helpers';
+import { BoardMembershipRoles } from '../../../constants/Enums';
+import Item from './Item';
+import Add from './Add';
+
+import styles from './Comments.module.scss';
+
+const Comments = React.memo(() => {
+  const selectListById = useMemo(() => selectors.makeSelectListById(), []);
+
+  const commentIds = useSelector(selectors.selectCommentIdsForCurrentCard);
+  const { isCommentsFetching, isAllCommentsFetched } = useSelector(selectors.selectCurrentCard);
+
+  const cadAdd = useSelector((state) => {
+    const { listId } = selectors.selectCurrentCard(state);
+    const list = selectListById(state, listId);
+
+    if (isListArchiveOrTrash(list)) {
+      return false;
+    }
+
+    const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+
+    let isMember = false;
+    let isEditor = false;
+
+    if (boardMembership) {
+      isMember = true;
+      isEditor = boardMembership.role === BoardMembershipRoles.EDITOR;
+    }
+
+    return isEditor || (isMember && boardMembership.canComment);
+  });
+
+  const dispatch = useDispatch();
+
+  const [inViewRef] = useInView({
+    threshold: 1,
+    onChange: (inView) => {
+      if (inView) {
+        dispatch(entryActions.fetchCommentsInCurrentCard());
+      }
+    },
+  });
+
+  return (
+    <>
+      {cadAdd && <Add />}
+      <div className={styles.itemsWrapper}>
+        <Comment.Group className={styles.items}>
+          {commentIds.map((commentId) => (
+            <Item key={commentId} id={commentId} />
+          ))}
+        </Comment.Group>
+      </div>
+      {isCommentsFetching !== undefined && isAllCommentsFetched !== undefined && (
+        <div className={styles.loaderWrapper}>
+          {isCommentsFetching ? (
+            <Loader active inverted inline="centered" size="small" />
+          ) : (
+            !isAllCommentsFetched && <div ref={inViewRef} />
+          )}
+        </div>
+      )}
+    </>
+  );
+});
+
+export default Comments;

client/src/components/comments/Comments/Comments.module.scss

@@ -0,0 +1,18 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .items {
+    max-width: none;
+  }
+
+  .itemsWrapper {
+    margin: 14px 0 14px -40px;
+  }
+
+  .loaderWrapper {
+    margin-top: 14px;
+  }
+}

client/src/components/comments/Comments/Edit.jsx

@@ -0,0 +1,122 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import { dequal } from 'dequal';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import TextareaAutosize from 'react-textarea-autosize';
+import { Button, Form, TextArea } from 'semantic-ui-react';
+import { useClickAwayListener } from '../../../lib/hooks';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { useForm, useNestedRef } from '../../../hooks';
+import { focusEnd } from '../../../utils/element-helpers';
+import { isModifierKeyPressed } from '../../../utils/event-helpers';
+
+import styles from './Edit.module.scss';
+
+const Edit = React.memo(({ commentId, onClose }) => {
+  const selectCommentById = useMemo(() => selectors.makeSelectCommentById(), []);
+
+  const comment = useSelector((state) => selectCommentById(state, commentId));
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const defaultData = useMemo(
+    () => ({
+      text: comment.text,
+    }),
+    [comment.text],
+  );
+
+  const [data, handleFieldChange] = useForm(() => ({
+    text: '',
+    ...defaultData,
+  }));
+
+  const [textFieldRef, handleTextFieldRef] = useNestedRef();
+  const [buttonRef, handleButtonRef] = useNestedRef();
+
+  const submit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      text: data.text.trim(),
+    };
+
+    if (cleanData.text && !dequal(cleanData, defaultData)) {
+      dispatch(entryActions.updateComment(commentId, cleanData));
+    }
+
+    onClose();
+  }, [commentId, onClose, dispatch, defaultData, data]);
+
+  const handleSubmit = useCallback(() => {
+    submit();
+  }, [submit]);
+
+  const handleFieldKeyDown = useCallback(
+    (event) => {
+      if (event.key === 'Enter') {
+        if (isModifierKeyPressed(event)) {
+          submit();
+        }
+      } else if (event.key === 'Escape') {
+        onClose();
+      }
+    },
+    [onClose, submit],
+  );
+
+  const handleClickAwayCancel = useCallback(() => {
+    textFieldRef.current.focus();
+  }, [textFieldRef]);
+
+  const clickAwayProps = useClickAwayListener(
+    [textFieldRef, buttonRef],
+    submit,
+    handleClickAwayCancel,
+  );
+
+  useEffect(() => {
+    focusEnd(textFieldRef.current);
+  }, [textFieldRef]);
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <TextArea
+        {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+        ref={handleTextFieldRef}
+        as={TextareaAutosize}
+        name="text"
+        value={data.text}
+        maxLength={1048576}
+        minRows={3}
+        spellCheck={false}
+        className={styles.field}
+        onKeyDown={handleFieldKeyDown}
+        onChange={handleFieldChange}
+      />
+      <div className={styles.controls}>
+        <Button
+          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+          positive
+          ref={handleButtonRef}
+          content={t('action.save')}
+        />
+      </div>
+    </Form>
+  );
+});
+
+Edit.propTypes = {
+  commentId: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default Edit;

client/src/components/comments/Comments/Edit.module.scss

@@ -0,0 +1,31 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .controls {
+    clear: both;
+    margin-top: 6px;
+  }
+
+  .field {
+    background: #fff;
+    border: 1px solid rgba(9, 30, 66, 0.13);
+    border-radius: 3px;
+    box-sizing: border-box;
+    color: #333;
+    display: block;
+    line-height: 1.4;
+    font-size: 14px;
+    margin-bottom: 4px;
+    overflow: hidden;
+    padding: 8px 12px;
+    resize: none;
+    width: 100%;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

client/src/components/comments/Comments/Item.jsx

@@ -0,0 +1,160 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useContext, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Comment } from 'semantic-ui-react';
+import { useDidUpdate } from '../../../lib/hooks';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { usePopupInClosableContext } from '../../../hooks';
+import { isListArchiveOrTrash } from '../../../utils/record-helpers';
+import { StaticUserIds } from '../../../constants/StaticUsers';
+import { BoardMembershipRoles } from '../../../constants/Enums';
+import { ClosableContext } from '../../../contexts';
+import Edit from './Edit';
+import TimeAgo from '../../common/TimeAgo';
+import Markdown from '../../common/Markdown';
+import ConfirmationStep from '../../common/ConfirmationStep';
+import UserAvatar from '../../users/UserAvatar';
+
+import styles from './Item.module.scss';
+
+const Item = React.memo(({ id }) => {
+  const selectCommentById = useMemo(() => selectors.makeSelectCommentById(), []);
+  const selectUserById = useMemo(() => selectors.makeSelectUserById(), []);
+  const selectListById = useMemo(() => selectors.makeSelectListById(), []);
+
+  const comment = useSelector((state) => selectCommentById(state, id));
+  const user = useSelector((state) => selectUserById(state, comment.userId));
+
+  const isCurrentUser = useSelector(
+    (state) => comment.userId === selectors.selectCurrentUserId(state),
+  );
+
+  const { canEdit, canDelete } = useSelector((state) => {
+    const { listId } = selectors.selectCurrentCard(state);
+    const list = selectListById(state, listId);
+
+    if (isListArchiveOrTrash(list)) {
+      return {
+        canEdit: false,
+        canDelete: false,
+      };
+    }
+
+    const isManager = selectors.selectIsCurrentUserManagerForCurrentProject(state);
+    const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+
+    let isMember = false;
+    let isEditor = false;
+
+    if (boardMembership) {
+      isMember = true;
+      isEditor = boardMembership.role === BoardMembershipRoles.EDITOR;
+    }
+
+    return {
+      canEdit:
+        isMember &&
+        comment.userId === boardMembership.userId &&
+        (isEditor || boardMembership.canComment),
+      canDelete:
+        isManager ||
+        isEditor ||
+        (isMember && comment.userId === boardMembership.userId && boardMembership.canComment),
+    };
+  }, shallowEqual);
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+  const [isEditOpened, setIsEditOpened] = useState(false);
+  const [, , setIsClosableActive] = useContext(ClosableContext);
+
+  const handleDeleteConfirm = useCallback(() => {
+    dispatch(entryActions.deleteComment(id));
+  }, [id, dispatch]);
+
+  const handleEditClick = useCallback(() => {
+    setIsEditOpened(true);
+  }, []);
+
+  const handleEditClose = useCallback(() => {
+    setIsEditOpened(false);
+  }, []);
+
+  useDidUpdate(() => {
+    setIsClosableActive(isEditOpened);
+  }, [isEditOpened]);
+
+  const ConfirmationPopup = usePopupInClosableContext(ConfirmationStep);
+
+  return (
+    <Comment>
+      {!isCurrentUser && (
+        <span className={styles.user}>
+          <UserAvatar id={comment.userId} />
+        </span>
+      )}
+      <div className={classNames(styles.content, isCurrentUser && styles.contentWithoutUser)}>
+        {isEditOpened ? (
+          <Edit commentId={id} onClose={handleEditClose} />
+        ) : (
+          <div className={classNames(styles.bubble, isCurrentUser && styles.bubbleRight)}>
+            <div className={styles.header}>
+              {user.id === StaticUserIds.DELETED
+                ? t(`common.${user.name}`, {
+                    context: 'title',
+                  })
+                : user.name}
+            </div>
+            <Markdown>{comment.text}</Markdown>
+            <Comment.Actions className={styles.information}>
+              <span className={styles.date}>
+                <TimeAgo date={comment.createdAt} />
+              </span>
+              {(canEdit || canDelete) && (
+                <span className={styles.actions}>
+                  {canEdit && (
+                    <Comment.Action
+                      as="button"
+                      content={t('action.edit')}
+                      disabled={!comment.isPersisted}
+                      onClick={handleEditClick}
+                    />
+                  )}
+                  {canDelete && (
+                    <ConfirmationPopup
+                      title="common.deleteComment"
+                      content="common.areYouSureYouWantToDeleteThisComment"
+                      buttonContent="action.deleteComment"
+                      onConfirm={handleDeleteConfirm}
+                    >
+                      <Comment.Action
+                        as="button"
+                        content={t('action.delete')}
+                        disabled={!comment.isPersisted}
+                      />
+                    </ConfirmationPopup>
+                  )}
+                </span>
+              )}
+            </Comment.Actions>
+          </div>
+        )}
+      </div>
+    </Comment>
+  );
+});
+
+Item.propTypes = {
+  id: PropTypes.string.isRequired,
+};
+
+export default Item;

client/src/components/comments/Comments/Item.module.scss

@@ -0,0 +1,69 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .actions {
+    margin-left: 20px;
+  }
+
+  .bubble {
+    background: #fff;
+    border-radius: 0 8px 8px;
+    box-shadow: 0 1px 2px -1px rgba(9, 30, 66, 0.25),
+      0 0 0 1px rgba(9, 30, 66, 0.08);
+    box-sizing: border-box;
+    display: inline-block;
+    line-height: 1;
+    max-width: 90%;
+    min-width: 40%;
+    overflow: hidden;
+    padding: 8px 12px;
+  }
+
+  .bubbleRight {
+    background: #e7f0e2;
+    border-radius: 8px 0 8px 8px;
+    float: right;
+  }
+
+  .content {
+    display: inline-block;
+    line-height: 0;
+    vertical-align: top;
+    width: calc(100% - 40px);
+  }
+
+  .contentWithoutUser {
+    margin-left: 40px;
+  }
+
+  .date {
+    color: #6b808c;
+    font-size: 12px;
+  }
+
+  .header {
+    color: #17394d;
+    display: flex;
+    font-weight: bold;
+    justify-content: space-between;
+    line-height: 20px;
+    margin-bottom: 4px;
+  }
+
+  .information {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8px;
+  }
+
+  .user {
+    display: inline-block;
+    padding: 4px 8px 4px 0;
+    position: sticky;
+    top: 0;
+    vertical-align: top;
+  }
+}

client/src/components/comments/Comments/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import Comments from './Comments';
+
+export default Comments;