chore: Update version

Closes #262

.github/FUNDING.yml

@@ -1,12 +1,13 @@
 # These are supported funding model platforms
 
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: meltyshev
 patreon: # Replace with a single Patreon username
 open_collective: # Replace with a single Open Collective username
-ko_fi: meltyshev
+ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
 custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/build-and-push-docker-base-image.yml

@@ -0,0 +1,44 @@
+name: Build and push Docker base image
+
+on:
+  push:
+    paths:
+      - ./Dockerfile.base
+    branches:
+      - master
+  workflow_dispatch:
+
+env:
+  ALPINE_VERSION: 3.15
+
+jobs:
+  build-and-push-docker-base-image:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          file: Dockerfile.base
+          build-args: ALPINE_VERSION=${{ env.ALPINE_VERSION }}
+          push: true
+          tags: |
+            ghcr.io/plankanban/planka:base-latest
+            ghcr.io/plankanban/planka:base-${{ env.ALPINE_VERSION }}

.github/workflows/build-and-push-docker-image.yml

@@ -0,0 +1,42 @@
+name: Build and push Docker image
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build-and-push-docker-image:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set version
+        uses: actions/github-script@v6
+        id: set-version
+        with:
+          result-encoding: string
+          script: return context.payload.release.tag_name.replace('v', '')
+
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          push: true
+          tags: |
+            ghcr.io/plankanban/planka:latest
+            ghcr.io/plankanban/planka:${{ steps.set-version.outputs.result }}

.gitignore

@@ -1,5 +1,5 @@
 node_modules
 docker-compose.override.yml
 
-.vscode
+.idea
 .DS_Store

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "files.insertFinalNewline": true,
+  "files.trimFinalNewlines": true,
+  "files.trimTrailingWhitespace": true,
+  "eslint.format.enable": true,
+  "eslint.workingDirectories": [
+    "./client",
+    "./server"
+  ],
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  }
+}

CONTRIBUTING.md

@@ -0,0 +1,49 @@
+# Contributing to Planka
+
+First off, thanks for taking the time to contribute!
+
+## Code of Conduct
+
+This project and everyone participating in it is governed by the [Planka Code of Conduct](https://github.com/plankanban/planka/blob/master/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.
+
+## How Can I Contribute?
+
+### Reporting Bugs
+
+Feel free to create a bug report as a new issue on GitHub. Before creating, please check if there is already existing one. When creating a bug report, please include as many details as possible.
+
+### Suggesting Enhancements
+
+Feel free to create an enhancement suggestion as a new issue on GitHub. Before creating, please check if there is already existing one. When creating an enhancement suggestion, please include as many details as possible.
+
+### Pull Requests
+
+Before submitting a pull request please discuss with the core team by creating or commenting in an issue on GitHub – we'd also love to hear from you in the discussions. This way we can ensure that an approach is agreed on before code is written. This will result in a much higher liklihood of your code being accepted.
+
+If you’re looking for ways to get started, here's a list of ways to help us improve Planka:
+
+- [Translation](https://github.com/plankanban/planka/issues/66) into other languages
+- Issues with [`good first issue`](https://github.com/plankanban/planka/labels/good%20first%20issue) label
+- Performance improvements, both on client and server
+- Developer happiness and documentation
+- Bugs and other issues listed on GitHub
+
+## Styleguides
+
+### Git Commit Messages
+
+Commit messages should follow the [commit message convention](https://conventionalcommits.org), so changelogs could be generated automatically by that.
+
+Additional rules:
+
+- Separate subject from body with a blank line
+- Limit the subject line to 70 characters
+- Capitalize the subject line
+- Do not end the subject line with a period
+- Use the imperative mood in the subject line
+- Use the body to explain what and why vs. how
+- Each commit should be a single, stable change
+
+### JavaScript
+
+All JavaScript code should follow this [JavaScript style guide](https://github.com/airbnb/javascript). The pre-commit hook will help you find linting errors before committing.

Dockerfile

@@ -1,57 +1,36 @@
-FROM node AS client-builder
+FROM node:lts AS client-builder
 
 WORKDIR /app
 
-COPY client .
+COPY client/package.json client/package-lock.json ./
 
 RUN npm install npm@latest --global \
-  && npm install \
+  && npm install
-  && npm run build
 
-FROM node:alpine
+COPY client .
+RUN npm run build
+
+FROM ghcr.io/plankanban/planka:base-latest
 
 WORKDIR /app
 
-COPY server .
+COPY server/.npmrc server/package.json server/package-lock.json ./
-COPY docker-start.sh start.sh
 
-ARG ALPINE_VERSION=3.12
+RUN npm install npm@latest --global \
-ARG VIPS_VERSION=8.10.2
-
-RUN apk -U upgrade \
-  && apk add \
-  bash giflib glib lcms2 libexif \
-  libgsf libjpeg-turbo libpng librsvg libwebp \
-  orc pango tiff \
-  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/community/ \
-  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/main/ \
-  --no-cache \
-  && apk add \
-  build-base giflib-dev glib-dev lcms2-dev libexif-dev \
-  libgsf-dev libjpeg-turbo-dev libpng-dev librsvg-dev libwebp-dev \
-  orc-dev pango-dev tiff-dev \
-  --virtual vips-dependencies \
-  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/community/ \
-  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/main/ \
-  --no-cache \
-  && wget -O- https://github.com/libvips/libvips/releases/download/v${VIPS_VERSION}/vips-${VIPS_VERSION}.tar.gz | tar xzC /tmp \
-  && cd /tmp/vips-${VIPS_VERSION} \
-  && ./configure \
-  && make \
-  && make install-strip \
-  && cd $OLDPWD \
-  && rm -rf /tmp/vips-${VIPS_VERSION} \
-  && npm install npm@latest --global \
   && npm install --production \
-  && apk del vips-dependencies --purge \
+  && apk del vips-dependencies --purge
-  && chmod +x start.sh
+
+COPY docker-start.sh start.sh
+COPY server .
+
+RUN cp .env.sample .env
 
 COPY --from=client-builder /app/build public
 COPY --from=client-builder /app/build/index.html views
 
 VOLUME /app/public/user-avatars
 VOLUME /app/public/project-background-images
-VOLUME /app/public/attachments
+VOLUME /app/private/attachments
 
 EXPOSE 1337
 

Dockerfile.base

@@ -0,0 +1,27 @@
+FROM node:lts-alpine
+
+ARG ALPINE_VERSION=3.15
+ARG VIPS_VERSION=8.12.2
+
+RUN apk -U upgrade \
+  && apk add \
+  bash giflib glib lcms2 libexif \
+  libgsf libjpeg-turbo libpng librsvg libwebp \
+  orc pango tiff \
+  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/community/ \
+  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/main/ \
+  --no-cache \
+  && apk add \
+  build-base giflib-dev glib-dev lcms2-dev libexif-dev \
+  libgsf-dev libjpeg-turbo-dev libpng-dev librsvg-dev libwebp-dev \
+  orc-dev pango-dev tiff-dev \
+  --virtual vips-dependencies \
+  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/community/ \
+  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/main/ \
+  --no-cache \
+  && wget -O- https://github.com/libvips/libvips/releases/download/v${VIPS_VERSION}/vips-${VIPS_VERSION}.tar.gz | tar xzC /tmp \
+  && cd /tmp/vips-${VIPS_VERSION} \
+  && ./configure \
+  && make \
+  && make install-strip \
+  && rm -rf /tmp/vips-${VIPS_VERSION}

README.md

@@ -1,6 +1,6 @@
 # Planka
 
-![David (path)](https://img.shields.io/david/plankanban/planka?path=client) ![Docker Pulls](https://img.shields.io/docker/pulls/meltyshev/planka) ![GitHub](https://img.shields.io/github/license/plankanban/planka)
+![David (path)](https://img.shields.io/github/package-json/v/plankanban/planka) ![Docker Pulls](https://img.shields.io/docker/pulls/meltyshev/planka) ![GitHub](https://img.shields.io/github/license/plankanban/planka)
 
 A Trello-like kanban board built with React and Redux.
 
@@ -8,8 +8,6 @@ A Trello-like kanban board built with React and Redux.
 
 [**Client demo**](https://plankanban.github.io/planka) (without server features).
 
-<a href="https://ko-fi.com/meltyshev" target="_blank"><img src="https://cdn.ko-fi.com/cdn/kofi4.png?v=2" alt="Buy Me a Coffee at ko-fi.com" border="0" height="36" style="border:0px;height:36px;" /></a>
-
 ## Features
 
 - Create projects, boards, lists, cards, labels and tasks
@@ -21,23 +19,8 @@ A Trello-like kanban board built with React and Redux.
 - User notifications
 - Internationalization
 
-## Roadmap
-
-### Current task
-
-Projects should have Managers who have the ability to create/edit/delete boards. Boards should have their own Members, so members won't see all boards, just those they belong to. Planka will be released after this breaking change.
-
-### Future tasks
-
-- Fetch last data after reconnection
-- Custom fields
-- Public boards
-- Automatic actions
-
 ## Deploy
 
-**Please note that Planka is NOT released yet, API and database structure may be changed!**
-
 ### Docker Compose
 
 [![](https://d207aa93qlcgug.cloudfront.net/1.95.5.qa/img/nav/docker-logo-loggedout.png)](https://hub.docker.com/r/meltyshev/planka)
@@ -78,7 +61,7 @@ Either use a local database or start the provided development database:
 docker-compose -f docker-compose-dev.yml up
 ```
 
-Edit `DATABASE_URL` in `.env` file if needed, then initialize the database:
+Create `server/.env` based on `server/.env.sample` and edit `DATABASE_URL` if needed, then initialize the database:
 
 ```
 npm run server:db:init

SECURITY.md

@@ -0,0 +1,13 @@
+# Security Policy
+
+## Supported Versions
+
+Most recent release.
+
+## Reporting a Vulnerability
+
+Please report any security issues you discovered to meltyshev@gmail.com. If the issue is confirmed, we will release a patch as soon as possible depending on complexity.
+
+**Do NOT create public issues on GitHub for security vulnerabilities.**
+
+Thank you for your contribution!

client/package.json

@@ -25,7 +25,15 @@
       "browser": true,
       "jest": true
     },
-    "parser": "babel-eslint",
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+      "babelOptions": {
+        "presets": [
+          "airbnb"
+        ]
+      },
+      "requireConfigFile": false
+    },
     "plugins": [
       "prettier"
     ],
@@ -55,55 +63,61 @@
     }
   },
   "dependencies": {
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
-    "connected-react-router": "^6.8.0",
+    "connected-react-router": "^6.9.3",
-    "date-fns": "^2.22.1",
+    "date-fns": "^2.29.1",
-    "dequal": "^2.0.2",
+    "dequal": "^2.0.3",
     "history": "^4.10.1",
-    "i18next": "^20.3.2",
+    "i18next": "^21.8.14",
-    "i18next-browser-languagedetector": "^6.1.2",
+    "i18next-browser-languagedetector": "^6.1.4",
-    "initials": "^3.1.1",
+    "initials": "^3.1.2",
-    "lodash": "^4.17.20",
+    "js-cookie": "^3.0.1",
-    "node-sass": "^6.0.0",
+    "jwt-decode": "^3.1.2",
-    "prop-types": "^15.7.2",
+    "lodash": "^4.17.21",
-    "react": "^17.0.1",
+    "node-sass": "^7.0.1",
-    "react-beautiful-dnd": "^13.0.0",
+    "photoswipe": "^5.3.0",
-    "react-datepicker": "^4.1.1",
+    "prop-types": "^15.8.1",
-    "react-dom": "^17.0.1",
+    "react": "^17.0.2",
-    "react-dropzone": "^11.3.1",
+    "react-beautiful-dnd": "^13.1.0",
-    "react-i18next": "^11.11.0",
+    "react-datepicker": "^4.8.0",
+    "react-dom": "^17.0.2",
+    "react-dropzone": "^14.2.2",
+    "react-i18next": "^11.18.1",
     "react-input-mask": "^2.0.4",
-    "react-markdown": "^6.0.2",
+    "react-markdown": "^8.0.3",
-    "react-redux": "^7.2.4",
+    "react-photoswipe-gallery": "^2.2.1",
-    "react-router-dom": "^5.2.0",
+    "react-redux": "^7.2.8",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "^5.3.1",
-    "react-textarea-autosize": "^8.3.3",
+    "react-scripts": "5.0.1",
-    "redux": "^4.1.0",
+    "react-textarea-autosize": "^8.3.4",
+    "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "redux-orm": "^0.16.2",
     "redux-saga": "^1.1.3",
-    "remark-gfm": "^1.0.0",
+    "remark-breaks": "^3.0.2",
-    "reselect": "^4.0.0",
+    "remark-gfm": "^3.0.1",
+    "reselect": "^4.1.6",
     "sails.io.js": "^1.2.1",
-    "semantic-ui-react": "^2.0.3",
+    "semantic-ui-react": "^2.1.3",
     "socket.io-client": "^2.3.1",
-    "validator": "^13.6.0",
+    "validator": "^13.7.0",
-    "whatwg-fetch": "^3.5.0"
+    "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "chai": "^4.3.0",
+    "babel-preset-airbnb": "^5.0.0",
+    "chai": "^4.3.6",
     "enzyme": "^3.11.0",
-    "eslint": "^7.29.0",
+    "eslint": "^8.20.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest-enzyme": "^7.1.2",
-    "prettier": "2.3.1",
+    "prettier": "2.7.1",
-    "react-test-renderer": "^17.0.1"
+    "react-test-renderer": "^17.0.2"
   }
 }

client/src/actions/action.js

@@ -1,22 +0,0 @@
-import ActionTypes from '../constants/ActionTypes';
-
-export const handleActionCreate = (action) => ({
-  type: ActionTypes.ACTION_CREATE_HANDLE,
-  payload: {
-    action,
-  },
-});
-
-export const handleActionUpdate = (action) => ({
-  type: ActionTypes.ACTION_UPDATE_HANDLE,
-  payload: {
-    action,
-  },
-});
-
-export const handleActionDelete = (action) => ({
-  type: ActionTypes.ACTION_DELETE_HANDLE,
-  payload: {
-    action,
-  },
-});

client/src/actions/actions.js

@@ -1,26 +0,0 @@
-import ActionTypes from '../constants/ActionTypes';
-
-// eslint-disable-next-line import/prefer-default-export
-export const fetchActions = (cardId) => ({
-  type: ActionTypes.ACTIONS_FETCH,
-  payload: {
-    cardId,
-  },
-});
-
-fetchActions.success = (cardId, actions, users) => ({
-  type: ActionTypes.ACTIONS_FETCH__SUCCESS,
-  payload: {
-    cardId,
-    actions,
-    users,
-  },
-});
-
-fetchActions.failure = (cardId, error) => ({
-  type: ActionTypes.ACTIONS_FETCH__FAILURE,
-  payload: {
-    cardId,
-    error,
-  },
-});

client/src/actions/activities.js

@@ -0,0 +1,79 @@
+import ActionTypes from '../constants/ActionTypes';
+
+const fetchActivities = (cardId) => ({
+  type: ActionTypes.ACTIVITIES_FETCH,
+  payload: {
+    cardId,
+  },
+});
+
+fetchActivities.success = (cardId, activities, users) => ({
+  type: ActionTypes.ACTIVITIES_FETCH__SUCCESS,
+  payload: {
+    cardId,
+    activities,
+    users,
+  },
+});
+
+fetchActivities.failure = (cardId, error) => ({
+  type: ActionTypes.ACTIVITIES_FETCH__FAILURE,
+  payload: {
+    cardId,
+    error,
+  },
+});
+
+const toggleActivitiesDetails = (cardId, isVisible) => ({
+  type: ActionTypes.ACTIVITIES_DETAILS_TOGGLE,
+  payload: {
+    cardId,
+    isVisible,
+  },
+});
+
+toggleActivitiesDetails.success = (cardId, activities, users) => ({
+  type: ActionTypes.ACTIVITIES_DETAILS_TOGGLE__SUCCESS,
+  payload: {
+    cardId,
+    activities,
+    users,
+  },
+});
+
+toggleActivitiesDetails.failure = (cardId, error) => ({
+  type: ActionTypes.ACTIVITIES_DETAILS_TOGGLE__FAILURE,
+  payload: {
+    cardId,
+    error,
+  },
+});
+
+const handleActivityCreate = (activity) => ({
+  type: ActionTypes.ACTIVITY_CREATE_HANDLE,
+  payload: {
+    activity,
+  },
+});
+
+const handleActivityUpdate = (activity) => ({
+  type: ActionTypes.ACTIVITY_UPDATE_HANDLE,
+  payload: {
+    activity,
+  },
+});
+
+const handleActivityDelete = (activity) => ({
+  type: ActionTypes.ACTIVITY_DELETE_HANDLE,
+  payload: {
+    activity,
+  },
+});
+
+export default {
+  fetchActivities,
+  toggleActivitiesDetails,
+  handleActivityCreate,
+  handleActivityUpdate,
+  handleActivityDelete,
+};

client/src/actions/attachments.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createAttachment = (attachment) => ({
+const createAttachment = (attachment) => ({
   type: ActionTypes.ATTACHMENT_CREATE,
   payload: {
     attachment,
@@ -23,14 +23,14 @@ createAttachment.failure = (localId, error) => ({
   },
 });
 
-export const handleAttachmentCreate = (attachment) => ({
+const handleAttachmentCreate = (attachment) => ({
   type: ActionTypes.ATTACHMENT_CREATE_HANDLE,
   payload: {
     attachment,
   },
 });
 
-export const updateAttachment = (id, data) => ({
+const updateAttachment = (id, data) => ({
   type: ActionTypes.ATTACHMENT_UPDATE,
   payload: {
     id,
@@ -53,14 +53,14 @@ updateAttachment.failure = (id, error) => ({
   },
 });
 
-export const handleAttachmentUpdate = (attachment) => ({
+const handleAttachmentUpdate = (attachment) => ({
   type: ActionTypes.ATTACHMENT_UPDATE_HANDLE,
   payload: {
     attachment,
   },
 });
 
-export const deleteAttachment = (id) => ({
+const deleteAttachment = (id) => ({
   type: ActionTypes.ATTACHMENT_DELETE,
   payload: {
     id,
@@ -82,9 +82,18 @@ deleteAttachment.failure = (id, error) => ({
   },
 });
 
-export const handleAttachmentDelete = (attachment) => ({
+const handleAttachmentDelete = (attachment) => ({
   type: ActionTypes.ATTACHMENT_DELETE_HANDLE,
   payload: {
     attachment,
   },
 });
+
+export default {
+  createAttachment,
+  handleAttachmentCreate,
+  updateAttachment,
+  handleAttachmentUpdate,
+  deleteAttachment,
+  handleAttachmentDelete,
+};

client/src/actions/board-memberships.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createBoardMembership = (boardMembership) => ({
+const createBoardMembership = (boardMembership) => ({
   type: ActionTypes.BOARD_MEMBERSHIP_CREATE,
   payload: {
     boardMembership,
@@ -23,7 +23,7 @@ createBoardMembership.failure = (localId, error) => ({
   },
 });
 
-export const handleBoardMembershipCreate = (
+const handleBoardMembershipCreate = (
   boardMembership,
   project,
   board,
@@ -38,6 +38,7 @@ export const handleBoardMembershipCreate = (
   cardLabels,
   tasks,
   attachments,
+  deletedNotifications,
 ) => ({
   type: ActionTypes.BOARD_MEMBERSHIP_CREATE_HANDLE,
   payload: {
@@ -55,6 +56,7 @@ export const handleBoardMembershipCreate = (
     cardLabels,
     tasks,
     attachments,
+    deletedNotifications,
   },
 });
 
@@ -67,7 +69,37 @@ handleBoardMembershipCreate.fetchProject = (id, currentUserId, currentBoardId) =
   },
 });
 
-export const deleteBoardMembership = (id) => ({
+const updateBoardMembership = (id, data) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
+updateBoardMembership.success = (boardMembership) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE__SUCCESS,
+  payload: {
+    boardMembership,
+  },
+});
+
+updateBoardMembership.failure = (id, error) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
+const handleBoardMembershipUpdate = (boardMembership) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE_HANDLE,
+  payload: {
+    boardMembership,
+  },
+});
+
+const deleteBoardMembership = (id) => ({
   type: ActionTypes.BOARD_MEMBERSHIP_DELETE,
   payload: {
     id,
@@ -89,9 +121,18 @@ deleteBoardMembership.failure = (id, error) => ({
   },
 });
 
-export const handleBoardMembershipDelete = (boardMembership) => ({
+const handleBoardMembershipDelete = (boardMembership) => ({
   type: ActionTypes.BOARD_MEMBERSHIP_DELETE_HANDLE,
   payload: {
     boardMembership,
   },
 });
+
+export default {
+  createBoardMembership,
+  handleBoardMembershipCreate,
+  updateBoardMembership,
+  handleBoardMembershipUpdate,
+  deleteBoardMembership,
+  handleBoardMembershipDelete,
+};

client/src/actions/boards.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createBoard = (board) => ({
+const createBoard = (board) => ({
   type: ActionTypes.BOARD_CREATE,
   payload: {
     board,
@@ -24,14 +24,14 @@ createBoard.failure = (localId, error) => ({
   },
 });
 
-export const handleBoardCreate = (board) => ({
+const handleBoardCreate = (board) => ({
   type: ActionTypes.BOARD_CREATE_HANDLE,
   payload: {
     board,
   },
 });
 
-export const fetchBoard = (id) => ({
+const fetchBoard = (id) => ({
   type: ActionTypes.BOARD_FETCH,
   payload: {
     id,
@@ -75,7 +75,7 @@ fetchBoard.failure = (id, error) => ({
   },
 });
 
-export const updateBoard = (id, data) => ({
+const updateBoard = (id, data) => ({
   type: ActionTypes.BOARD_UPDATE,
   payload: {
     id,
@@ -98,14 +98,14 @@ updateBoard.failure = (id, error) => ({
   },
 });
 
-export const handleBoardUpdate = (board) => ({
+const handleBoardUpdate = (board) => ({
   type: ActionTypes.BOARD_UPDATE_HANDLE,
   payload: {
     board,
   },
 });
 
-export const deleteBoard = (id) => ({
+const deleteBoard = (id) => ({
   type: ActionTypes.BOARD_DELETE,
   payload: {
     id,
@@ -127,9 +127,19 @@ deleteBoard.failure = (id, error) => ({
   },
 });
 
-export const handleBoardDelete = (board) => ({
+const handleBoardDelete = (board) => ({
   type: ActionTypes.BOARD_DELETE_HANDLE,
   payload: {
     board,
   },
 });
+
+export default {
+  createBoard,
+  handleBoardCreate,
+  fetchBoard,
+  updateBoard,
+  handleBoardUpdate,
+  deleteBoard,
+  handleBoardDelete,
+};

client/src/actions/cards.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createCard = (card) => ({
+const createCard = (card) => ({
   type: ActionTypes.CARD_CREATE,
   payload: {
     card,
@@ -23,14 +23,14 @@ createCard.failure = (localId, error) => ({
   },
 });
 
-export const handleCardCreate = (card) => ({
+const handleCardCreate = (card) => ({
   type: ActionTypes.CARD_CREATE_HANDLE,
   payload: {
     card,
   },
 });
 
-export const updateCard = (id, data) => ({
+const updateCard = (id, data) => ({
   type: ActionTypes.CARD_UPDATE,
   payload: {
     id,
@@ -53,14 +53,14 @@ updateCard.failure = (id, error) => ({
   },
 });
 
-export const handleCardUpdate = (card) => ({
+const handleCardUpdate = (card) => ({
   type: ActionTypes.CARD_UPDATE_HANDLE,
   payload: {
     card,
   },
 });
 
-export const deleteCard = (id) => ({
+const deleteCard = (id) => ({
   type: ActionTypes.CARD_DELETE,
   payload: {
     id,
@@ -82,9 +82,18 @@ deleteCard.failure = (id, error) => ({
   },
 });
 
-export const handleCardDelete = (card) => ({
+const handleCardDelete = (card) => ({
   type: ActionTypes.CARD_DELETE_HANDLE,
   payload: {
     card,
   },
 });
+
+export default {
+  createCard,
+  handleCardCreate,
+  updateCard,
+  handleCardUpdate,
+  deleteCard,
+  handleCardDelete,
+};

client/src/actions/comment-action.js

@@ -1,69 +0,0 @@
-import ActionTypes from '../constants/ActionTypes';
-
-export const createCommentAction = (action) => ({
-  type: ActionTypes.COMMENT_ACTION_CREATE,
-  payload: {
-    action,
-  },
-});
-
-createCommentAction.success = (localId, action) => ({
-  type: ActionTypes.COMMENT_ACTION_CREATE__SUCCESS,
-  payload: {
-    localId,
-    action,
-  },
-});
-
-createCommentAction.failure = (localId, error) => ({
-  type: ActionTypes.COMMENT_ACTION_CREATE__FAILURE,
-  payload: {
-    localId,
-    error,
-  },
-});
-
-export const updateCommentAction = (id, data) => ({
-  type: ActionTypes.COMMENT_ACTION_UPDATE,
-  payload: {
-    id,
-    data,
-  },
-});
-
-updateCommentAction.success = (action) => ({
-  type: ActionTypes.COMMENT_ACTION_UPDATE__SUCCESS,
-  payload: {
-    action,
-  },
-});
-
-updateCommentAction.failure = (id, error) => ({
-  type: ActionTypes.COMMENT_ACTION_UPDATE__FAILURE,
-  payload: {
-    id,
-    error,
-  },
-});
-
-export const deleteCommentAction = (id) => ({
-  type: ActionTypes.COMMENT_ACTION_DELETE,
-  payload: {
-    id,
-  },
-});
-
-deleteCommentAction.success = (action) => ({
-  type: ActionTypes.COMMENT_ACTION_DELETE__SUCCESS,
-  payload: {
-    action,
-  },
-});
-
-deleteCommentAction.failure = (id, error) => ({
-  type: ActionTypes.COMMENT_ACTION_DELETE__FAILURE,
-  payload: {
-    id,
-    error,
-  },
-});

client/src/actions/comment-activities.js

@@ -0,0 +1,75 @@
+import ActionTypes from '../constants/ActionTypes';
+
+const createCommentActivity = (activity) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_CREATE,
+  payload: {
+    activity,
+  },
+});
+
+createCommentActivity.success = (localId, activity) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_CREATE__SUCCESS,
+  payload: {
+    localId,
+    activity,
+  },
+});
+
+createCommentActivity.failure = (localId, error) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_CREATE__FAILURE,
+  payload: {
+    localId,
+    error,
+  },
+});
+
+const updateCommentActivity = (id, data) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
+updateCommentActivity.success = (activity) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_UPDATE__SUCCESS,
+  payload: {
+    activity,
+  },
+});
+
+updateCommentActivity.failure = (id, error) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_UPDATE__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
+const deleteCommentActivity = (id) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_DELETE,
+  payload: {
+    id,
+  },
+});
+
+deleteCommentActivity.success = (activity) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_DELETE__SUCCESS,
+  payload: {
+    activity,
+  },
+});
+
+deleteCommentActivity.failure = (id, error) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_DELETE__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
+export default {
+  createCommentActivity,
+  updateCommentActivity,
+  deleteCommentActivity,
+};

client/src/actions/core.js

@@ -1,7 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-// eslint-disable-next-line import/prefer-default-export
+const initializeCore = (
-export const initializeCore = (
   user,
   board,
   users,
@@ -16,7 +15,7 @@ export const initializeCore = (
   cardLabels,
   tasks,
   attachments,
-  actions,
+  activities,
   notifications,
 ) => ({
   type: ActionTypes.CORE_INITIALIZE,
@@ -35,7 +34,17 @@ export const initializeCore = (
     cardLabels,
     tasks,
     attachments,
-    actions,
+    activities,
     notifications,
   },
 });
+
+const logout = () => ({
+  type: ActionTypes.LOGOUT,
+  payload: {},
+});
+
+export default {
+  initializeCore,
+  logout,
+};

client/src/actions/entry/action.js

@@ -1,22 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const handleActionCreate = (action) => ({
-  type: EntryActionTypes.ACTION_CREATE_HANDLE,
-  payload: {
-    action,
-  },
-});
-
-export const handleActionUpdate = (action) => ({
-  type: EntryActionTypes.ACTION_UPDATE_HANDLE,
-  payload: {
-    action,
-  },
-});
-
-export const handleActionDelete = (action) => ({
-  type: EntryActionTypes.ACTION_DELETE_HANDLE,
-  payload: {
-    action,
-  },
-});

client/src/actions/entry/actions.js

@@ -1,7 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-// eslint-disable-next-line import/prefer-default-export
-export const fetchActionsInCurrentCard = () => ({
-  type: EntryActionTypes.ACTIONS_IN_CURRENT_CARD_FETCH,
-  payload: {},
-});

client/src/actions/entry/board-membership.js

@@ -1,29 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const createMembershipInCurrentBoard = (data) => ({
-  type: EntryActionTypes.MEMBERSHIP_IN_CURRENT_BOARD_CREATE,
-  payload: {
-    data,
-  },
-});
-
-export const handleBoardMembershipCreate = (boardMembership) => ({
-  type: EntryActionTypes.BOARD_MEMBERSHIP_CREATE_HANDLE,
-  payload: {
-    boardMembership,
-  },
-});
-
-export const deleteBoardMembership = (id) => ({
-  type: EntryActionTypes.BOARD_MEMBERSHIP_DELETE,
-  payload: {
-    id,
-  },
-});
-
-export const handleBoardMembershipDelete = (boardMembership) => ({
-  type: EntryActionTypes.BOARD_MEMBERSHIP_DELETE_HANDLE,
-  payload: {
-    boardMembership,
-  },
-});

client/src/actions/entry/comment-action.js

@@ -1,23 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const createCommentActionInCurrentCard = (data) => ({
-  type: EntryActionTypes.COMMENT_ACTION_IN_CURRENT_CARD_CREATE,
-  payload: {
-    data,
-  },
-});
-
-export const updateCommentAction = (id, data) => ({
-  type: EntryActionTypes.COMMENT_ACTION_UPDATE,
-  payload: {
-    id,
-    data,
-  },
-});
-
-export const deleteCommentAction = (id) => ({
-  type: EntryActionTypes.COMMENT_ACTION_DELETE,
-  payload: {
-    id,
-  },
-});

client/src/actions/entry/core.js

@@ -1,7 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-// eslint-disable-next-line import/prefer-default-export
-export const initializeCore = () => ({
-  type: EntryActionTypes.CORE_INITIALIZE,
-  payload: {},
-});

client/src/actions/entry/index.js

@@ -1,18 +0,0 @@
-export * from './socket';
-export * from './login';
-export * from './core';
-export * from './modal';
-export * from './user';
-export * from './project';
-export * from './project-manager';
-export * from './board';
-export * from './board-membership';
-export * from './label';
-export * from './list';
-export * from './card';
-export * from './task';
-export * from './attachment';
-export * from './actions';
-export * from './action';
-export * from './comment-action';
-export * from './notification';

client/src/actions/entry/login.js

@@ -1,18 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const authenticate = (data) => ({
-  type: EntryActionTypes.AUTHENTICATE,
-  payload: {
-    data,
-  },
-});
-
-export const clearAuthenticateError = () => ({
-  type: EntryActionTypes.AUTHENTICATE_ERROR_CLEAR,
-  payload: {},
-});
-
-export const logout = () => ({
-  type: EntryActionTypes.LOGOUT,
-  payload: {},
-});

client/src/actions/entry/notification.js

@@ -1,22 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const handleNotificationCreate = (notification) => ({
-  type: EntryActionTypes.NOTIFICATION_CREATE_HANDLE,
-  payload: {
-    notification,
-  },
-});
-
-export const deleteNotification = (id) => ({
-  type: EntryActionTypes.NOTIFICATION_DELETE,
-  payload: {
-    id,
-  },
-});
-
-export const handleNotificationDelete = (notification) => ({
-  type: EntryActionTypes.NOTIFICATION_DELETE_HANDLE,
-  payload: {
-    notification,
-  },
-});

client/src/actions/entry/project-manager.js

@@ -1,29 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const createManagerInCurrentProject = (data) => ({
-  type: EntryActionTypes.MANAGER_IN_CURRENT_PROJECT_CREATE,
-  payload: {
-    data,
-  },
-});
-
-export const handleProjectManagerCreate = (projectManager) => ({
-  type: EntryActionTypes.PROJECT_MANAGER_CREATE_HANDLE,
-  payload: {
-    projectManager,
-  },
-});
-
-export const deleteProjectManager = (id) => ({
-  type: EntryActionTypes.PROJECT_MANAGER_DELETE,
-  payload: {
-    id,
-  },
-});
-
-export const handleProjectManagerDelete = (projectManager) => ({
-  type: EntryActionTypes.PROJECT_MANAGER_DELETE_HANDLE,
-  payload: {
-    projectManager,
-  },
-});

client/src/actions/entry/socket.js

@@ -1,11 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const handleSocketDisconnect = () => ({
-  type: EntryActionTypes.SOCKET_DISCONNECT_HANDLE,
-  payload: {},
-});
-
-export const handleSocketReconnect = () => ({
-  type: EntryActionTypes.SOCKET_RECONNECT_HANDLE,
-  payload: {},
-});

client/src/actions/entry/task.js

@@ -1,44 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const createTaskInCurrentCard = (data) => ({
-  type: EntryActionTypes.TASK_IN_CURRENT_CARD_CREATE,
-  payload: {
-    data,
-  },
-});
-
-export const handleTaskCreate = (task) => ({
-  type: EntryActionTypes.TASK_CREATE_HANDLE,
-  payload: {
-    task,
-  },
-});
-
-export const updateTask = (id, data) => ({
-  type: EntryActionTypes.TASK_UPDATE,
-  payload: {
-    id,
-    data,
-  },
-});
-
-export const handleTaskUpdate = (task) => ({
-  type: EntryActionTypes.TASK_UPDATE_HANDLE,
-  payload: {
-    task,
-  },
-});
-
-export const deleteTask = (id) => ({
-  type: EntryActionTypes.TASK_DELETE,
-  payload: {
-    id,
-  },
-});
-
-export const handleTaskDelete = (task) => ({
-  type: EntryActionTypes.TASK_DELETE_HANDLE,
-  payload: {
-    task,
-  },
-});

client/src/actions/entry/user.js

@@ -1,157 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const createUser = (data) => ({
-  type: EntryActionTypes.USER_CREATE,
-  payload: {
-    data,
-  },
-});
-
-export const handleUserCreate = (user) => ({
-  type: EntryActionTypes.USER_CREATE_HANDLE,
-  payload: {
-    user,
-  },
-});
-
-export const clearUserCreateError = () => ({
-  type: EntryActionTypes.USER_CREATE_ERROR_CLEAR,
-  payload: {},
-});
-
-export const updateUser = (id, data) => ({
-  type: EntryActionTypes.USER_UPDATE,
-  payload: {
-    id,
-    data,
-  },
-});
-
-export const updateCurrentUser = (data) => ({
-  type: EntryActionTypes.CURRENT_USER_UPDATE,
-  payload: {
-    data,
-  },
-});
-
-export const handleUserUpdate = (user) => ({
-  type: EntryActionTypes.USER_UPDATE_HANDLE,
-  payload: {
-    user,
-  },
-});
-
-export const updateCurrentUserEmail = (data) => ({
-  type: EntryActionTypes.CURRENT_USER_EMAIL_UPDATE,
-  payload: {
-    data,
-  },
-});
-
-export const clearCurrentUserEmailUpdateError = () => ({
-  type: EntryActionTypes.CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR,
-  payload: {},
-});
-
-export const updateCurrentUserPassword = (data) => ({
-  type: EntryActionTypes.CURRENT_USER_PASSWORD_UPDATE,
-  payload: {
-    data,
-  },
-});
-
-export const clearCurrentUserPasswordUpdateError = () => ({
-  type: EntryActionTypes.CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR,
-  payload: {},
-});
-
-export const updateCurrentUserUsername = (data) => ({
-  type: EntryActionTypes.CURRENT_USER_USERNAME_UPDATE,
-  payload: {
-    data,
-  },
-});
-
-export const clearCurrentUserUsernameUpdateError = () => ({
-  type: EntryActionTypes.CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR,
-  payload: {},
-});
-
-export const updateCurrentUserAvatar = (data) => ({
-  type: EntryActionTypes.CURRENT_USER_AVATAR_UPDATE,
-  payload: {
-    data,
-  },
-});
-
-export const deleteUser = (id) => ({
-  type: EntryActionTypes.USER_DELETE,
-  payload: {
-    id,
-  },
-});
-
-export const handleUserDelete = (user) => ({
-  type: EntryActionTypes.USER_DELETE_HANDLE,
-  payload: {
-    user,
-  },
-});
-
-export const addUserToCard = (id, cardId) => ({
-  type: EntryActionTypes.USER_TO_CARD_ADD,
-  payload: {
-    id,
-    cardId,
-  },
-});
-
-export const addUserToCurrentCard = (id) => ({
-  type: EntryActionTypes.USER_TO_CURRENT_CARD_ADD,
-  payload: {
-    id,
-  },
-});
-
-export const handleUserToCardAdd = (cardMembership) => ({
-  type: EntryActionTypes.USER_TO_CARD_ADD_HANDLE,
-  payload: {
-    cardMembership,
-  },
-});
-
-export const removeUserFromCard = (id, cardId) => ({
-  type: EntryActionTypes.USER_FROM_CARD_REMOVE,
-  payload: {
-    id,
-    cardId,
-  },
-});
-
-export const removeUserFromCurrentCard = (id) => ({
-  type: EntryActionTypes.USER_FROM_CURRENT_CARD_REMOVE,
-  payload: {
-    id,
-  },
-});
-
-export const handleUserFromCardRemove = (cardMembership) => ({
-  type: EntryActionTypes.USER_FROM_CARD_REMOVE_HANDLE,
-  payload: {
-    cardMembership,
-  },
-});
-
-export const addUserToFilterInCurrentBoard = (id) => ({
-  type: EntryActionTypes.USER_TO_FILTER_IN_CURRENT_BOARD_ADD,
-  payload: {
-    id,
-  },
-});
-
-export const removeUserFromFilterInCurrentBoard = (id) => ({
-  type: EntryActionTypes.USER_FROM_FILTER_IN_CURRENT_BOARD_REMOVE,
-  payload: {
-    id,
-  },
-});

client/src/actions/index.js

@@ -1,19 +1,39 @@
-export * from './router';
+import router from './router';
-export * from './socket';
+import socket from './socket';
-export * from './login';
+import login from './login';
-export * from './core';
+import core from './core';
-export * from './modal';
+import modals from './modals';
-export * from './user';
+import users from './users';
-export * from './project';
+import projects from './projects';
-export * from './project-manager';
+import projectManagers from './project-managers';
-export * from './board';
+import boards from './boards';
-export * from './board-membership';
+import boardMemberships from './board-memberships';
-export * from './label';
+import labels from './labels';
-export * from './list';
+import lists from './lists';
-export * from './card';
+import cards from './cards';
-export * from './task';
+import tasks from './tasks';
-export * from './attachment';
+import attachments from './attachments';
-export * from './actions';
+import activities from './activities';
-export * from './action';
+import commentActivities from './comment-activities';
-export * from './comment-action';
+import notifications from './notifications';
-export * from './notification';
+
+export default {
+  ...router,
+  ...socket,
+  ...login,
+  ...core,
+  ...modals,
+  ...users,
+  ...projects,
+  ...projectManagers,
+  ...boards,
+  ...boardMemberships,
+  ...labels,
+  ...lists,
+  ...cards,
+  ...tasks,
+  ...attachments,
+  ...activities,
+  ...commentActivities,
+  ...notifications,
+};

client/src/actions/labels.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createLabel = (label) => ({
+const createLabel = (label) => ({
   type: ActionTypes.LABEL_CREATE,
   payload: {
     label,
@@ -23,14 +23,14 @@ createLabel.failure = (localId, error) => ({
   },
 });
 
-export const handleLabelCreate = (label) => ({
+const handleLabelCreate = (label) => ({
   type: ActionTypes.LABEL_CREATE_HANDLE,
   payload: {
     label,
   },
 });
 
-export const updateLabel = (id, data) => ({
+const updateLabel = (id, data) => ({
   type: ActionTypes.LABEL_UPDATE,
   payload: {
     id,
@@ -53,14 +53,14 @@ updateLabel.failure = (id, error) => ({
   },
 });
 
-export const handleLabelUpdate = (label) => ({
+const handleLabelUpdate = (label) => ({
   type: ActionTypes.LABEL_UPDATE_HANDLE,
   payload: {
     label,
   },
 });
 
-export const deleteLabel = (id) => ({
+const deleteLabel = (id) => ({
   type: ActionTypes.LABEL_DELETE,
   payload: {
     id,
@@ -82,14 +82,14 @@ deleteLabel.failure = (id, error) => ({
   },
 });
 
-export const handleLabelDelete = (label) => ({
+const handleLabelDelete = (label) => ({
   type: ActionTypes.LABEL_DELETE_HANDLE,
   payload: {
     label,
   },
 });
 
-export const addLabelToCard = (id, cardId) => ({
+const addLabelToCard = (id, cardId) => ({
   type: ActionTypes.LABEL_TO_CARD_ADD,
   payload: {
     id,
@@ -113,14 +113,14 @@ addLabelToCard.failure = (id, cardId, error) => ({
   },
 });
 
-export const handleLabelToCardAdd = (cardLabel) => ({
+const handleLabelToCardAdd = (cardLabel) => ({
   type: ActionTypes.LABEL_TO_CARD_ADD_HANDLE,
   payload: {
     cardLabel,
   },
 });
 
-export const removeLabelFromCard = (id, cardId) => ({
+const removeLabelFromCard = (id, cardId) => ({
   type: ActionTypes.LABEL_FROM_CARD_REMOVE,
   payload: {
     id,
@@ -144,14 +144,14 @@ removeLabelFromCard.failure = (id, cardId, error) => ({
   },
 });
 
-export const handleLabelFromCardRemove = (cardLabel) => ({
+const handleLabelFromCardRemove = (cardLabel) => ({
   type: ActionTypes.LABEL_FROM_CARD_REMOVE_HANDLE,
   payload: {
     cardLabel,
   },
 });
 
-export const addLabelToBoardFilter = (id, boardId) => ({
+const addLabelToBoardFilter = (id, boardId) => ({
   type: ActionTypes.LABEL_TO_BOARD_FILTER_ADD,
   payload: {
     id,
@@ -159,10 +159,25 @@ export const addLabelToBoardFilter = (id, boardId) => ({
   },
 });
 
-export const removeLabelFromBoardFilter = (id, boardId) => ({
+const removeLabelFromBoardFilter = (id, boardId) => ({
   type: ActionTypes.LABEL_FROM_BOARD_FILTER_REMOVE,
   payload: {
     id,
     boardId,
   },
 });
+
+export default {
+  createLabel,
+  handleLabelCreate,
+  updateLabel,
+  handleLabelUpdate,
+  deleteLabel,
+  handleLabelDelete,
+  addLabelToCard,
+  handleLabelToCardAdd,
+  removeLabelFromCard,
+  handleLabelFromCardRemove,
+  addLabelToBoardFilter,
+  removeLabelFromBoardFilter,
+};

client/src/actions/lists.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createList = (list) => ({
+const createList = (list) => ({
   type: ActionTypes.LIST_CREATE,
   payload: {
     list,
@@ -23,14 +23,14 @@ createList.failure = (localId, error) => ({
   },
 });
 
-export const handleListCreate = (list) => ({
+const handleListCreate = (list) => ({
   type: ActionTypes.LIST_CREATE_HANDLE,
   payload: {
     list,
   },
 });
 
-export const updateList = (id, data) => ({
+const updateList = (id, data) => ({
   type: ActionTypes.LIST_UPDATE,
   payload: {
     id,
@@ -53,14 +53,14 @@ updateList.failure = (id, error) => ({
   },
 });
 
-export const handleListUpdate = (list) => ({
+const handleListUpdate = (list) => ({
   type: ActionTypes.LIST_UPDATE_HANDLE,
   payload: {
     list,
   },
 });
 
-export const deleteList = (id) => ({
+const deleteList = (id) => ({
   type: ActionTypes.LIST_DELETE,
   payload: {
     id,
@@ -82,9 +82,18 @@ deleteList.failure = (id, error) => ({
   },
 });
 
-export const handleListDelete = (list) => ({
+const handleListDelete = (list) => ({
   type: ActionTypes.LIST_DELETE_HANDLE,
   payload: {
     list,
   },
 });
+
+export default {
+  createList,
+  handleListCreate,
+  updateList,
+  handleListUpdate,
+  deleteList,
+  handleListDelete,
+};

client/src/actions/login.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const authenticate = (data) => ({
+const authenticate = (data) => ({
   type: ActionTypes.AUTHENTICATE,
   payload: {
     data,
@@ -21,12 +21,12 @@ authenticate.failure = (error) => ({
   },
 });
 
-export const clearAuthenticateError = () => ({
+const clearAuthenticateError = () => ({
   type: ActionTypes.AUTHENTICATE_ERROR_CLEAR,
   payload: {},
 });
 
-export const logout = () => ({
+export default {
-  type: ActionTypes.LOGOUT,
+  authenticate,
-  payload: {},
+  clearAuthenticateError,
-});
+};

client/src/actions/modals.js

@@ -1,13 +1,18 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const openModal = (type) => ({
+const openModal = (type) => ({
   type: ActionTypes.MODAL_OPEN,
   payload: {
     type,
   },
 });
 
-export const closeModal = () => ({
+const closeModal = () => ({
   type: ActionTypes.MODAL_CLOSE,
   payload: {},
 });
+
+export default {
+  openModal,
+  closeModal,
+};

client/src/actions/notifications.js

@@ -1,16 +1,16 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const handleNotificationCreate = (notification, users, cards, actions) => ({
+const handleNotificationCreate = (notification, users, cards, activities) => ({
   type: ActionTypes.NOTIFICATION_CREATE_HANDLE,
   payload: {
     notification,
     users,
     cards,
-    actions,
+    activities,
   },
 });
 
-export const deleteNotification = (id) => ({
+const deleteNotification = (id) => ({
   type: ActionTypes.NOTIFICATION_DELETE,
   payload: {
     id,
@@ -32,9 +32,15 @@ deleteNotification.failure = (id, error) => ({
   },
 });
 
-export const handleNotificationDelete = (notification) => ({
+const handleNotificationDelete = (notification) => ({
   type: ActionTypes.NOTIFICATION_DELETE_HANDLE,
   payload: {
     notification,
   },
 });
+
+export default {
+  handleNotificationCreate,
+  deleteNotification,
+  handleNotificationDelete,
+};

client/src/actions/project-managers.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createProjectManager = (projectManager) => ({
+const createProjectManager = (projectManager) => ({
   type: ActionTypes.PROJECT_MANAGER_CREATE,
   payload: {
     projectManager,
@@ -23,7 +23,7 @@ createProjectManager.failure = (localId, error) => ({
   },
 });
 
-export const handleProjectManagerCreate = (
+const handleProjectManagerCreate = (
   projectManager,
   project,
   board,
@@ -38,6 +38,7 @@ export const handleProjectManagerCreate = (
   cardLabels,
   tasks,
   attachments,
+  deletedNotifications,
 ) => ({
   type: ActionTypes.PROJECT_MANAGER_CREATE_HANDLE,
   payload: {
@@ -55,6 +56,7 @@ export const handleProjectManagerCreate = (
     cardLabels,
     tasks,
     attachments,
+    deletedNotifications,
   },
 });
 
@@ -67,7 +69,7 @@ handleProjectManagerCreate.fetchProject = (id, currentUserId, currentBoardId) =>
   },
 });
 
-export const deleteProjectManager = (id, isCurrentUser, isCurrentProject) => ({
+const deleteProjectManager = (id, isCurrentUser, isCurrentProject) => ({
   type: ActionTypes.PROJECT_MANAGER_DELETE,
   payload: {
     id,
@@ -91,7 +93,7 @@ deleteProjectManager.failure = (id, error) => ({
   },
 });
 
-export const handleProjectManagerDelete = (projectManager, isCurrentUser, isCurrentProject) => ({
+const handleProjectManagerDelete = (projectManager, isCurrentUser, isCurrentProject) => ({
   type: ActionTypes.PROJECT_MANAGER_DELETE_HANDLE,
   payload: {
     projectManager,
@@ -99,3 +101,10 @@ export const handleProjectManagerDelete = (projectManager, isCurrentUser, isCurr
     isCurrentProject,
   },
 });
+
+export default {
+  createProjectManager,
+  handleProjectManagerCreate,
+  deleteProjectManager,
+  handleProjectManagerDelete,
+};

client/src/actions/projects.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createProject = (data) => ({
+const createProject = (data) => ({
   type: ActionTypes.PROJECT_CREATE,
   payload: {
     data,
@@ -22,7 +22,7 @@ createProject.failure = (error) => ({
   },
 });
 
-export const handleProjectCreate = (project, users, projectManagers, boards, boardMemberships) => ({
+const handleProjectCreate = (project, users, projectManagers, boards, boardMemberships) => ({
   type: ActionTypes.PROJECT_CREATE_HANDLE,
   payload: {
     project,
@@ -33,7 +33,7 @@ export const handleProjectCreate = (project, users, projectManagers, boards, boa
   },
 });
 
-export const updateProject = (id, data) => ({
+const updateProject = (id, data) => ({
   type: ActionTypes.PROJECT_UPDATE,
   payload: {
     id,
@@ -56,14 +56,14 @@ updateProject.failure = (id, error) => ({
   },
 });
 
-export const handleProjectUpdate = (project) => ({
+const handleProjectUpdate = (project) => ({
   type: ActionTypes.PROJECT_UPDATE_HANDLE,
   payload: {
     project,
   },
 });
 
-export const updateProjectBackgroundImage = (id) => ({
+const updateProjectBackgroundImage = (id) => ({
   type: ActionTypes.PROJECT_BACKGROUND_IMAGE_UPDATE,
   payload: {
     id,
@@ -85,7 +85,7 @@ updateProjectBackgroundImage.failure = (id, error) => ({
   },
 });
 
-export const deleteProject = (id) => ({
+const deleteProject = (id) => ({
   type: ActionTypes.PROJECT_DELETE,
   payload: {
     id,
@@ -107,9 +107,19 @@ deleteProject.failure = (id, error) => ({
   },
 });
 
-export const handleProjectDelete = (project) => ({
+const handleProjectDelete = (project) => ({
   type: ActionTypes.PROJECT_DELETE_HANDLE,
   payload: {
     project,
   },
 });
+
+export default {
+  createProject,
+  handleProjectCreate,
+  updateProject,
+  handleProjectUpdate,
+  updateProjectBackgroundImage,
+  deleteProject,
+  handleProjectDelete,
+};

client/src/actions/router.js

@@ -1,7 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-// eslint-disable-next-line import/prefer-default-export
+const handleLocationChange = (
-export const handleLocationChange = (
   board,
   users,
   projects,
@@ -13,7 +12,7 @@ export const handleLocationChange = (
   cardLabels,
   tasks,
   attachments,
-  notifications,
+  deletedNotifications,
 ) => ({
   type: ActionTypes.LOCATION_CHANGE_HANDLE,
   payload: {
@@ -28,7 +27,7 @@ export const handleLocationChange = (
     cardLabels,
     tasks,
     attachments,
-    notifications,
+    deletedNotifications,
   },
 });
 
@@ -38,3 +37,7 @@ handleLocationChange.fetchBoard = (id) => ({
     id,
   },
 });
+
+export default {
+  handleLocationChange,
+};

client/src/actions/socket.js

@@ -1,11 +1,11 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const handleSocketDisconnect = () => ({
+const handleSocketDisconnect = () => ({
   type: ActionTypes.SOCKET_DISCONNECT_HANDLE,
   payload: {},
 });
 
-export const handleSocketReconnect = (
+const handleSocketReconnect = (
   user,
   board,
   users,
@@ -20,7 +20,7 @@ export const handleSocketReconnect = (
   cardLabels,
   tasks,
   attachments,
-  actions,
+  activities,
   notifications,
 ) => ({
   type: ActionTypes.SOCKET_RECONNECT_HANDLE,
@@ -39,7 +39,7 @@ export const handleSocketReconnect = (
     cardLabels,
     tasks,
     attachments,
-    actions,
+    activities,
     notifications,
   },
 });
@@ -51,3 +51,8 @@ handleSocketReconnect.fetchCore = (currentUserId, currentBoardId) => ({
     currentBoardId,
   },
 });
+
+export default {
+  handleSocketDisconnect,
+  handleSocketReconnect,
+};

client/src/actions/tasks.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createTask = (task) => ({
+const createTask = (task) => ({
   type: ActionTypes.TASK_CREATE,
   payload: {
     task,
@@ -23,14 +23,14 @@ createTask.failure = (localId, error) => ({
   },
 });
 
-export const handleTaskCreate = (task) => ({
+const handleTaskCreate = (task) => ({
   type: ActionTypes.TASK_CREATE_HANDLE,
   payload: {
     task,
   },
 });
 
-export const updateTask = (id, data) => ({
+const updateTask = (id, data) => ({
   type: ActionTypes.TASK_UPDATE,
   payload: {
     id,
@@ -53,14 +53,14 @@ updateTask.failure = (id, error) => ({
   },
 });
 
-export const handleTaskUpdate = (task) => ({
+const handleTaskUpdate = (task) => ({
   type: ActionTypes.TASK_UPDATE_HANDLE,
   payload: {
     task,
   },
 });
 
-export const deleteTask = (id) => ({
+const deleteTask = (id) => ({
   type: ActionTypes.TASK_DELETE,
   payload: {
     id,
@@ -82,9 +82,18 @@ deleteTask.failure = (id, error) => ({
   },
 });
 
-export const handleTaskDelete = (task) => ({
+const handleTaskDelete = (task) => ({
   type: ActionTypes.TASK_DELETE_HANDLE,
   payload: {
     task,
   },
 });
+
+export default {
+  createTask,
+  handleTaskCreate,
+  updateTask,
+  handleTaskUpdate,
+  deleteTask,
+  handleTaskDelete,
+};

client/src/actions/users.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createUser = (data) => ({
+const createUser = (data) => ({
   type: ActionTypes.USER_CREATE,
   payload: {
     data,
@@ -21,19 +21,19 @@ createUser.failure = (error) => ({
   },
 });
 
-export const handleUserCreate = (user) => ({
+const handleUserCreate = (user) => ({
   type: ActionTypes.USER_CREATE_HANDLE,
   payload: {
     user,
   },
 });
 
-export const clearUserCreateError = () => ({
+const clearUserCreateError = () => ({
   type: ActionTypes.USER_CREATE_ERROR_CLEAR,
   payload: {},
 });
 
-export const updateUser = (id, data) => ({
+const updateUser = (id, data) => ({
   type: ActionTypes.USER_UPDATE,
   payload: {
     id,
@@ -56,7 +56,7 @@ updateUser.failure = (id, error) => ({
   },
 });
 
-export const handleUserUpdate = (user, users, isCurrent) => ({
+const handleUserUpdate = (user, users, isCurrent) => ({
   type: ActionTypes.USER_UPDATE_HANDLE,
   payload: {
     user,
@@ -65,7 +65,7 @@ export const handleUserUpdate = (user, users, isCurrent) => ({
   },
 });
 
-export const updateUserEmail = (id, data) => ({
+const updateUserEmail = (id, data) => ({
   type: ActionTypes.USER_EMAIL_UPDATE,
   payload: {
     id,
@@ -88,14 +88,14 @@ updateUserEmail.failure = (id, error) => ({
   },
 });
 
-export const clearUserEmailUpdateError = (id) => ({
+const clearUserEmailUpdateError = (id) => ({
   type: ActionTypes.USER_EMAIL_UPDATE_ERROR_CLEAR,
   payload: {
     id,
   },
 });
 
-export const updateUserPassword = (id, data) => ({
+const updateUserPassword = (id, data) => ({
   type: ActionTypes.USER_PASSWORD_UPDATE,
   payload: {
     id,
@@ -118,14 +118,14 @@ updateUserPassword.failure = (id, error) => ({
   },
 });
 
-export const clearUserPasswordUpdateError = (id) => ({
+const clearUserPasswordUpdateError = (id) => ({
   type: ActionTypes.USER_PASSWORD_UPDATE_ERROR_CLEAR,
   payload: {
     id,
   },
 });
 
-export const updateUserUsername = (id, data) => ({
+const updateUserUsername = (id, data) => ({
   type: ActionTypes.USER_USERNAME_UPDATE,
   payload: {
     id,
@@ -148,14 +148,14 @@ updateUserUsername.failure = (id, error) => ({
   },
 });
 
-export const clearUserUsernameUpdateError = (id) => ({
+const clearUserUsernameUpdateError = (id) => ({
   type: ActionTypes.USER_USERNAME_UPDATE_ERROR_CLEAR,
   payload: {
     id,
   },
 });
 
-export const updateUserAvatar = (id) => ({
+const updateUserAvatar = (id) => ({
   type: ActionTypes.USER_AVATAR_UPDATE,
   payload: {
     id,
@@ -177,7 +177,7 @@ updateUserAvatar.failure = (id, error) => ({
   },
 });
 
-export const deleteUser = (id) => ({
+const deleteUser = (id) => ({
   type: ActionTypes.USER_DELETE,
   payload: {
     id,
@@ -199,14 +199,14 @@ deleteUser.failure = (id, error) => ({
   },
 });
 
-export const handleUserDelete = (user) => ({
+const handleUserDelete = (user) => ({
   type: ActionTypes.USER_DELETE_HANDLE,
   payload: {
     user,
   },
 });
 
-export const addUserToCard = (id, cardId, isCurrent) => ({
+const addUserToCard = (id, cardId, isCurrent) => ({
   type: ActionTypes.USER_TO_CARD_ADD,
   payload: {
     id,
@@ -231,14 +231,14 @@ addUserToCard.failure = (id, cardId, error) => ({
   },
 });
 
-export const handleUserToCardAdd = (cardMembership) => ({
+const handleUserToCardAdd = (cardMembership) => ({
   type: ActionTypes.USER_TO_CARD_ADD_HANDLE,
   payload: {
     cardMembership,
   },
 });
 
-export const removeUserFromCard = (id, cardId) => ({
+const removeUserFromCard = (id, cardId) => ({
   type: ActionTypes.USER_FROM_CARD_REMOVE,
   payload: {
     id,
@@ -262,14 +262,14 @@ removeUserFromCard.failure = (id, cardId, error) => ({
   },
 });
 
-export const handleUserFromCardRemove = (cardMembership) => ({
+const handleUserFromCardRemove = (cardMembership) => ({
   type: ActionTypes.USER_FROM_CARD_REMOVE_HANDLE,
   payload: {
     cardMembership,
   },
 });
 
-export const addUserToBoardFilter = (id, boardId) => ({
+const addUserToBoardFilter = (id, boardId) => ({
   type: ActionTypes.USER_TO_BOARD_FILTER_ADD,
   payload: {
     id,
@@ -277,10 +277,33 @@ export const addUserToBoardFilter = (id, boardId) => ({
   },
 });
 
-export const removeUserFromBoardFilter = (id, boardId) => ({
+const removeUserFromBoardFilter = (id, boardId) => ({
   type: ActionTypes.USER_FROM_BOARD_FILTER_REMOVE,
   payload: {
     id,
     boardId,
   },
 });
+
+export default {
+  createUser,
+  handleUserCreate,
+  clearUserCreateError,
+  updateUser,
+  handleUserUpdate,
+  updateUserEmail,
+  clearUserEmailUpdateError,
+  updateUserPassword,
+  clearUserPasswordUpdateError,
+  updateUserUsername,
+  clearUserUsernameUpdateError,
+  updateUserAvatar,
+  deleteUser,
+  handleUserDelete,
+  addUserToCard,
+  handleUserToCardAdd,
+  removeUserFromCard,
+  handleUserFromCardRemove,
+  addUserToBoardFilter,
+  removeUserFromBoardFilter,
+};

client/src/api/actions.js

@@ -1,36 +0,0 @@
-import socket from './socket';
-
-/* Transformers */
-
-export const transformAction = (action) => ({
-  ...action,
-  createdAt: new Date(action.createdAt),
-});
-
-/* Actions */
-
-const getActions = (cardId, data, headers) =>
-  socket.get(`/cards/${cardId}/actions`, data, headers).then((body) => ({
-    ...body,
-    items: body.items.map(transformAction),
-  }));
-
-/* Event handlers */
-
-const makeHandleActionCreate = (next) => (body) => {
-  next({
-    ...body,
-    item: transformAction(body.item),
-  });
-};
-
-const makeHandleActionUpdate = makeHandleActionCreate;
-
-const makeHandleActionDelete = makeHandleActionCreate;
-
-export default {
-  getActions,
-  makeHandleActionCreate,
-  makeHandleActionUpdate,
-  makeHandleActionDelete,
-};

client/src/api/activities.js

@@ -0,0 +1,36 @@
+import socket from './socket';
+
+/* Transformers */
+
+export const transformActivity = (activity) => ({
+  ...activity,
+  createdAt: new Date(activity.createdAt),
+});
+
+/* Actions */
+
+const getActivities = (cardId, data, headers) =>
+  socket.get(`/cards/${cardId}/actions`, data, headers).then((body) => ({
+    ...body,
+    items: body.items.map(transformActivity),
+  }));
+
+/* Event handlers */
+
+const makeHandleActivityCreate = (next) => (body) => {
+  next({
+    ...body,
+    item: transformActivity(body.item),
+  });
+};
+
+const makeHandleActivityUpdate = makeHandleActivityCreate;
+
+const makeHandleActivityDelete = makeHandleActivityCreate;
+
+export default {
+  getActivities,
+  makeHandleActivityCreate,
+  makeHandleActivityUpdate,
+  makeHandleActivityDelete,
+};

client/src/api/board-memberships.js

@@ -5,10 +5,14 @@ import socket from './socket';
 const createBoardMembership = (boardId, data, headers) =>
   socket.post(`/boards/${boardId}/memberships`, data, headers);
 
+const updateBoardMembership = (id, data, headers) =>
+  socket.patch(`/board-memberships/${id}`, data, headers);
+
 const deleteBoardMembership = (id, headers) =>
   socket.delete(`/board-memberships/${id}`, undefined, headers);
 
 export default {
   createBoardMembership,
+  updateBoardMembership,
   deleteBoardMembership,
 };

client/src/api/cards.js

@@ -78,14 +78,9 @@ const makeHandleCardCreate = (next) => (body) => {
   });
 };
 
-const makeHandleCardUpdate = (next) => (body) => {
+const makeHandleCardUpdate = makeHandleCardCreate;
-  next({
-    ...body,
-    item: transformCard(body.item),
-  });
-};
 
-const makeHandleCardDelete = makeHandleCardUpdate;
+const makeHandleCardDelete = makeHandleCardCreate;
 
 export default {
   getCards,

client/src/api/comment-actions.js

@@ -1,28 +0,0 @@
-import socket from './socket';
-import { transformAction } from './actions';
-
-/* Actions */
-
-const createCommentAction = (cardId, data, headers) =>
-  socket.post(`/cards/${cardId}/comment-actions`, data, headers).then((body) => ({
-    ...body,
-    item: transformAction(body.item),
-  }));
-
-const updateCommentAction = (id, data, headers) =>
-  socket.patch(`/comment-actions/${id}`, data, headers).then((body) => ({
-    ...body,
-    item: transformAction(body.item),
-  }));
-
-const deleteCommentAction = (id, headers) =>
-  socket.delete(`/comment-actions/${id}`, undefined, headers).then((body) => ({
-    ...body,
-    item: transformAction(body.item),
-  }));
-
-export default {
-  createCommentAction,
-  updateCommentAction,
-  deleteCommentAction,
-};

client/src/api/comment-activities.js

@@ -0,0 +1,28 @@
+import socket from './socket';
+import { transformActivity } from './activities';
+
+/* Actions */
+
+const createCommentActivity = (cardId, data, headers) =>
+  socket.post(`/cards/${cardId}/comment-actions`, data, headers).then((body) => ({
+    ...body,
+    item: transformActivity(body.item),
+  }));
+
+const updateCommentActivity = (id, data, headers) =>
+  socket.patch(`/comment-actions/${id}`, data, headers).then((body) => ({
+    ...body,
+    item: transformActivity(body.item),
+  }));
+
+const deleteCommentActivity = (id, headers) =>
+  socket.delete(`/comment-actions/${id}`, undefined, headers).then((body) => ({
+    ...body,
+    item: transformActivity(body.item),
+  }));
+
+export default {
+  createCommentActivity,
+  updateCommentActivity,
+  deleteCommentActivity,
+};

client/src/api/index.js

@@ -13,8 +13,8 @@ import cardMemberships from './card-memberships';
 import cardLabels from './card-labels';
 import tasks from './tasks';
 import attachments from './attachments';
-import actions from './actions';
+import activities from './activities';
-import commentActions from './comment-actions';
+import commentActivities from './comment-activities';
 import notifications from './notifications';
 
 export { http, socket };
@@ -33,7 +33,7 @@ export default {
   ...cardLabels,
   ...tasks,
   ...attachments,
-  ...actions,
+  ...activities,
-  ...commentActions,
+  ...commentActivities,
   ...notifications,
 };

client/src/api/notifications.js

@@ -1,34 +1,61 @@
+import omit from 'lodash/omit';
+
 import socket from './socket';
 import { transformCard } from './cards';
-import { transformAction } from './actions';
+import { transformActivity } from './activities';
+
+/* Transformers */
+
+export const transformNotification = (notification) => ({
+  ...omit(notification, 'actionId'),
+  activityId: notification.actionId,
+});
 
 /* Actions */
 
 const getNotifications = (headers) =>
   socket.get('/notifications', undefined, headers).then((body) => ({
     ...body,
+    items: body.items.map(transformNotification),
     included: {
-      ...body.included,
+      ...omit(body.included, 'actions'),
       cards: body.included.cards.map(transformCard),
-      actions: body.included.actions.map(transformAction),
+      activities: body.included.actions.map(transformActivity),
     },
   }));
 
 const getNotification = (id, headers) =>
   socket.get(`/notifications/${id}`, undefined, headers).then((body) => ({
     ...body,
+    item: transformNotification(body.item),
     included: {
-      ...body.included,
+      ...omit(body.included, 'actions'),
       cards: body.included.cards.map(transformCard),
-      actions: body.included.actions.map(transformAction),
+      activities: body.included.actions.map(transformActivity),
     },
   }));
 
 const updateNotifications = (ids, data, headers) =>
-  socket.patch(`/notifications/${ids.join(',')}`, data, headers);
+  socket.patch(`/notifications/${ids.join(',')}`, data, headers).then((body) => ({
+    ...body,
+    items: body.items.map(transformNotification),
+  }));
+
+/* Event handlers */
+
+const makeHandleNotificationCreate = (next) => (body) => {
+  next({
+    ...body,
+    item: transformNotification(body.item),
+  });
+};
+
+const makeHandleNotificationUpdate = makeHandleNotificationCreate;
 
 export default {
   getNotifications,
   getNotification,
   updateNotifications,
+  makeHandleNotificationCreate,
+  makeHandleNotificationUpdate,
 };

client/src/components/Background/Background.jsx

@@ -9,18 +9,20 @@ import { ProjectBackgroundTypes } from '../../constants/Enums';
 import styles from './Background.module.scss';
 import globalStyles from '../../styles.module.scss';
 
-const Background = ({ type, name, imageUrl }) => (
+function Background({ type, name, imageUrl }) {
-  <div
+  return (
-    className={classNames(
+    <div
-      styles.wrapper,
+      className={classNames(
-      type === ProjectBackgroundTypes.GRADIENT &&
+        styles.wrapper,
-        globalStyles[`background${upperFirst(camelCase(name))}`],
+        type === ProjectBackgroundTypes.GRADIENT &&
-    )}
+          globalStyles[`background${upperFirst(camelCase(name))}`],
-    style={{
+      )}
-      background: type === 'image' && `url("${imageUrl}") center / cover`,
+      style={{
-    }}
+        background: type === 'image' && `url("${imageUrl}") center / cover`,
-  />
+      }}
-);
+    />
+  );
+}
 
 Background.propTypes = {
   type: PropTypes.string.isRequired,

client/src/components/BoardActions/BoardActions.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import Filters from './Filters';
 import Memberships from '../Memberships';
+import BoardMembershipPermissionsSelectStep from '../BoardMembershipPermissionsSelectStep';
 
 import styles from './BoardActions.module.scss';
 
@@ -15,6 +16,7 @@ const BoardActions = React.memo(
     allUsers,
     canEditMemberships,
     onMembershipCreate,
+    onMembershipUpdate,
     onMembershipDelete,
     onUserToFilterAdd,
     onUserFromFilterRemove,
@@ -30,8 +32,10 @@ const BoardActions = React.memo(
           <Memberships
             items={memberships}
             allUsers={allUsers}
+            permissionsSelectStep={BoardMembershipPermissionsSelectStep}
             canEdit={canEditMemberships}
             onCreate={onMembershipCreate}
+            onUpdate={onMembershipUpdate}
             onDelete={onMembershipDelete}
           />
         </div>
@@ -65,6 +69,7 @@ BoardActions.propTypes = {
   /* eslint-enable react/forbid-prop-types */
   canEditMemberships: PropTypes.bool.isRequired,
   onMembershipCreate: PropTypes.func.isRequired,
+  onMembershipUpdate: PropTypes.func.isRequired,
   onMembershipDelete: PropTypes.func.isRequired,
   onUserToFilterAdd: PropTypes.func.isRequired,
   onUserFromFilterRemove: PropTypes.func.isRequired,

client/src/components/BoardKanban/ListAdd.jsx

@@ -15,7 +15,7 @@ const DEFAULT_DATA = {
 const ListAdd = React.memo(({ onCreate, onClose }) => {
   const [t] = useTranslation();
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
-  const [selectNameFieldState, selectNameField] = useToggle();
+  const [focusNameFieldState, focusNameField] = useToggle();
 
   const nameField = useRef(null);
 
@@ -44,16 +44,16 @@ const ListAdd = React.memo(({ onCreate, onClose }) => {
     onCreate(cleanData);
 
     setData(DEFAULT_DATA);
-    selectNameField();
+    focusNameField();
-  }, [onCreate, data, setData, selectNameField]);
+  }, [onCreate, data, setData, focusNameField]);
 
   useEffect(() => {
-    nameField.current.select();
+    nameField.current.focus();
   }, []);
 
   useDidUpdate(() => {
-    nameField.current.select();
+    nameField.current.focus();
-  }, [selectNameFieldState]);
+  }, [focusNameFieldState]);
 
   return (
     <Form className={styles.wrapper} onSubmit={handleSubmit}>

client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.jsx

@@ -0,0 +1,101 @@
+import omit from 'lodash/omit';
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Menu, Radio, Segment } from 'semantic-ui-react';
+import { Popup } from '../../lib/custom-ui';
+
+import { BoardMembershipRoles } from '../../constants/Enums';
+
+import styles from './BoardMembershipPermissionsSelectStep.module.scss';
+
+const BoardMembershipPermissionsSelectStep = React.memo(
+  ({ defaultData, title, buttonContent, onSelect, onBack }) => {
+    const [t] = useTranslation();
+
+    const [data, setData] = useState(() => ({
+      role: BoardMembershipRoles.EDITOR,
+      canComment: null,
+      ...defaultData,
+    }));
+
+    const handleRoleSelectClick = useCallback((role) => {
+      setData((prevData) => ({
+        ...prevData,
+        role,
+        canComment: role === BoardMembershipRoles.EDITOR ? null : !!prevData.canComment,
+      }));
+    }, []);
+
+    const handleSettingChange = useCallback((_, { name: fieldName, checked: value }) => {
+      setData((prevData) => ({
+        ...prevData,
+        [fieldName]: value,
+      }));
+    }, []);
+
+    const handleSubmit = useCallback(() => {
+      onSelect(data.role === BoardMembershipRoles.EDITOR ? omit(data, 'canComment') : data);
+    }, [onSelect, data]);
+
+    return (
+      <>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <Form onSubmit={handleSubmit}>
+            <Menu secondary vertical className={styles.menu}>
+              <Menu.Item
+                active={data.role === BoardMembershipRoles.EDITOR}
+                onClick={() => handleRoleSelectClick(BoardMembershipRoles.EDITOR)}
+              >
+                <div className={styles.menuItemTitle}>{t('common.editor')}</div>
+                <div className={styles.menuItemDescription}>
+                  {t('common.canEditContentOfBoard')}
+                </div>
+              </Menu.Item>
+              <Menu.Item
+                active={data.role === BoardMembershipRoles.VIEWER}
+                onClick={() => handleRoleSelectClick(BoardMembershipRoles.VIEWER)}
+              >
+                <div className={styles.menuItemTitle}>{t('common.viewer')}</div>
+                <div className={styles.menuItemDescription}>{t('common.canOnlyViewBoard')}</div>
+              </Menu.Item>
+            </Menu>
+            {data.role !== BoardMembershipRoles.EDITOR && (
+              <Segment basic className={styles.settings}>
+                <Radio
+                  toggle
+                  name="canComment"
+                  checked={data.canComment}
+                  label={t('common.canComment')}
+                  onChange={handleSettingChange}
+                />
+              </Segment>
+            )}
+            <Button positive content={t(buttonContent)} />
+          </Form>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+BoardMembershipPermissionsSelectStep.propTypes = {
+  defaultData: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  title: PropTypes.string,
+  buttonContent: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+BoardMembershipPermissionsSelectStep.defaultProps = {
+  defaultData: undefined,
+  title: 'common.selectPermissions',
+  buttonContent: 'action.selectPermissions',
+};
+
+export default BoardMembershipPermissionsSelectStep;

client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.module.scss

@@ -0,0 +1,18 @@
+:global(#app) {
+  .menu {
+    margin: 0 auto 8px;
+    width: 100%;
+  }
+
+  .menuItemDescription {
+    opacity: 0.5;
+  }
+
+  .menuItemTitle {
+    margin-bottom: 8px;
+  }
+
+  .settings {
+    margin: 0 0 8px;
+  }
+}

client/src/components/BoardMembershipPermissionsSelectStep/index.js

@@ -0,0 +1,3 @@
+import BoardMembershipPermissionsSelectStep from './BoardMembershipPermissionsSelectStep';
+
+export default BoardMembershipPermissionsSelectStep;

client/src/components/BoardMembershipsStep/BoardMembershipsStep.jsx

@@ -1,9 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Menu } from 'semantic-ui-react';
-import { Popup } from '../../lib/custom-ui';
+import { Input, Popup } from '../../lib/custom-ui';
 
+import { useField } from '../../hooks';
 import Item from './Item';
 
 import styles from './BoardMembershipsStep.module.scss';
@@ -11,6 +12,21 @@ import styles from './BoardMembershipsStep.module.scss';
 const BoardMembershipsStep = React.memo(
   ({ items, currentUserIds, title, onUserSelect, onUserDeselect, onBack }) => {
     const [t] = useTranslation();
+    const [searchValue, handleSearchFieldChange] = useField('');
+    const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+
+    const filteredItems = useMemo(
+      () =>
+        items.filter(
+          ({ user }) =>
+            user.email.includes(search) ||
+            user.name.toLowerCase().includes(search) ||
+            (user.username && user.username.includes(search)),
+        ),
+      [items, search],
+    );
+
+    const searchField = useRef(null);
 
     const handleUserSelect = useCallback(
       (id) => {
@@ -26,22 +42,36 @@ const BoardMembershipsStep = React.memo(
       [onUserDeselect],
     );
 
+    useEffect(() => {
+      searchField.current.focus();
+    }, []);
+
     return (
       <>
         <Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
         <Popup.Content>
-          <Menu secondary vertical className={styles.menu}>
+          <Input
-            {items.map((item) => (
+            fluid
-              <Item
+            ref={searchField}
-                key={item.id}
+            value={searchValue}
-                isPersisted={item.isPersisted}
+            placeholder={t('common.searchMembers')}
-                isActive={currentUserIds.includes(item.user.id)}
+            icon="search"
-                user={item.user}
+            onChange={handleSearchFieldChange}
-                onUserSelect={() => handleUserSelect(item.user.id)}
+          />
-                onUserDeselect={() => handleUserDeselect(item.user.id)}
+          {filteredItems.length > 0 && (
-              />
+            <Menu secondary vertical className={styles.menu}>
-            ))}
+              {filteredItems.map((item) => (
-          </Menu>
+                <Item
+                  key={item.id}
+                  isPersisted={item.isPersisted}
+                  isActive={currentUserIds.includes(item.user.id)}
+                  user={item.user}
+                  onUserSelect={() => handleUserSelect(item.user.id)}
+                  onUserDeselect={() => handleUserDeselect(item.user.id)}
+                />
+              ))}
+            </Menu>
+          )}
         </Popup.Content>
       </>
     );

client/src/components/BoardMembershipsStep/BoardMembershipsStep.module.scss

@@ -1,6 +1,22 @@
 :global(#app) {
   .menu {
-    margin: -7px auto -5px;
+    margin: 8px auto 0;
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
     width: 100%;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
   }
 }

client/src/components/BoardMembershipsStep/Item.module.scss

@@ -2,6 +2,7 @@
   .menuItem {
     display: block;
     margin: 0;
+    overflow: hidden;
     padding: 4px;
   }
 

client/src/components/Boards/AddPopup.jsx

@@ -35,7 +35,7 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
   }, [onCreate, onClose, data]);
 
   useEffect(() => {
-    nameField.current.select();
+    nameField.current.focus();
   }, []);
 
   return (

client/src/components/Card/Card.module.scss

@@ -77,6 +77,7 @@
 
   .cover {
     border-radius: 3px 3px 0 0;
+    margin-bottom: 2px;
     vertical-align: middle;
   }
 
@@ -114,6 +115,7 @@
   }
 
   .wrapper {
+    cursor: auto;
     display: block;
     margin-bottom: 8px;
   }

client/src/components/Card/NameEdit.jsx

@@ -79,7 +79,7 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
 
   useEffect(() => {
     if (isOpened) {
-      field.current.ref.current.select();
+      field.current.ref.current.focus();
     }
   }, [isOpened]);
 

client/src/components/Card/Tasks.jsx

@@ -40,9 +40,7 @@ const Tasks = React.memo(({ items }) => {
         <span
           className={classNames(styles.count, isOpened ? styles.countOpened : styles.countClosed)}
         >
-          {completedItems.length}
+          {completedItems.length}/{items.length}
-          {'/'}
-          {items.length}
         </span>
       </div>
       {isOpened && (

client/src/components/CardModal/Actions/Actions.jsx

@@ -1,105 +0,0 @@
-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 CommentAdd from './CommentAdd';
-import Item from './Item';
-
-import styles from './Actions.module.scss';
-
-const Actions = React.memo(
-  ({
-    items,
-    isFetching,
-    isAllFetched,
-    canEdit,
-    canEditAllComments,
-    onFetch,
-    onCommentCreate,
-    onCommentUpdate,
-    onCommentDelete,
-  }) => {
-    const [t] = useTranslation();
-
-    const handleCommentUpdate = useCallback(
-      (id, data) => {
-        onCommentUpdate(id, data);
-      },
-      [onCommentUpdate],
-    );
-
-    const handleCommentDelete = useCallback(
-      (id) => {
-        onCommentDelete(id);
-      },
-      [onCommentDelete],
-    );
-
-    return (
-      <>
-        {canEdit && (
-          <div className={styles.contentModule}>
-            <div className={styles.moduleWrapper}>
-              <Icon name="comment outline" className={styles.moduleIcon} />
-              <div className={styles.moduleHeader}>{t('common.addComment')}</div>
-              <CommentAdd 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}
-                      canEdit={(item.user.isCurrent && canEdit) || canEditAllComments}
-                      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,
-  canEdit: PropTypes.bool.isRequired,
-  canEditAllComments: PropTypes.bool.isRequired,
-  onFetch: PropTypes.func.isRequired,
-  onCommentCreate: PropTypes.func.isRequired,
-  onCommentUpdate: PropTypes.func.isRequired,
-  onCommentDelete: PropTypes.func.isRequired,
-};
-
-export default Actions;

client/src/components/CardModal/Actions/index.js

@@ -1,3 +0,0 @@
-import Actions from './Actions';
-
-export default Actions;

client/src/components/CardModal/Activities/Activities.jsx

@@ -0,0 +1,112 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Comment, Icon, Loader, Visibility } from 'semantic-ui-react';
+
+import { ActivityTypes } from '../../../constants/Enums';
+import CommentAdd from './CommentAdd';
+import Item from './Item';
+
+import styles from './Activities.module.scss';
+
+const Activities = React.memo(
+  ({
+    items,
+    isFetching,
+    isAllFetched,
+    isDetailsVisible,
+    isDetailsFetching,
+    canEdit,
+    canEditAllComments,
+    onFetch,
+    onDetailsToggle,
+    onCommentCreate,
+    onCommentUpdate,
+    onCommentDelete,
+  }) => {
+    const [t] = useTranslation();
+
+    const handleToggleDetailsClick = useCallback(() => {
+      onDetailsToggle(!isDetailsVisible);
+    }, [isDetailsVisible, onDetailsToggle]);
+
+    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="list ul" className={styles.moduleIcon} />
+          <div className={styles.moduleHeader}>
+            {t('common.actions')}
+            <Button
+              content={isDetailsVisible ? t('action.hideDetails') : t('action.showDetails')}
+              className={styles.toggleButton}
+              onClick={handleToggleDetailsClick}
+            />
+          </div>
+          {canEdit && <CommentAdd onCreate={onCommentCreate} />}
+          <div className={styles.wrapper}>
+            <Comment.Group>
+              {items.map((item) =>
+                item.type === ActivityTypes.COMMENT_CARD ? (
+                  <Item.Comment
+                    key={item.id}
+                    data={item.data}
+                    createdAt={item.createdAt}
+                    isPersisted={item.isPersisted}
+                    user={item.user}
+                    canEdit={(item.user.isCurrent && canEdit) || canEditAllComments}
+                    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 || isDetailsFetching ? (
+            <Loader active inverted inline="centered" size="small" className={styles.loader} />
+          ) : (
+            !isAllFetched && <Visibility fireOnMount onOnScreen={onFetch} />
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+Activities.propTypes = {
+  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  isFetching: PropTypes.bool.isRequired,
+  isAllFetched: PropTypes.bool.isRequired,
+  isDetailsVisible: PropTypes.bool.isRequired,
+  isDetailsFetching: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
+  canEditAllComments: PropTypes.bool.isRequired,
+  onFetch: PropTypes.func.isRequired,
+  onDetailsToggle: PropTypes.func.isRequired,
+  onCommentCreate: PropTypes.func.isRequired,
+  onCommentUpdate: PropTypes.func.isRequired,
+  onCommentDelete: PropTypes.func.isRequired,
+};
+
+export default Activities;

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

@@ -8,12 +8,14 @@
   }
 
   .moduleHeader {
+    align-items: center;
     color: #17394d;
+    display: flex;
     font-size: 16px;
     font-weight: bold;
-    line-height: 20px;
+    height: 36px;
+    justify-content: space-between;
     margin: 0 0 4px;
-    padding: 8px 0;
   }
 
   .moduleIcon {
@@ -33,6 +35,24 @@
     position: relative;
   }
 
+  .toggleButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    float: right;
+    font-weight: normal;
+    margin-right: 0;
+    padding: 6px 11px;
+    text-align: left;
+    text-decoration: underline;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
   .wrapper {
     margin-left: -40px;
     margin-top: 12px;

client/src/components/CardModal/Activities/CommentAdd.jsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import TextareaAutosize from 'react-textarea-autosize';
 import { Button, Form, TextArea } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../../lib/hooks';
 
-import { useForm } from '../../../hooks';
+import { useClosableForm, useForm } from '../../../hooks';
 
 import styles from './CommentAdd.module.scss';
 
@@ -14,10 +15,16 @@ const DEFAULT_DATA = {
 
 const CommentAdd = React.memo(({ onCreate }) => {
   const [t] = useTranslation();
+  const [isOpened, setIsOpened] = useState(false);
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
+  const [selectTextFieldState, selectTextField] = useToggle();
 
   const textField = useRef(null);
 
+  const close = useCallback(() => {
+    setIsOpened(false);
+  }, []);
+
   const submit = useCallback(() => {
     const cleanData = {
       ...data,
@@ -32,7 +39,12 @@ const CommentAdd = React.memo(({ onCreate }) => {
     onCreate(cleanData);
 
     setData(DEFAULT_DATA);
-  }, [onCreate, data, setData]);
+    selectTextField();
+  }, [onCreate, data, setData, selectTextField]);
+
+  const handleFieldFocus = useCallback(() => {
+    setIsOpened(true);
+  }, []);
 
   const handleFieldKeyDown = useCallback(
     (event) => {
@@ -43,10 +55,16 @@ const CommentAdd = React.memo(({ onCreate }) => {
     [submit],
   );
 
+  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(close);
+
   const handleSubmit = useCallback(() => {
     submit();
   }, [submit]);
 
+  useDidUpdate(() => {
+    textField.current.ref.current.focus();
+  }, [selectTextFieldState]);
+
   return (
     <Form onSubmit={handleSubmit}>
       <TextArea
@@ -55,15 +73,24 @@ const CommentAdd = React.memo(({ onCreate }) => {
         name="text"
         value={data.text}
         placeholder={t('common.writeComment')}
-        minRows={3}
+        minRows={isOpened ? 3 : 1}
         spellCheck={false}
         className={styles.field}
+        onFocus={handleFieldFocus}
         onKeyDown={handleFieldKeyDown}
         onChange={handleFieldChange}
+        onBlur={handleFieldBlur}
       />
-      <div className={styles.controls}>
+      {isOpened && (
-        <Button positive content={t('action.addComment')} disabled={!data.text} />
+        <div className={styles.controls}>
-      </div>
+          <Button
+            positive
+            content={t('action.addComment')}
+            onMouseOver={handleControlMouseOver}
+            onMouseOut={handleControlMouseOut}
+          />
+        </div>
+      )}
     </Form>
   );
 });

client/src/components/CardModal/Activities/CommentEdit.jsx

@@ -76,7 +76,7 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
 
   useEffect(() => {
     if (isOpened) {
-      textField.current.ref.current.select();
+      textField.current.ref.current.focus();
     }
   }, [isOpened]);
 

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

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { useTranslation, Trans } from 'react-i18next';
 import { Comment } from 'semantic-ui-react';
 
-import { ActionTypes } from '../../../constants/Enums';
+import { ActivityTypes } from '../../../constants/Enums';
 import ItemComment from './ItemComment';
 import User from '../../User';
 
@@ -16,7 +16,7 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
   let contentNode;
 
   switch (type) {
-    case ActionTypes.CREATE_CARD:
+    case ActivityTypes.CREATE_CARD:
       contentNode = (
         <Trans
           i18nKey="common.userAddedThisCardToList"
@@ -34,7 +34,7 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
       );
 
       break;
-    case ActionTypes.MOVE_CARD:
+    case ActivityTypes.MOVE_CARD:
       contentNode = (
         <Trans
           i18nKey="common.userMovedThisCardFromListToList"

client/src/components/CardModal/Activities/ItemComment.jsx

@@ -38,9 +38,9 @@ const ItemComment = React.memo(
           </div>
           <CommentEdit ref={commentEdit} defaultData={data} onUpdate={onUpdate}>
             <>
-              <Markdown linkTarget="_blank" className={styles.text}>
+              <div className={styles.text}>
-                {data.text}
+                <Markdown linkTarget="_blank">{data.text}</Markdown>
-              </Markdown>
+              </div>
               {canEdit && (
                 <Comment.Actions>
                   <Comment.Action

client/src/components/CardModal/Activities/ItemComment.module.scss

@@ -34,13 +34,6 @@
     max-width: 100%;
     overflow: hidden;
     padding: 8px 12px;
-    text-overflow: ellipsis;
-    white-space: pre-line;
-    word-break: break-word;
-
-    img {
-      max-width: 100%;
-    }
   }
 
   .title {

client/src/components/CardModal/Activities/index.js

@@ -0,0 +1,3 @@
+import Activities from './Activities';
+
+export default Activities;

client/src/components/CardModal/AttachmentAddZone/TextFileAddModal.jsx

@@ -37,7 +37,7 @@ const TextFileAddModal = React.memo(({ content, onCreate, onClose }) => {
   }, [content, onCreate, onClose, data]);
 
   useEffect(() => {
-    nameField.current.select();
+    nameField.current.focus();
   }, []);
 
   return (

client/src/components/CardModal/Attachments/Attachments.jsx

@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import { Gallery, Item as GalleryItem } from 'react-photoswipe-gallery';
 import { Button } from 'semantic-ui-react';
 import { useToggle } from '../../../lib/hooks';
 
@@ -8,81 +10,154 @@ import Item from './Item';
 
 import styles from './Attachments.module.scss';
 
-const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) => {
+const INITIALLY_VISIBLE = 4;
-  const [t] = useTranslation();
-  const [isOpened, toggleOpened] = useToggle();
 
-  const handleToggleClick = useCallback(() => {
+const Attachments = React.memo(
-    toggleOpened();
+  ({ items, canEdit, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
-  }, [toggleOpened]);
+    const [t] = useTranslation();
+    const [isAllVisible, toggleAllVisible] = useToggle();
 
-  const handleCoverSelect = useCallback(
+    const handleCoverSelect = useCallback(
-    (id) => {
+      (id) => {
-      onCoverUpdate(id);
+        onCoverUpdate(id);
-    },
+      },
-    [onCoverUpdate],
+      [onCoverUpdate],
-  );
+    );
 
-  const handleCoverDeselect = useCallback(() => {
+    const handleCoverDeselect = useCallback(() => {
-    onCoverUpdate(null);
+      onCoverUpdate(null);
-  }, [onCoverUpdate]);
+    }, [onCoverUpdate]);
 
-  const handleUpdate = useCallback(
+    const handleUpdate = useCallback(
-    (id, data) => {
+      (id, data) => {
-      onUpdate(id, data);
+        onUpdate(id, data);
-    },
+      },
-    [onUpdate],
+      [onUpdate],
-  );
+    );
 
-  const handleDelete = useCallback(
+    const handleDelete = useCallback(
-    (id) => {
+      (id) => {
-      onDelete(id);
+        onDelete(id);
-    },
+      },
-    [onDelete],
+      [onDelete],
-  );
+    );
 
-  const visibleItems = isOpened ? items : items.slice(0, 4);
+    const handleBeforeGalleryOpen = useCallback(
+      (gallery) => {
+        onGalleryOpen();
 
-  return (
+        gallery.on('destroy', () => {
-    <>
+          onGalleryClose();
-      {visibleItems.map((item) => (
+        });
-        <Item
+      },
+      [onGalleryOpen, onGalleryClose],
+    );
+
+    const handleToggleAllVisibleClick = useCallback(() => {
+      toggleAllVisible();
+    }, [toggleAllVisible]);
+
+    const galleryItemsNode = items.map((item, index) => {
+      const isPdf = item.url && item.url.endsWith('.pdf');
+
+      let props;
+      if (item.image) {
+        props = item.image;
+      } else {
+        props = {
+          content: isPdf ? (
+            // eslint-disable-next-line jsx-a11y/alt-text
+            <object
+              data={item.url}
+              type="application/pdf"
+              className={classNames(styles.content, styles.contentPdf)}
+            />
+          ) : (
+            <span className={classNames(styles.content, styles.contentError)}>
+              {t('common.thereIsNoPreviewAvailableForThisAttachment')}
+            </span>
+          ),
+        };
+      }
+
+      const isVisible = isAllVisible || index < INITIALLY_VISIBLE;
+
+      return (
+        <GalleryItem
+          {...props} // eslint-disable-line react/jsx-props-no-spreading
           key={item.id}
-          name={item.name}
+          original={item.url}
-          url={item.url}
+          caption={item.name}
-          coverUrl={item.coverUrl}
+        >
-          createdAt={item.createdAt}
+          {({ ref, open }) =>
-          isCover={item.isCover}
+            isVisible ? (
-          isPersisted={item.isPersisted}
+              <Item
-          onCoverSelect={() => handleCoverSelect(item.id)}
+                ref={ref}
-          onCoverDeselect={handleCoverDeselect}
+                name={item.name}
-          onUpdate={(data) => handleUpdate(item.id, data)}
+                url={item.url}
-          onDelete={() => handleDelete(item.id)}
+                coverUrl={item.coverUrl}
-        />
+                createdAt={item.createdAt}
-      ))}
+                isCover={item.isCover}
-      {items.length > 4 && (
+                isPersisted={item.isPersisted}
-        <Button
+                canEdit={canEdit}
-          fluid
+                onClick={item.image || isPdf ? open : undefined}
-          content={
+                onCoverSelect={() => handleCoverSelect(item.id)}
-            isOpened
+                onCoverDeselect={handleCoverDeselect}
-              ? t('action.showFewerAttachments')
+                onUpdate={(data) => handleUpdate(item.id, data)}
-              : t('action.showAllAttachments', {
+                onDelete={() => handleDelete(item.id)}
-                  hidden: items.length - visibleItems.length,
+              />
-                })
+            ) : (
+              <span ref={ref} />
+            )
           }
-          className={styles.toggleButton}
+        </GalleryItem>
-          onClick={handleToggleClick}
+      );
-        />
+    });
-      )}
+
-    </>
+    return (
-  );
+      <>
-});
+        <Gallery
+          withCaption
+          withDownloadButton
+          options={{
+            showHideAnimationType: 'none',
+            closeTitle: '',
+            zoomTitle: '',
+            arrowPrevTitle: '',
+            arrowNextTitle: '',
+            errorMsg: '',
+          }}
+          onBeforeOpen={handleBeforeGalleryOpen}
+        >
+          {galleryItemsNode}
+        </Gallery>
+        {items.length > INITIALLY_VISIBLE && (
+          <Button
+            fluid
+            content={
+              isAllVisible
+                ? t('action.showFewerAttachments')
+                : t('action.showAllAttachments', {
+                    hidden: items.length - INITIALLY_VISIBLE,
+                  })
+            }
+            className={styles.toggleButton}
+            onClick={handleToggleAllVisibleClick}
+          />
+        )}
+      </>
+    );
+  },
+);
 
 Attachments.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  canEdit: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onCoverUpdate: PropTypes.func.isRequired,
+  onGalleryOpen: PropTypes.func.isRequired,
+  onGalleryClose: PropTypes.func.isRequired,
 };
 
 export default Attachments;

client/src/components/CardModal/Attachments/Attachments.module.scss

@@ -1,4 +1,26 @@
 :global(#app) {
+  .content {
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .contentPdf {
+    height: 100%;
+    width: 1120px;
+  }
+
+  .contentError {
+    color: #fff;
+    font-size: 20px;
+    font-weight: 700;
+    height: 20px;
+    width: 470px;
+  }
+
   .toggleButton {
     background: transparent;
     box-shadow: none;

client/src/components/CardModal/Attachments/Item.jsx

@@ -8,24 +8,33 @@ import EditPopup from './EditPopup';
 
 import styles from './Item.module.scss';
 
-const Item = React.memo(
+const Item = React.forwardRef(
-  ({
+  (
-    name,
+    {
-    url,
+      name,
-    coverUrl,
+      url,
-    createdAt,
+      coverUrl,
-    isCover,
+      createdAt,
-    isPersisted,
+      isCover,
-    onCoverSelect,
+      isPersisted,
-    onCoverDeselect,
+      canEdit,
-    onUpdate,
+      onCoverSelect,
-    onDelete,
+      onCoverDeselect,
-  }) => {
+      onClick,
+      onUpdate,
+      onDelete,
+    },
+    ref,
+  ) => {
     const [t] = useTranslation();
 
     const handleClick = useCallback(() => {
-      window.open(url, '_blank');
+      if (onClick) {
-    }, [url]);
+        onClick();
+      } else {
+        window.open(url, '_blank');
+      }
+    }, [url, onClick]);
 
     const handleToggleCoverClick = useCallback(
       (event) => {
@@ -54,7 +63,7 @@ const Item = React.memo(
     return (
       /* eslint-disable jsx-a11y/click-events-have-key-events,
                         jsx-a11y/no-static-element-interactions */
-      <div className={styles.wrapper} onClick={handleClick}>
+      <div ref={ref} className={styles.wrapper} onClick={handleClick}>
         {/* eslint-enable jsx-a11y/click-events-have-key-events,
                           jsx-a11y/no-static-element-interactions */}
         <div
@@ -88,7 +97,7 @@ const Item = React.memo(
               value: createdAt,
             })}
           </span>
-          {coverUrl && (
+          {coverUrl && canEdit && (
             <span className={styles.options}>
               <button type="button" className={styles.option} onClick={handleToggleCoverClick}>
                 <Icon
@@ -110,17 +119,19 @@ const Item = React.memo(
             </span>
           )}
         </div>
-        <EditPopup
+        {canEdit && (
-          defaultData={{
+          <EditPopup
-            name,
+            defaultData={{
-          }}
+              name,
-          onUpdate={onUpdate}
+            }}
-          onDelete={onDelete}
+            onUpdate={onUpdate}
-        >
+            onDelete={onDelete}
-          <Button className={classNames(styles.button, styles.target)}>
+          >
-            <Icon fitted name="pencil" size="small" />
+            <Button className={classNames(styles.button, styles.target)}>
-          </Button>
+              <Icon fitted name="pencil" size="small" />
-        </EditPopup>
+            </Button>
+          </EditPopup>
+        )}
       </div>
     );
   },
@@ -133,6 +144,8 @@ Item.propTypes = {
   createdAt: PropTypes.instanceOf(Date),
   isCover: PropTypes.bool.isRequired,
   isPersisted: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
+  onClick: PropTypes.func,
   onCoverSelect: PropTypes.func.isRequired,
   onCoverDeselect: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
@@ -143,6 +156,7 @@ Item.defaultProps = {
   url: undefined,
   coverUrl: undefined,
   createdAt: undefined,
+  onClick: undefined,
 };
 
-export default Item;
+export default React.memo(Item);

client/src/components/CardModal/CardModal.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -11,7 +11,7 @@ import Tasks from './Tasks';
 import Attachments from './Attachments';
 import AttachmentAddZone from './AttachmentAddZone';
 import AttachmentAddPopup from './AttachmentAddPopup';
-import Actions from './Actions';
+import Activities from './Activities';
 import User from '../User';
 import Label from '../Label';
 import DueDate from '../DueDate';
@@ -32,8 +32,10 @@ const CardModal = React.memo(
     dueDate,
     timer,
     isSubscribed,
-    isActionsFetching,
+    isActivitiesFetching,
-    isAllActionsFetched,
+    isAllActivitiesFetched,
+    isActivitiesDetailsVisible,
+    isActivitiesDetailsFetching,
     listId,
     boardId,
     projectId,
@@ -41,12 +43,13 @@ const CardModal = React.memo(
     labels,
     tasks,
     attachments,
-    actions,
+    activities,
     allProjectsToLists,
     allBoardMemberships,
     allLabels,
     canEdit,
-    canEditAllCommentActions,
+    canEditCommentActivities,
+    canEditAllCommentActivities,
     onUpdate,
     onMove,
     onTransfer,
@@ -61,18 +64,22 @@ const CardModal = React.memo(
     onLabelDelete,
     onTaskCreate,
     onTaskUpdate,
+    onTaskMove,
     onTaskDelete,
     onAttachmentCreate,
     onAttachmentUpdate,
     onAttachmentDelete,
-    onActionsFetch,
+    onActivitiesFetch,
-    onCommentActionCreate,
+    onActivitiesDetailsToggle,
-    onCommentActionUpdate,
+    onCommentActivityCreate,
-    onCommentActionDelete,
+    onCommentActivityUpdate,
+    onCommentActivityDelete,
     onClose,
   }) => {
     const [t] = useTranslation();
 
+    const isGalleryOpened = useRef(false);
+
     const handleNameUpdate = useCallback(
       (newName) => {
         onUpdate({
@@ -124,6 +131,22 @@ const CardModal = React.memo(
       });
     }, [isSubscribed, onUpdate]);
 
+    const handleGalleryOpen = useCallback(() => {
+      isGalleryOpened.current = true;
+    }, []);
+
+    const handleGalleryClose = useCallback(() => {
+      isGalleryOpened.current = false;
+    }, []);
+
+    const handleClose = useCallback(() => {
+      if (isGalleryOpened.current) {
+        return;
+      }
+
+      onClose();
+    }, [onClose]);
+
     const userIds = users.map((user) => user.id);
     const labelIds = labels.map((label) => label.id);
 
@@ -280,7 +303,10 @@ const CardModal = React.memo(
                   {canEdit ? (
                     <DescriptionEdit defaultValue={description} onUpdate={handleDescriptionUpdate}>
                       {description ? (
-                        <button type="button" className={styles.descriptionText}>
+                        <button
+                          type="button"
+                          className={classNames(styles.descriptionText, styles.cursorPointer)}
+                        >
                           <Markdown linkStopPropagation linkTarget="_blank">
                             {description}
                           </Markdown>
@@ -313,6 +339,7 @@ const CardModal = React.memo(
                     canEdit={canEdit}
                     onCreate={onTaskCreate}
                     onUpdate={onTaskUpdate}
+                    onMove={onTaskMove}
                     onDelete={onTaskDelete}
                   />
                 </div>
@@ -325,23 +352,29 @@ const CardModal = React.memo(
                   <div className={styles.moduleHeader}>{t('common.attachments')}</div>
                   <Attachments
                     items={attachments}
+                    canEdit={canEdit}
                     onUpdate={onAttachmentUpdate}
                     onDelete={onAttachmentDelete}
                     onCoverUpdate={handleCoverUpdate}
+                    onGalleryOpen={handleGalleryOpen}
+                    onGalleryClose={handleGalleryClose}
                   />
                 </div>
               </div>
             )}
-            <Actions
+            <Activities
-              items={actions}
+              items={activities}
-              isFetching={isActionsFetching}
+              isFetching={isActivitiesFetching}
-              isAllFetched={isAllActionsFetched}
+              isAllFetched={isAllActivitiesFetched}
-              canEdit={canEdit}
+              isDetailsVisible={isActivitiesDetailsVisible}
-              canEditAllComments={canEditAllCommentActions}
+              isDetailsFetching={isActivitiesDetailsFetching}
-              onFetch={onActionsFetch}
+              canEdit={canEditCommentActivities}
-              onCommentCreate={onCommentActionCreate}
+              canEditAllComments={canEditAllCommentActivities}
-              onCommentUpdate={onCommentActionUpdate}
+              onFetch={onActivitiesFetch}
-              onCommentDelete={onCommentActionDelete}
+              onDetailsToggle={onActivitiesDetailsToggle}
+              onCommentCreate={onCommentActivityCreate}
+              onCommentUpdate={onCommentActivityUpdate}
+              onCommentDelete={onCommentActivityDelete}
             />
           </Grid.Column>
           {canEdit && (
@@ -445,7 +478,7 @@ const CardModal = React.memo(
     );
 
     return (
-      <Modal open closeIcon size="small" centered={false} onClose={onClose}>
+      <Modal open closeIcon centered={false} onClose={handleClose} className={styles.wrapper}>
         {canEdit ? (
           <AttachmentAddZone onCreate={onAttachmentCreate}>{contentNode}</AttachmentAddZone>
         ) : (
@@ -462,8 +495,10 @@ CardModal.propTypes = {
   dueDate: PropTypes.instanceOf(Date),
   timer: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   isSubscribed: PropTypes.bool.isRequired,
-  isActionsFetching: PropTypes.bool.isRequired,
+  isActivitiesFetching: PropTypes.bool.isRequired,
-  isAllActionsFetched: PropTypes.bool.isRequired,
+  isAllActivitiesFetched: PropTypes.bool.isRequired,
+  isActivitiesDetailsVisible: PropTypes.bool.isRequired,
+  isActivitiesDetailsFetching: PropTypes.bool.isRequired,
   listId: PropTypes.string.isRequired,
   boardId: PropTypes.string.isRequired,
   projectId: PropTypes.string.isRequired,
@@ -472,13 +507,14 @@ CardModal.propTypes = {
   labels: PropTypes.array.isRequired,
   tasks: PropTypes.array.isRequired,
   attachments: PropTypes.array.isRequired,
-  actions: PropTypes.array.isRequired,
+  activities: PropTypes.array.isRequired,
   allProjectsToLists: PropTypes.array.isRequired,
   allBoardMemberships: PropTypes.array.isRequired,
   allLabels: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   canEdit: PropTypes.bool.isRequired,
-  canEditAllCommentActions: PropTypes.bool.isRequired,
+  canEditCommentActivities: PropTypes.bool.isRequired,
+  canEditAllCommentActivities: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,
   onTransfer: PropTypes.func.isRequired,
@@ -493,14 +529,16 @@ CardModal.propTypes = {
   onLabelDelete: PropTypes.func.isRequired,
   onTaskCreate: PropTypes.func.isRequired,
   onTaskUpdate: PropTypes.func.isRequired,
+  onTaskMove: PropTypes.func.isRequired,
   onTaskDelete: PropTypes.func.isRequired,
   onAttachmentCreate: PropTypes.func.isRequired,
   onAttachmentUpdate: PropTypes.func.isRequired,
   onAttachmentDelete: PropTypes.func.isRequired,
-  onActionsFetch: PropTypes.func.isRequired,
+  onActivitiesFetch: PropTypes.func.isRequired,
-  onCommentActionCreate: PropTypes.func.isRequired,
+  onActivitiesDetailsToggle: PropTypes.func.isRequired,
-  onCommentActionUpdate: PropTypes.func.isRequired,
+  onCommentActivityCreate: PropTypes.func.isRequired,
-  onCommentActionDelete: PropTypes.func.isRequired,
+  onCommentActivityUpdate: PropTypes.func.isRequired,
+  onCommentActivityDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 

client/src/components/CardModal/CardModal.module.scss

@@ -64,6 +64,10 @@
     padding: 8px 8px 0 16px;
   }
 
+  .cursorPointer {
+    cursor: pointer;
+  }
+
   .dueDate {
     background: rgba(9, 30, 66, 0.04);
     border: none;
@@ -114,21 +118,13 @@
     background: transparent;
     border: none;
     color: #17394d;
-    cursor: pointer;
-    line-height: 1.5;
     font-size: 15px;
     margin-bottom: 8px;
     outline: none;
     overflow: hidden;
-    overflow-wrap: break-word;
     padding: 0;
     text-align: left;
-    white-space: pre-line;
     width: 100%;
-
-    img {
-      max-width: 100%;
-    }
   }
 
   .grid {
@@ -200,4 +196,14 @@
     margin: 0 8px 4px 0;
     text-transform: uppercase;
   }
+
+  .wrapper {
+    width: 880px;
+  }
+
+  @media (max-width: 926px) {
+    .wrapper {
+      width: 95%;
+    }
+  }
 }

client/src/components/CardModal/DescriptionEdit.jsx

@@ -66,7 +66,7 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
 
   useEffect(() => {
     if (isOpened) {
-      field.current.ref.current.select();
+      field.current.ref.current.focus();
     }
   }, [isOpened]);
 

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

@@ -17,7 +17,7 @@ const Add = React.forwardRef(({ children, onCreate }, ref) => {
   const [t] = useTranslation();
   const [isOpened, setIsOpened] = useState(false);
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
-  const [selectNameFieldState, selectNameField] = useToggle();
+  const [focusNameFieldState, focusNameField] = useToggle();
 
   const nameField = useRef(null);
 
@@ -43,8 +43,8 @@ const Add = React.forwardRef(({ children, onCreate }, ref) => {
     onCreate(cleanData);
 
     setData(DEFAULT_DATA);
-    selectNameField();
+    focusNameField();
-  }, [onCreate, data, setData, selectNameField]);
+  }, [onCreate, data, setData, focusNameField]);
 
   useImperativeHandle(
     ref,
@@ -81,13 +81,13 @@ const Add = React.forwardRef(({ children, onCreate }, ref) => {
 
   useEffect(() => {
     if (isOpened) {
-      nameField.current.ref.current.select();
+      nameField.current.ref.current.focus();
     }
   }, [isOpened]);
 
   useDidUpdate(() => {
-    nameField.current.ref.current.select();
+    nameField.current.ref.current.focus();
-  }, [selectNameFieldState]);
+  }, [focusNameFieldState]);
 
   if (!isOpened) {
     return React.cloneElement(children, {

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

@@ -1,6 +1,8 @@
 import React, { useCallback, useRef } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Draggable } from 'react-beautiful-dnd';
 import { Button, Checkbox, Icon } from 'semantic-ui-react';
 
 import NameEdit from './NameEdit';
@@ -8,72 +10,85 @@ import ActionsPopup from './ActionsPopup';
 
 import styles from './Item.module.scss';
 
-const Item = React.memo(({ name, isCompleted, isPersisted, canEdit, onUpdate, onDelete }) => {
+const Item = React.memo(
-  const nameEdit = useRef(null);
+  ({ id, index, name, isCompleted, isPersisted, canEdit, onUpdate, onDelete }) => {
+    const nameEdit = useRef(null);
 
-  const handleClick = useCallback(() => {
+    const handleClick = useCallback(() => {
-    if (isPersisted && canEdit) {
+      if (isPersisted && canEdit) {
-      nameEdit.current.open();
+        nameEdit.current.open();
-    }
+      }
-  }, [isPersisted, canEdit]);
+    }, [isPersisted, canEdit]);
 
-  const handleNameUpdate = useCallback(
+    const handleNameUpdate = useCallback(
-    (newName) => {
+      (newName) => {
+        onUpdate({
+          name: newName,
+        });
+      },
+      [onUpdate],
+    );
+
+    const handleToggleChange = useCallback(() => {
       onUpdate({
-        name: newName,
+        isCompleted: !isCompleted,
       });
-    },
+    }, [isCompleted, onUpdate]);
-    [onUpdate],
-  );
 
-  const handleToggleChange = useCallback(() => {
+    const handleNameEdit = useCallback(() => {
-    onUpdate({
+      nameEdit.current.open();
-      isCompleted: !isCompleted,
+    }, []);
-    });
-  }, [isCompleted, onUpdate]);
 
-  const handleNameEdit = useCallback(() => {
+    return (
-    nameEdit.current.open();
+      <Draggable draggableId={id} index={index} isDragDisabled={!isPersisted || !canEdit}>
-  }, []);
+        {({ innerRef, draggableProps, dragHandleProps }, { isDragging }) => {
+          const contentNode = (
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            <div {...draggableProps} {...dragHandleProps} ref={innerRef} className={styles.wrapper}>
+              <span className={styles.checkboxWrapper}>
+                <Checkbox
+                  checked={isCompleted}
+                  disabled={!isPersisted || !canEdit}
+                  className={styles.checkbox}
+                  onChange={handleToggleChange}
+                />
+              </span>
+              <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
+                <div className={classNames(canEdit && styles.contentHoverable)}>
+                  {/* eslint-disable jsx-a11y/click-events-have-key-events,
+                           jsx-a11y/no-static-element-interactions */}
+                  <span
+                    className={classNames(styles.text, canEdit && styles.textEditable)}
+                    onClick={handleClick}
+                  >
+                    {/* eslint-enable jsx-a11y/click-events-have-key-events,
+                            jsx-a11y/no-static-element-interactions */}
+                    <span className={classNames(styles.task, isCompleted && styles.taskCompleted)}>
+                      {name}
+                    </span>
+                  </span>
+                  {isPersisted && canEdit && (
+                    <ActionsPopup onNameEdit={handleNameEdit} onDelete={onDelete}>
+                      <Button className={classNames(styles.button, styles.target)}>
+                        <Icon fitted name="pencil" size="small" />
+                      </Button>
+                    </ActionsPopup>
+                  )}
+                </div>
+              </NameEdit>
+            </div>
+          );
 
-  return (
+          return isDragging ? ReactDOM.createPortal(contentNode, document.body) : contentNode;
-    <div className={styles.wrapper}>
+        }}
-      <span className={styles.checkboxWrapper}>
+      </Draggable>
-        <Checkbox
+    );
-          checked={isCompleted}
+  },
-          disabled={!isPersisted || !canEdit}
+);
-          className={styles.checkbox}
-          onChange={handleToggleChange}
-        />
-      </span>
-      <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
-        <div className={classNames(canEdit && styles.contentHoverable)}>
-          {/* eslint-disable jsx-a11y/click-events-have-key-events,
-                             jsx-a11y/no-static-element-interactions */}
-          <span
-            className={classNames(styles.text, canEdit && styles.textEditable)}
-            onClick={handleClick}
-          >
-            {/* eslint-enable jsx-a11y/click-events-have-key-events,
-                              jsx-a11y/no-static-element-interactions */}
-            <span className={classNames(styles.task, isCompleted && styles.taskCompleted)}>
-              {name}
-            </span>
-          </span>
-          {isPersisted && canEdit && (
-            <ActionsPopup onNameEdit={handleNameEdit} onDelete={onDelete}>
-              <Button className={classNames(styles.button, styles.target)}>
-                <Icon fitted name="pencil" size="small" />
-              </Button>
-            </ActionsPopup>
-          )}
-        </div>
-      </NameEdit>
-    </div>
-  );
-});
 
 Item.propTypes = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   isCompleted: PropTypes.bool.isRequired,
   isPersisted: PropTypes.bool.isRequired,

client/src/components/CardModal/Tasks/Item.module.scss

@@ -27,7 +27,7 @@
     vertical-align: top;
     z-index: 2000;
     line-height: 1;
-    height: 32px;
+    height: 100%;
   }
 
   .contentHoverable:hover {
@@ -69,10 +69,10 @@
 
   .wrapper {
     border-radius: 3px;
+    cursor: auto;
     margin-left: -40px;
     min-height: 32px;
     position: relative;
-    transition: all 0.14s ease-in;
     width: calc(100% + 40px);
   }
 }

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

@@ -71,7 +71,7 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
 
   useEffect(() => {
     if (isOpened) {
-      field.current.ref.current.select();
+      field.current.ref.current.focus();
     }
   }, [isOpened]);
 

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

@@ -1,16 +1,34 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { Progress } from 'semantic-ui-react';
+import { closePopup } from '../../../lib/popup';
 
+import DroppableTypes from '../../../constants/DroppableTypes';
 import Item from './Item';
 import Add from './Add';
 
 import styles from './Tasks.module.scss';
 
-const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onDelete }) => {
+const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onMove, onDelete }) => {
   const [t] = useTranslation();
 
+  const handleDragStart = useCallback(() => {
+    closePopup();
+  }, []);
+
+  const handleDragEnd = useCallback(
+    ({ draggableId, source, destination }) => {
+      if (!destination || source.index === destination.index) {
+        return;
+      }
+
+      onMove(draggableId, destination.index);
+    },
+    [onMove],
+  );
+
   const handleUpdate = useCallback(
     (id, data) => {
       onUpdate(id, data);
@@ -39,26 +57,38 @@ const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onDelete }) => {
           className={styles.progress}
         />
       )}
-      {items.map((item) => (
+      <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-        <Item
+        <Droppable droppableId="tasks" type={DroppableTypes.TASK}>
-          key={item.id}
+          {({ innerRef, droppableProps, placeholder }) => (
-          name={item.name}
+            // eslint-disable-next-line react/jsx-props-no-spreading
-          isCompleted={item.isCompleted}
+            <div {...droppableProps} ref={innerRef}>
-          isPersisted={item.isPersisted}
+              {items.map((item, index) => (
-          canEdit={canEdit}
+                <Item
-          onUpdate={(data) => handleUpdate(item.id, data)}
+                  key={item.id}
-          onDelete={() => handleDelete(item.id)}
+                  id={item.id}
-        />
+                  index={index}
-      ))}
+                  name={item.name}
-      {canEdit && (
+                  isCompleted={item.isCompleted}
-        <Add onCreate={onCreate}>
+                  isPersisted={item.isPersisted}
-          <button type="button" className={styles.taskButton}>
+                  canEdit={canEdit}
-            <span className={styles.taskButtonText}>
+                  onUpdate={(data) => handleUpdate(item.id, data)}
-              {items.length > 0 ? t('action.addAnotherTask') : t('action.addTask')}
+                  onDelete={() => handleDelete(item.id)}
-            </span>
+                />
-          </button>
+              ))}
-        </Add>
+              {placeholder}
-      )}
+              {canEdit && (
+                <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>
+              )}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
     </>
   );
 });
@@ -68,6 +98,7 @@ Tasks.propTypes = {
   canEdit: PropTypes.bool.isRequired,
   onCreate: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
+  onMove: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
 };
 

client/src/components/Core.jsx

@@ -9,22 +9,24 @@ import UserSettingsModalContainer from '../containers/UserSettingsModalContainer
 import ProjectAddModalContainer from '../containers/ProjectAddModalContainer';
 import Background from './Background';
 
-const Core = ({ currentModal, currentProject }) => (
+function Core({ currentModal, currentProject }) {
-  <>
+  return (
-    {currentProject && currentProject.background && (
+    <>
-      <Background
+      {currentProject && currentProject.background && (
-        type={currentProject.background.type}
+        <Background
-        name={currentProject.background.name}
+          type={currentProject.background.type}
-        imageUrl={currentProject.backgroundImage && currentProject.backgroundImage.url}
+          name={currentProject.background.name}
-      />
+          imageUrl={currentProject.backgroundImage && currentProject.backgroundImage.url}
-    )}
+        />
-    <FixedContainer />
+      )}
-    <StaticContainer />
+      <FixedContainer />
-    {currentModal === ModalTypes.USERS && <UsersModalContainer />}
+      <StaticContainer />
-    {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
+      {currentModal === ModalTypes.USERS && <UsersModalContainer />}
-    {currentModal === ModalTypes.PROJECT_ADD && <ProjectAddModalContainer />}
+      {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
-  </>
+      {currentModal === ModalTypes.PROJECT_ADD && <ProjectAddModalContainer />}
-);
+    </>
+  );
+}
 
 Core.propTypes = {
   currentModal: PropTypes.oneOf(Object.values(ModalTypes)),

client/src/components/Fixed/Fixed.jsx

@@ -7,13 +7,15 @@ import BoardActionsContainer from '../../containers/BoardActionsContainer';
 
 import styles from './Fixed.module.scss';
 
-const Fixed = ({ projectId, board }) => (
+function Fixed({ projectId, board }) {
-  <div className={styles.wrapper}>
+  return (
-    <HeaderContainer />
+    <div className={styles.wrapper}>
-    {projectId && <ProjectContainer />}
+      <HeaderContainer />
-    {board && !board.isFetching && <BoardActionsContainer />}
+      {projectId && <ProjectContainer />}
-  </div>
+      {board && !board.isFetching && <BoardActionsContainer />}
-);
+    </div>
+  );
+}
 
 Fixed.propTypes = {
   projectId: PropTypes.string,

client/src/components/Header/NotificationsPopup.jsx

@@ -7,7 +7,7 @@ import { withPopup } from '../../lib/popup';
 import { Popup } from '../../lib/custom-ui';
 
 import Paths from '../../constants/Paths';
-import { ActionTypes } from '../../constants/Enums';
+import { ActivityTypes } from '../../constants/Enums';
 import User from '../User';
 
 import styles from './NotificationsPopup.module.scss';
@@ -23,42 +23,42 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
   );
 
   const renderItemContent = useCallback(
-    ({ action, card }) => {
+    ({ activity, card }) => {
-      switch (action.type) {
+      switch (activity.type) {
-        case ActionTypes.MOVE_CARD:
+        case ActivityTypes.MOVE_CARD:
           return (
             <Trans
               i18nKey="common.userMovedCardFromListToList"
               values={{
-                user: action.user.name,
+                user: activity.user.name,
                 card: card.name,
-                fromList: action.data.fromList.name,
+                fromList: activity.data.fromList.name,
-                toList: action.data.toList.name,
+                toList: activity.data.toList.name,
               }}
             >
-              {action.user.name}
+              {activity.user.name}
               {' moved '}
               <Link to={Paths.CARDS.replace(':id', card.id)} onClick={onClose}>
                 {card.name}
               </Link>
               {' from '}
-              {action.data.fromList.name}
+              {activity.data.fromList.name}
               {' to '}
-              {action.data.toList.name}
+              {activity.data.toList.name}
             </Trans>
           );
-        case ActionTypes.COMMENT_CARD:
+        case ActivityTypes.COMMENT_CARD:
           return (
             <Trans
               i18nKey="common.userLeftNewCommentToCard"
               values={{
-                user: action.user.name,
+                user: activity.user.name,
-                comment: action.data.text,
+                comment: activity.data.text,
                 card: card.name,
               }}
             >
-              {action.user.name}
+              {activity.user.name}
-              {` left a new comment «${action.data.text}» to `}
+              {` left a new comment «${activity.data.text}» to `}
               <Link to={Paths.CARDS.replace(':id', card.id)} onClick={onClose}>
                 {card.name}
               </Link>
@@ -79,11 +79,11 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
         {items.length > 0
           ? items.map((item) => (
               <div key={item.id} className={styles.wrapper}>
-                {item.card && item.action ? (
+                {item.card && item.activity ? (
                   <>
                     <User
-                      name={item.action.user.name}
+                      name={item.activity.user.name}
-                      avatarUrl={item.action.user.avatarUrl}
+                      avatarUrl={item.activity.user.avatarUrl}
                       size="large"
                     />
                     <span className={styles.content}>{renderItemContent(item)}</span>

client/src/components/Label/Label.module.scss

@@ -13,7 +13,6 @@
     border-radius: 3px;
     box-sizing: border-box;
     color: #fff;
-    display: inline-block;
     font-weight: 400;
     outline: none;
     overflow: hidden;

client/src/components/LabelsStep/LabelsStep.jsx

@@ -1,11 +1,11 @@
 import pick from 'lodash/pick';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
-import { Popup } from '../../lib/custom-ui';
+import { Input, Popup } from '../../lib/custom-ui';
 
-import { useSteps } from '../../hooks';
+import { useField, useSteps } from '../../hooks';
 import AddStep from './AddStep';
 import EditStep from './EditStep';
 import Item from './Item';
@@ -21,6 +21,20 @@ const LabelsStep = React.memo(
   ({ items, currentIds, title, onSelect, onDeselect, onCreate, onUpdate, onDelete, onBack }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
+    const [searchValue, handleSearchFieldChange] = useField('');
+    const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+
+    const filteredItems = useMemo(
+      () =>
+        items.filter(
+          (label) =>
+            (label.name && label.name.toLowerCase().includes(search)) ||
+            label.color.includes(search),
+        ),
+      [items, search],
+    );
+
+    const searchField = useRef(null);
 
     const handleAddClick = useCallback(() => {
       openStep(StepTypes.ADD);
@@ -63,6 +77,10 @@ const LabelsStep = React.memo(
       [onDelete],
     );
 
+    useEffect(() => {
+      searchField.current.focus();
+    }, []);
+
     if (step) {
       switch (step.type) {
         case StepTypes.ADD:
@@ -93,18 +111,30 @@ const LabelsStep = React.memo(
       <>
         <Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
         <Popup.Content>
-          {items.map((item) => (
+          <Input
-            <Item
+            fluid
-              key={item.id}
+            ref={searchField}
-              name={item.name}
+            value={searchValue}
-              color={item.color}
+            placeholder={t('common.searchLabels')}
-              isPersisted={item.isPersisted}
+            icon="search"
-              isActive={currentIds.includes(item.id)}
+            onChange={handleSearchFieldChange}
-              onSelect={() => handleSelect(item.id)}
+          />
-              onDeselect={() => handleDeselect(item.id)}
+          {filteredItems.length > 0 && (
-              onEdit={() => handleEdit(item.id)}
+            <div className={styles.items}>
-            />
+              {filteredItems.map((item) => (
-          ))}
+                <Item
+                  key={item.id}
+                  name={item.name}
+                  color={item.color}
+                  isPersisted={item.isPersisted}
+                  isActive={currentIds.includes(item.id)}
+                  onSelect={() => handleSelect(item.id)}
+                  onDeselect={() => handleDeselect(item.id)}
+                  onEdit={() => handleEdit(item.id)}
+                />
+              ))}
+            </div>
+          )}
           <Button
             fluid
             content={t('action.createNewLabel')}

client/src/components/LabelsStep/LabelsStep.module.scss

@@ -14,4 +14,24 @@
       background: #e9e9e9;
     }
   }
+
+  .items {
+    margin-top: 8px;
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
+  }
 }