feat: Version 2

Closes #627, closes #1047

client/src/components/activities/Activities/Activities.jsx

@@ -0,0 +1,54 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React 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 Item from './Item';
+
+import styles from './Activities.module.scss';
+
+const Activities = React.memo(() => {
+  const activityIds = useSelector(selectors.selectActivityIdsForCurrentCard);
+  const { isActivitiesFetching, isAllActivitiesFetched } = useSelector(selectors.selectCurrentCard);
+
+  const dispatch = useDispatch();
+
+  const [inViewRef] = useInView({
+    threshold: 1,
+    onChange: (inView) => {
+      if (inView) {
+        dispatch(entryActions.fetchActivitiesInCurrentCard());
+      }
+    },
+  });
+
+  return (
+    <>
+      <div className={styles.itemsWrapper}>
+        <Comment.Group className={styles.items}>
+          {activityIds.map((activityId) => (
+            <Item key={activityId} id={activityId} />
+          ))}
+        </Comment.Group>
+      </div>
+      {isActivitiesFetching !== undefined && isAllActivitiesFetched !== undefined && (
+        <div className={styles.loaderWrapper}>
+          {isActivitiesFetching ? (
+            <Loader active inverted inline="centered" size="small" />
+          ) : (
+            !isAllActivitiesFetched && <div ref={inViewRef} />
+          )}
+        </div>
+      )}
+    </>
+  );
+});
+
+export default Activities;

client/src/components/activities/Activities/Activities.module.scss

@@ -0,0 +1,19 @@
+/*!
+ * 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-left: -40px;
+    margin-top: 12px;
+  }
+
+  .loaderWrapper {
+    margin-top: 10px;
+  }
+}

client/src/components/activities/Activities/Item.jsx

@@ -0,0 +1,110 @@
+/*!
+ * 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 PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { useTranslation, Trans } from 'react-i18next';
+import { Comment } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+import { StaticUserIds } from '../../../constants/StaticUsers';
+import { ActivityTypes } from '../../../constants/Enums';
+import TimeAgo from '../../common/TimeAgo';
+import UserAvatar from '../../users/UserAvatar';
+
+import styles from './Item.module.scss';
+
+const Item = React.memo(({ id }) => {
+  const selectActivityById = useMemo(() => selectors.makeSelectActivityById(), []);
+  const selectUserById = useMemo(() => selectors.makeSelectUserById(), []);
+
+  const activity = useSelector((state) => selectActivityById(state, id));
+  const user = useSelector((state) => selectUserById(state, activity.userId));
+
+  const [t] = useTranslation();
+
+  const userName =
+    user.id === StaticUserIds.DELETED
+      ? t(`common.${user.name}`, {
+          context: 'title',
+        })
+      : user.name;
+
+  let contentNode;
+  switch (activity.type) {
+    case ActivityTypes.CREATE_CARD: {
+      const { list } = activity.data;
+      const listName = list.name || t(`common.${list.type}`);
+
+      contentNode = (
+        <Trans
+          i18nKey="common.userAddedThisCardToList"
+          values={{
+            user: userName,
+            list: listName,
+          }}
+        >
+          <span className={styles.author}>{userName}</span>
+          <span className={styles.text}>
+            {' added this card to '}
+            {listName}
+          </span>
+        </Trans>
+      );
+
+      break;
+    }
+    case ActivityTypes.MOVE_CARD: {
+      const { fromList, toList } = activity.data;
+
+      const fromListName = fromList.name || t(`common.${fromList.type}`);
+      const toListName = toList.name || t(`common.${toList.type}`);
+
+      contentNode = (
+        <Trans
+          i18nKey="common.userMovedThisCardFromListToList"
+          values={{
+            user: userName,
+            fromList: fromListName,
+            toList: toListName,
+          }}
+        >
+          <span className={styles.author}>{userName}</span>
+          <span className={styles.text}>
+            {' moved this card from '}
+            {fromListName}
+            {' to '}
+            {toListName}
+          </span>
+        </Trans>
+      );
+
+      break;
+    }
+    default:
+      contentNode = null;
+  }
+
+  return (
+    <Comment>
+      <span className={styles.user}>
+        <UserAvatar id={activity.userId} />
+      </span>
+      <div className={styles.content}>
+        <div>{contentNode}</div>
+        <span className={styles.date}>
+          <TimeAgo date={activity.createdAt} />
+        </span>
+      </div>
+    </Comment>
+  );
+});
+
+Item.propTypes = {
+  id: PropTypes.string.isRequired,
+};
+
+export default Item;

client/src/components/activities/Activities/Item.module.scss

@@ -0,0 +1,38 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .author {
+    color: #17394d;
+    display: inline-block;
+    font-weight: bold;
+    line-height: 20px;
+  }
+
+  .content {
+    border-bottom: 1px solid #092d4221;
+    display: inline-block;
+    padding-bottom: 14px;
+    vertical-align: top;
+    width: calc(100% - 40px);
+  }
+
+  .date {
+    color: #6b808c;
+    display: inline-block;
+    font-size: 12px;
+    line-height: 20px;
+  }
+
+  .text {
+    line-height: 20px;
+  }
+
+  .user {
+    display: inline-block;
+    padding: 4px 8px 0 0;
+    vertical-align: top;
+  }
+}

client/src/components/activities/Activities/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 Activities from './Activities';
+
+export default Activities;