chore: Update version

Closes #349

.dockerignore

@@ -1,11 +1,29 @@
-*/node_modules
-*/.gitignore
 */README.md
+*/.gitignore
+*/node_modules
 
 **/.DS_Store
-**/.gitkeep
+
+server/**/.gitkeep
+
+server/.env
+server/.editorconfig
+server/.eslintignore
+server/.npmrc
+server/test
+server/logs
+server/.tmp
+
+server/views/*
 
 server/public/*
-server/views/*
-server/logs
+!server/public/user-avatars
+server/public/user-avatars/*
+!server/public/project-background-images
+server/public/project-background-images/*
+
+server/private/*
+!server/private/attachments
+server/private/attachments/*
+
 client/build

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

@@ -9,7 +9,7 @@ on:
   workflow_dispatch:
 
 env:
-  ALPINE_VERSION: 3.15
+  ALPINE_VERSION: 3.16
 
 jobs:
   build-and-push-docker-base-image:

.gitignore

@@ -3,3 +3,10 @@ docker-compose.override.yml
 
 .idea
 .DS_Store
+
+# Prevent another lockfile than package-lock.json (npm) from being created
+# If some case you are using pnpm or yarn, don't forget to generate npm lockfile
+# before commiting your code by running:
+# `npm i --package-lock-only`
+pnpm-lock.yaml
+yarn.lock

Dockerfile

@@ -1,32 +1,40 @@
-FROM node:lts AS client-builder
+FROM ghcr.io/plankanban/planka:base-latest as server-dependencies
 
 WORKDIR /app
 
-COPY client/package.json client/package-lock.json ./
+COPY server/package.json server/package-lock.json .
 
 RUN npm install npm@latest --global \
-  && npm install
+  && npm clean-install --omit=dev
+
+FROM node:lts AS client
+
+WORKDIR /app
+
+COPY client/package.json client/package-lock.json .
+
+RUN npm install npm@latest --global \
+  && npm clean-install --omit=dev
 
 COPY client .
-RUN npm run build
+RUN DISABLE_ESLINT_PLUGIN=true npm run build
 
 FROM ghcr.io/plankanban/planka:base-latest
 
+RUN apk del vips-dependencies --purge
+
+USER node
 WORKDIR /app
 
-COPY server/.npmrc server/package.json server/package-lock.json ./
+COPY --chown=node:node docker-start.sh start.sh
+COPY --chown=node:node server .
 
-RUN npm install npm@latest --global \
-  && npm install --production \
-  && apk del vips-dependencies --purge
+RUN mv .env.sample .env
 
-COPY docker-start.sh start.sh
-COPY server .
+COPY --from=server-dependencies --chown=node:node /app/node_modules node_modules
 
-RUN cp .env.sample .env
-
-COPY --from=client-builder /app/build public
-COPY --from=client-builder /app/build/index.html views/index.ejs
+COPY --from=client --chown=node:node /app/build public
+COPY --from=client --chown=node:node /app/build/index.html views/index.ejs
 
 VOLUME /app/public/user-avatars
 VOLUME /app/public/project-background-images

Dockerfile.base

@@ -1,7 +1,7 @@
 FROM node:lts-alpine
 
-ARG ALPINE_VERSION=3.15
-ARG VIPS_VERSION=8.12.2
+ARG ALPINE_VERSION=3.16
+ARG VIPS_VERSION=8.13.3
 
 RUN apk -U upgrade \
   && apk add \

README.md

@@ -28,7 +28,7 @@ There are 2 types of installation:
 
 ### 1. Docker Compose
 
-[![](https://d207aa93qlcgug.cloudfront.net/1.95.5.qa/img/nav/docker-logo-loggedout.png)](https://hub.docker.com/r/meltyshev/planka)
+[![](https://d207aa93qlcgug.cloudfront.net/1.95.5.qa/img/nav/docker-logo-loggedout.png)](https://github.com/plankanban/planka/pkgs/container/planka)
 
 - Make sure you have [Docker](https://docs.docker.com/install/) and [Docker Compose](https://docs.docker.com/compose/install/) installed and operational.
 - Create `docker-compose.yml` based on [the example](https://raw.githubusercontent.com/plankanban/planka/master/docker-compose.yml). This is the ONLY file you will need. You can create this file on your own machine by copy and pasting the content.
@@ -259,6 +259,10 @@ Restart the fail2ban service. You can check the status of your Planka jail by ru
 fail2ban-client status planka
 ```
 
+### Import from Trello
+
+It's already available in Planka, or you can also use the great tool [trello2planka](https://github.com/christophenne/trello2planka) to do the import.
+
 ## Development
 
 Clone the repository and install dependencies:

client/package.json

@@ -34,15 +34,13 @@
       },
       "requireConfigFile": false
     },
-    "plugins": [
-      "prettier"
-    ],
     "extends": [
       "airbnb",
       "airbnb/hooks",
-      "plugin:prettier/recommended"
+      "../package.json"
     ],
     "rules": {
+      "no-unused-vars": "warn",
       "import/no-extraneous-dependencies": [
         "error",
         {
@@ -51,78 +49,66 @@
             "**/*.test.js"
           ]
         }
-      ],
-      "prettier/prettier": [
-        "error",
-        {
-          "printWidth": 100,
-          "singleQuote": true,
-          "trailingComma": "all"
-        }
       ]
     }
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
-    "classnames": "^2.3.1",
-    "connected-react-router": "^6.9.3",
-    "date-fns": "^2.29.1",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.29.3",
     "dequal": "^2.0.3",
     "easymde": "^2.18.0",
-    "history": "^4.10.1",
-    "i18next": "^21.8.14",
-    "i18next-browser-languagedetector": "^6.1.4",
+    "history": "^5.3.0",
+    "i18next": "^22.0.6",
+    "i18next-browser-languagedetector": "^7.0.1",
     "initials": "^3.1.2",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "node-sass": "^7.0.1",
-    "photoswipe": "^5.3.0",
+    "node-sass": "^8.0.0",
+    "photoswipe": "^5.3.3",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-beautiful-dnd": "^13.1.0",
+    "react": "^18.2.0",
+    "react-app-rewired": "^2.2.1",
+    "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.8.0",
-    "react-dom": "^17.0.2",
-    "react-dropzone": "^14.2.2",
-    "react-i18next": "^11.18.1",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-i18next": "^12.0.0",
     "react-input-mask": "^2.0.4",
     "react-markdown": "^8.0.3",
-    "react-photoswipe-gallery": "^2.2.1",
-    "react-redux": "^7.2.8",
-    "react-router-dom": "^5.3.1",
+    "react-photoswipe-gallery": "^2.2.2",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "react-simplemde-editor": "^5.2.0",
-    "react-textarea-autosize": "^8.3.4",
+    "react-textarea-autosize": "^8.4.0",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "redux-orm": "^0.16.2",
-    "redux-saga": "^1.1.3",
+    "redux-saga": "^1.2.1",
     "remark-breaks": "^3.0.2",
     "remark-gfm": "^3.0.1",
-    "reselect": "^4.1.6",
+    "reselect": "^4.1.7",
     "sails.io.js": "^1.2.1",
     "semantic-ui-react": "^2.1.3",
-    "socket.io-client": "^2.3.1",
+    "socket.io-client": "^2.5.0",
     "validator": "^13.7.0",
     "whatwg-fetch": "^3.6.2",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
     "babel-preset-airbnb": "^5.0.0",
-    "chai": "^4.3.6",
-    "enzyme": "^3.11.0",
-    "eslint": "^8.20.0",
+    "chai": "^4.3.7",
+    "eslint": "^8.28.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest-enzyme": "^7.1.2",
-    "prettier": "2.7.1",
-    "react-app-rewired": "^2.2.1",
-    "react-test-renderer": "^17.0.2"
+    "react-test-renderer": "^18.2.0"
   }
 }

client/src/api/boards.js

@@ -1,4 +1,5 @@
 import socket from './socket';
+import http from './http';
 import { transformCard } from './cards';
 import { transformAttachment } from './attachments';
 
@@ -7,6 +8,9 @@ import { transformAttachment } from './attachments';
 const createBoard = (projectId, data, headers) =>
   socket.post(`/projects/${projectId}/boards`, data, headers);
 
+const createBoardWithImport = (projectId, data, requestId, headers) =>
+  http.post(`/projects/${projectId}/boards?requestId=${requestId}`, data, headers);
+
 const getBoard = (id, headers) =>
   socket.get(`/boards/${id}`, undefined, headers).then((body) => ({
     ...body,
@@ -23,6 +27,7 @@ const deleteBoard = (id, headers) => socket.delete(`/boards/${id}`, undefined, h
 
 export default {
   createBoard,
+  createBoardWithImport,
   getBoard,
   updateBoard,
   deleteBoard,

client/src/api/cards.js

@@ -35,18 +35,8 @@ export const transformCardData = (data) => ({
 
 /* Actions */
 
-const getCards = (boardId, data, headers) =>
-  socket.get(`/board/${boardId}/cards`, data, headers).then((body) => ({
-    ...body,
-    items: body.items.map(transformCard),
-    included: {
-      ...body.included,
-      attachments: body.included.attachments.map(transformAttachment),
-    },
-  }));
-
-const createCard = (boardId, data, headers) =>
-  socket.post(`/boards/${boardId}/cards`, transformCardData(data), headers).then((body) => ({
+const createCard = (listId, data, headers) =>
+  socket.post(`/lists/${listId}/cards`, transformCardData(data), headers).then((body) => ({
     ...body,
     item: transformCard(body.item),
   }));
@@ -55,6 +45,10 @@ const getCard = (id, headers) =>
   socket.get(`/cards/${id}`, undefined, headers).then((body) => ({
     ...body,
     item: transformCard(body.item),
+    included: {
+      ...body.included,
+      attachments: body.included.attachments.map(transformAttachment),
+    },
   }));
 
 const updateCard = (id, data, headers) =>
@@ -83,7 +77,6 @@ const makeHandleCardUpdate = makeHandleCardCreate;
 const makeHandleCardDelete = makeHandleCardCreate;
 
 export default {
-  getCards,
   createCard,
   getCard,
   updateCard,

client/src/components/Board/Board.jsx

@@ -10,11 +10,11 @@ import CardModalContainer from '../../containers/CardModalContainer';
 import ListAdd from './ListAdd';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
 
-import styles from './BoardKanban.module.scss';
+import styles from './Board.module.scss';
 
 const parseDndId = (dndId) => dndId.split(':')[1];
 
-const BoardKanban = React.memo(
+const Board = React.memo(
   ({ listIds, isCardModalOpened, canEdit, onListCreate, onListMove, onCardMove }) => {
     const [t] = useTranslation();
     const [isListAddOpened, setIsListAddOpened] = useState(false);
@@ -166,7 +166,7 @@ const BoardKanban = React.memo(
   },
 );
 
-BoardKanban.propTypes = {
+Board.propTypes = {
   listIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   isCardModalOpened: PropTypes.bool.isRequired,
   canEdit: PropTypes.bool.isRequired,
@@ -175,4 +175,4 @@ BoardKanban.propTypes = {
   onCardMove: PropTypes.func.isRequired,
 };
 
-export default BoardKanban;
+export default Board;

client/src/components/Board/ListAdd.jsx

@@ -72,7 +72,7 @@ const ListAdd = React.memo(({ onCreate, onClose }) => {
         <Button
           positive
           content={t('action.addList')}
-          className={styles.submitButton}
+          className={styles.button}
           onMouseOver={handleControlMouseOver}
           onMouseOut={handleControlMouseOut}
         />

client/src/components/Board/ListAdd.module.scss

@@ -1,4 +1,9 @@
 :global(#app) {
+  .button {
+    min-height: 30px;
+    vertical-align: top;
+  }
+
   .controls {
     margin-top: 4px;
   }
@@ -18,11 +23,6 @@
     }
   }
 
-  .submitButton {
-    min-height: 30px;
-    vertical-align: top;
-  }
-
   .wrapper {
     background: #e2e4e6;
     border-radius: 3px;

client/src/components/Board/index.js

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

client/src/components/BoardKanban/index.js

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

client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.jsx

@@ -1,3 +1,4 @@
+import { dequal } from 'dequal';
 import omit from 'lodash/omit';
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -10,7 +11,7 @@ import { BoardMembershipRoles } from '../../constants/Enums';
 import styles from './BoardMembershipPermissionsSelectStep.module.scss';
 
 const BoardMembershipPermissionsSelectStep = React.memo(
-  ({ defaultData, title, buttonContent, onSelect, onBack }) => {
+  ({ defaultData, title, buttonContent, onSelect, onBack, onClose }) => {
     const [t] = useTranslation();
 
     const [data, setData] = useState(() => ({
@@ -23,7 +24,7 @@ const BoardMembershipPermissionsSelectStep = React.memo(
       setData((prevData) => ({
         ...prevData,
         role,
-        canComment: role === BoardMembershipRoles.EDITOR ? null : !!prevData.canComment,
+        canComment: role === BoardMembershipRoles.VIEWER ? !!prevData.canComment : null,
       }));
     }, []);
 
@@ -35,8 +36,12 @@ const BoardMembershipPermissionsSelectStep = React.memo(
     }, []);
 
     const handleSubmit = useCallback(() => {
-      onSelect(data.role === BoardMembershipRoles.EDITOR ? omit(data, 'canComment') : data);
-    }, [onSelect, data]);
+      if (!dequal(data, defaultData)) {
+        onSelect(data.role === BoardMembershipRoles.VIEWER ? data : omit(data, 'canComment'));
+      }
+
+      onClose();
+    }, [defaultData, onSelect, onClose, data]);
 
     return (
       <>
@@ -65,7 +70,7 @@ const BoardMembershipPermissionsSelectStep = React.memo(
                 <div className={styles.menuItemDescription}>{t('common.canOnlyViewBoard')}</div>
               </Menu.Item>
             </Menu>
-            {data.role !== BoardMembershipRoles.EDITOR && (
+            {data.role === BoardMembershipRoles.VIEWER && (
               <Segment basic className={styles.settings}>
                 <Radio
                   toggle
@@ -90,6 +95,7 @@ BoardMembershipPermissionsSelectStep.propTypes = {
   buttonContent: PropTypes.string,
   onSelect: PropTypes.func.isRequired,
   onBack: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 BoardMembershipPermissionsSelectStep.defaultProps = {

client/src/components/BoardMembershipsStep/BoardMembershipsStep.jsx

@@ -43,7 +43,9 @@ const BoardMembershipsStep = React.memo(
     );
 
     useEffect(() => {
-      searchField.current.focus();
+      searchField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     return (

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

@@ -1,7 +1,7 @@
 :global(#app) {
   .menu {
     margin: 8px auto 0;
-    max-height: 320px;
+    max-height: 60vh;
     overflow-x: hidden;
     overflow-y: auto;
     scrollbar-width: thin;

client/src/components/BoardWrapper.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Loader } from 'semantic-ui-react';
-
-import { BoardTypes } from '../constants/Enums';
-import BoardKanbanContainer from '../containers/BoardKanbanContainer';
-
-const BoardWrapper = React.memo(({ type, isFetching }) => {
-  if (isFetching) {
-    return <Loader active />;
-  }
-
-  if (type === BoardTypes.KANBAN) {
-    return <BoardKanbanContainer />;
-  }
-
-  return null;
-});
-
-BoardWrapper.propTypes = {
-  type: PropTypes.string.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-};
-
-export default BoardWrapper;

client/src/components/Boards/AddPopup.jsx

@@ -1,70 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import { Button, Form } from 'semantic-ui-react';
-import { withPopup } from '../../lib/popup';
-import { Input, Popup } from '../../lib/custom-ui';
-
-import { useForm } from '../../hooks';
-
-import styles from './AddPopup.module.scss';
-
-const AddStep = React.memo(({ onCreate, onClose }) => {
-  const [t] = useTranslation();
-
-  const [data, handleFieldChange] = useForm({
-    name: '',
-  });
-
-  const nameField = useRef(null);
-
-  const handleSubmit = useCallback(() => {
-    const cleanData = {
-      ...data,
-      type: 'kanban',
-      name: data.name.trim(),
-    };
-
-    if (!cleanData.name) {
-      nameField.current.select();
-      return;
-    }
-
-    onCreate(cleanData);
-    onClose();
-  }, [onCreate, onClose, data]);
-
-  useEffect(() => {
-    nameField.current.focus();
-  }, []);
-
-  return (
-    <>
-      <Popup.Header>
-        {t('common.createBoard', {
-          context: 'title',
-        })}
-      </Popup.Header>
-      <Popup.Content>
-        <Form onSubmit={handleSubmit}>
-          <Input
-            fluid
-            ref={nameField}
-            name="name"
-            value={data.name}
-            className={styles.field}
-            onChange={handleFieldChange}
-          />
-          <Button positive content={t('action.createBoard')} />
-        </Form>
-      </Popup.Content>
-    </>
-  );
-});
-
-AddStep.propTypes = {
-  onCreate: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-};
-
-export default withPopup(AddStep);

client/src/components/Boards/AddPopup.module.scss

@@ -1,5 +0,0 @@
-:global(#app) {
-  .field {
-    margin-bottom: 8px;
-  }
-}

client/src/components/Boards/AddPopup/AddPopup.jsx

@@ -0,0 +1,117 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Icon } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../../lib/hooks';
+import { withPopup } from '../../../lib/popup';
+import { Input, Popup } from '../../../lib/custom-ui';
+
+import { useForm, useSteps } from '../../../hooks';
+import ImportStep from './ImportStep';
+
+import styles from './AddPopup.module.scss';
+
+const StepTypes = {
+  IMPORT: 'IMPORT',
+};
+
+const AddStep = React.memo(({ onCreate, onClose }) => {
+  const [t] = useTranslation();
+
+  const [data, handleFieldChange, setData] = useForm({
+    name: '',
+    import: null,
+  });
+
+  const [step, openStep, handleBack] = useSteps();
+  const [focusNameFieldState, focusNameField] = useToggle();
+
+  const nameField = useRef(null);
+
+  const handleImportSelect = useCallback(
+    (nextImport) => {
+      setData((prevData) => ({
+        ...prevData,
+        import: nextImport,
+      }));
+    },
+    [setData],
+  );
+
+  const handleImportBack = useCallback(() => {
+    handleBack();
+    focusNameField();
+  }, [handleBack, focusNameField]);
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim(),
+    };
+
+    if (!cleanData.name) {
+      nameField.current.select();
+      return;
+    }
+
+    onCreate(cleanData);
+    onClose();
+  }, [onClose, data, onCreate]);
+
+  const handleImportClick = useCallback(() => {
+    openStep(StepTypes.IMPORT);
+  }, [openStep]);
+
+  useEffect(() => {
+    nameField.current.focus({
+      preventScroll: true,
+    });
+  }, []);
+
+  useDidUpdate(() => {
+    nameField.current.focus();
+  }, [focusNameFieldState]);
+
+  if (step && step.type === StepTypes.IMPORT) {
+    return <ImportStep onSelect={handleImportSelect} onBack={handleImportBack} />;
+  }
+
+  return (
+    <>
+      <Popup.Header>
+        {t('common.createBoard', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <Input
+            fluid
+            ref={nameField}
+            name="name"
+            value={data.name}
+            className={styles.field}
+            onChange={handleFieldChange}
+          />
+          <div className={styles.controls}>
+            <Button positive content={t('action.createBoard')} className={styles.createButton} />
+            <Button type="button" className={styles.importButton} onClick={handleImportClick}>
+              <Icon
+                name={data.import ? data.import.type : 'arrow down'}
+                className={styles.importButtonIcon}
+              />
+              {data.import ? data.import.file.name : t('action.import')}
+            </Button>
+          </div>
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+AddStep.propTypes = {
+  onCreate: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default withPopup(AddStep);

client/src/components/Boards/AddPopup/AddPopup.module.scss

@@ -0,0 +1,42 @@
+:global(#app) {
+  .controls {
+    display: flex;
+    max-width: 280px;
+
+    @media only screen and (max-width: 767px) {
+      max-width: 226px;
+    }
+  }
+
+  .createButton {
+    white-space: nowrap;
+  }
+
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .importButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-left: auto;
+    margin-right: 0;
+    overflow: hidden;
+    text-align: left;
+    text-decoration: underline;
+    text-overflow: ellipsis;
+    transition: none;
+    white-space: nowrap;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
+  .importButtonIcon {
+    text-decoration: none;
+  }
+}

client/src/components/Boards/AddPopup/ImportStep.jsx

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'semantic-ui-react';
+import { FilePicker, Popup } from '../../../lib/custom-ui';
+
+import styles from './ImportStep.module.scss';
+
+const ImportStep = React.memo(({ onSelect, onBack }) => {
+  const [t] = useTranslation();
+
+  const handleFileSelect = useCallback(
+    (type, file) => {
+      onSelect({
+        type,
+        file,
+      });
+
+      onBack();
+    },
+    [onSelect, onBack],
+  );
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.importBoard', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <FilePicker onSelect={(file) => handleFileSelect('trello', file)} accept=".json">
+          <Button
+            fluid
+            type="button"
+            icon="trello"
+            content={t('common.fromTrello')}
+            className={styles.button}
+          />
+        </FilePicker>
+      </Popup.Content>
+    </>
+  );
+});
+
+ImportStep.propTypes = {
+  onSelect: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+export default ImportStep;

client/src/components/Boards/AddPopup/ImportStep.module.scss

@@ -0,0 +1,17 @@
+:global(#app) {
+  .button {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: left;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+}

client/src/components/Boards/AddPopup/index.js

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

client/src/components/Boards/Boards.module.scss

@@ -29,7 +29,7 @@
   }
 
   .link {
-    color: #fff;
+    color: rgba(255, 255, 255, 0.72);
     cursor: pointer;
     display: block;
     line-height: 20px;
@@ -60,6 +60,11 @@
     &:hover {
       background: rgba(0, 0, 0, 0.32);
     }
+
+    .link {
+      color: #fff;
+      font-weight: bold;
+    }
   }
 
   .tabWrapper {

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

@@ -14,7 +14,6 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
   const [t] = useTranslation();
 
   let contentNode;
-
   switch (type) {
     case ActivityTypes.CREATE_CARD:
       contentNode = (

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

@@ -120,6 +120,7 @@ const Attachments = React.memo(
           withCaption
           withDownloadButton
           options={{
+            wheelToZoom: true,
             showHideAnimationType: 'none',
             closeTitle: '',
             zoomTitle: '',

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

@@ -9,6 +9,7 @@
     text-align: left;
     text-overflow: ellipsis;
     transition: background 85ms ease;
+    white-space: nowrap;
 
     &:hover {
       background: #dfe3e6;

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

@@ -48,6 +48,7 @@
   }
 
   .taskCompleted {
+    color: #aaa;
     text-decoration: line-through;
   }
 

client/src/components/Core.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import ModalTypes from '../constants/ModalTypes';
-import FixedContainer from '../containers/FixedContainer';
-import StaticContainer from '../containers/StaticContainer';
-import UsersModalContainer from '../containers/UsersModalContainer';
-import UserSettingsModalContainer from '../containers/UserSettingsModalContainer';
-import ProjectAddModalContainer from '../containers/ProjectAddModalContainer';
-import Background from './Background';
-
-function Core({ currentModal, currentProject }) {
-  return (
-    <>
-      {currentProject && currentProject.background && (
-        <Background
-          type={currentProject.background.type}
-          name={currentProject.background.name}
-          imageUrl={currentProject.backgroundImage && currentProject.backgroundImage.url}
-        />
-      )}
-      <FixedContainer />
-      <StaticContainer />
-      {currentModal === ModalTypes.USERS && <UsersModalContainer />}
-      {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
-      {currentModal === ModalTypes.PROJECT_ADD && <ProjectAddModalContainer />}
-    </>
-  );
-}
-
-Core.propTypes = {
-  currentModal: PropTypes.oneOf(Object.values(ModalTypes)),
-  currentProject: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-};
-
-Core.defaultProps = {
-  currentModal: undefined,
-  currentProject: undefined,
-};
-
-export default Core;

client/src/components/Core/Core.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation, Trans } from 'react-i18next';
+import { Loader } from 'semantic-ui-react';
+
+import ModalTypes from '../../constants/ModalTypes';
+import FixedContainer from '../../containers/FixedContainer';
+import StaticContainer from '../../containers/StaticContainer';
+import UsersModalContainer from '../../containers/UsersModalContainer';
+import UserSettingsModalContainer from '../../containers/UserSettingsModalContainer';
+import ProjectAddModalContainer from '../../containers/ProjectAddModalContainer';
+import Background from '../Background';
+
+import styles from './Core.module.scss';
+
+const Core = React.memo(
+  ({ isInitializing, isSocketDisconnected, currentModal, currentProject }) => {
+    const [t] = useTranslation();
+
+    return (
+      <>
+        {isInitializing ? (
+          <Loader active size="massive" />
+        ) : (
+          <>
+            {currentProject && currentProject.background && (
+              <Background
+                type={currentProject.background.type}
+                name={currentProject.background.name}
+                imageUrl={currentProject.backgroundImage && currentProject.backgroundImage.url}
+              />
+            )}
+            <FixedContainer />
+            <StaticContainer />
+            {currentModal === ModalTypes.USERS && <UsersModalContainer />}
+            {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
+            {currentModal === ModalTypes.PROJECT_ADD && <ProjectAddModalContainer />}
+          </>
+        )}
+        {isSocketDisconnected && (
+          <div className={styles.message}>
+            <div className={styles.messageHeader}>{t('common.noConnectionToServer')}</div>
+            <div className={styles.messageContent}>
+              <Trans i18nKey="common.allChangesWillBeAutomaticallySavedAfterConnectionRestored">
+                All changes will be automatically saved
+                <br />
+                after connection restored
+              </Trans>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  },
+);
+
+Core.propTypes = {
+  isInitializing: PropTypes.bool.isRequired,
+  isSocketDisconnected: PropTypes.bool.isRequired,
+  currentModal: PropTypes.oneOf(Object.values(ModalTypes)),
+  currentProject: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+};
+
+Core.defaultProps = {
+  currentModal: undefined,
+  currentProject: undefined,
+};
+
+export default Core;

client/src/components/Core/index.js

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

client/src/components/CoreWrapper/CoreWrapper.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation, Trans } from 'react-i18next';
-import { Loader } from 'semantic-ui-react';
-
-import CoreContainer from '../../containers/CoreContainer';
-
-import styles from './CoreWrapper.module.scss';
-
-const CoreWrapper = React.memo(({ isInitializing, isSocketDisconnected }) => {
-  const [t] = useTranslation();
-
-  return (
-    <>
-      {isInitializing ? <Loader active size="massive" /> : <CoreContainer />}
-      {isSocketDisconnected && (
-        <div className={styles.message}>
-          <div className={styles.messageHeader}>{t('common.noConnectionToServer')}</div>
-          <div className={styles.messageContent}>
-            <Trans i18nKey="common.allChangesWillBeAutomaticallySavedAfterConnectionRestored">
-              All changes will be automatically saved
-              <br />
-              after connection restored
-            </Trans>
-          </div>
-        </div>
-      )}
-    </>
-  );
-});
-
-CoreWrapper.propTypes = {
-  isInitializing: PropTypes.bool.isRequired,
-  isSocketDisconnected: PropTypes.bool.isRequired,
-};
-
-export default CoreWrapper;

client/src/components/CoreWrapper/index.js

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

client/src/components/LabelsStep/LabelsStep.jsx

@@ -89,7 +89,9 @@ const LabelsStep = React.memo(
     );
 
     useEffect(() => {
-      searchField.current.focus();
+      searchField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     if (step) {

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

@@ -17,7 +17,7 @@
 
   .items {
     margin-top: 8px;
-    max-height: 320px;
+    max-height: 60vh;
     overflow-x: hidden;
     overflow-y: auto;
     scrollbar-width: thin;

client/src/components/Memberships/ActionsPopup.jsx

@@ -28,8 +28,8 @@ const ActionsStep = React.memo(
     deleteConfirmationTitle,
     deleteConfirmationContent,
     deleteConfirmationButtonContent,
-    canLeave,
     canEdit,
+    canLeave,
     onUpdate,
     onDelete,
     onClose,
@@ -50,10 +50,8 @@ const ActionsStep = React.memo(
         if (onUpdate) {
           onUpdate(data);
         }
-
-        onClose();
       },
-      [onUpdate, onClose],
+      [onUpdate],
     );
 
     if (step) {
@@ -68,6 +66,7 @@ const ActionsStep = React.memo(
               buttonContent="action.save"
               onSelect={handleRoleSelect}
               onBack={handleBack}
+              onClose={onClose}
             />
           );
         }
@@ -146,8 +145,8 @@ ActionsStep.propTypes = {
   deleteConfirmationTitle: PropTypes.string,
   deleteConfirmationContent: PropTypes.string,
   deleteConfirmationButtonContent: PropTypes.string,
-  canLeave: PropTypes.bool.isRequired,
   canEdit: PropTypes.bool.isRequired,
+  canLeave: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func,
   onDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,

client/src/components/Memberships/AddPopup/AddPopup.jsx

@@ -56,14 +56,14 @@ const AddStep = React.memo(
           userId: step.params.userId,
           ...data,
         });
-
-        onClose();
       },
-      [onCreate, onClose, step],
+      [onCreate, step],
     );
 
     useEffect(() => {
-      searchField.current.focus();
+      searchField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     if (step) {
@@ -79,6 +79,7 @@ const AddStep = React.memo(
                 buttonContent="action.addMember"
                 onSelect={handleRoleSelect}
                 onBack={handleBack}
+                onClose={onClose}
               />
             );
           }

client/src/components/Memberships/AddPopup/AddPopup.module.scss

@@ -1,7 +1,7 @@
 :global(#app) {
   .users {
     margin-top: 8px;
-    max-height: 320px;
+    max-height: 60vh;
     overflow-x: hidden;
     overflow-y: auto;
     scrollbar-width: thin;

client/src/components/Memberships/Memberships.jsx

@@ -44,8 +44,8 @@ const Memberships = React.memo(
                 deleteConfirmationTitle={deleteConfirmationTitle}
                 deleteConfirmationContent={deleteConfirmationContent}
                 deleteConfirmationButtonContent={deleteConfirmationButtonContent}
-                canLeave={items.length > 1 || canLeaveIfLast}
                 canEdit={canEdit}
+                canLeave={items.length > 1 || canLeaveIfLast}
                 onUpdate={(data) => onUpdate(item.id, data)}
                 onDelete={() => onDelete(item.id)}
               >

client/src/components/Root.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { Route, Switch } from 'react-router-dom';
-import { ConnectedRouter } from 'connected-react-router';
+import { Route, Routes } from 'react-router-dom';
+import { ReduxRouter } from '../lib/redux-router';
 
 import Paths from '../constants/Paths';
 import LoginContainer from '../containers/LoginContainer';
-import CoreWrapperContainer from '../containers/CoreWrapperContainer';
+import CoreContainer from '../containers/CoreContainer';
 import NotFound from './NotFound';
 
 import 'react-datepicker/dist/react-datepicker.css';
@@ -19,16 +19,16 @@ import '../styles.module.scss';
 function Root({ store, history }) {
   return (
     <Provider store={store}>
-      <ConnectedRouter history={history}>
-        <Switch>
-          <Route exact path={Paths.LOGIN} component={LoginContainer} />
-          <Route exact path={Paths.ROOT} component={CoreWrapperContainer} />
-          <Route exact path={Paths.PROJECTS} component={CoreWrapperContainer} />
-          <Route exact path={Paths.BOARDS} component={CoreWrapperContainer} />
-          <Route exact path={Paths.CARDS} component={CoreWrapperContainer} />
-          <Route path="*" component={NotFound} />
-        </Switch>
-      </ConnectedRouter>
+      <ReduxRouter history={history}>
+        <Routes>
+          <Route path={Paths.LOGIN} element={<LoginContainer />} />
+          <Route path={Paths.ROOT} element={<CoreContainer />} />
+          <Route path={Paths.PROJECTS} element={<CoreContainer />} />
+          <Route path={Paths.BOARDS} element={<CoreContainer />} />
+          <Route path={Paths.CARDS} element={<CoreContainer />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </ReduxRouter>
     </Provider>
   );
 }

client/src/components/Static/Static.jsx

@@ -2,19 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation, Trans } from 'react-i18next';
-import { Icon } from 'semantic-ui-react';
+import { Icon, Loader } from 'semantic-ui-react';
 
 import ProjectsContainer from '../../containers/ProjectsContainer';
-import BoardWrapperContainer from '../../containers/BoardWrapperContainer';
+import BoardContainer from '../../containers/BoardContainer';
 
 import styles from './Static.module.scss';
 
-function Static({ cardId, boardId, projectId }) {
+function Static({ projectId, cardId, board }) {
   const [t] = useTranslation();
 
   if (projectId === undefined) {
     return (
-      <div className={styles.root}>
+      <div className={styles.wrapper}>
         <ProjectsContainer />
       </div>
     );
@@ -22,7 +22,7 @@ function Static({ cardId, boardId, projectId }) {
 
   if (cardId === null) {
     return (
-      <div className={classNames(styles.root, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex)}>
         <div className={styles.message}>
           <h1>
             {t('common.cardNotFound', {
@@ -34,9 +34,9 @@ function Static({ cardId, boardId, projectId }) {
     );
   }
 
-  if (boardId === null) {
+  if (board === null) {
     return (
-      <div className={classNames(styles.root, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex)}>
         <div className={styles.message}>
           <h1>
             {t('common.boardNotFound', {
@@ -50,7 +50,7 @@ function Static({ cardId, boardId, projectId }) {
 
   if (projectId === null) {
     return (
-      <div className={classNames(styles.root, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex)}>
         <div className={styles.message}>
           <h1>
             {t('common.projectNotFound', {
@@ -62,9 +62,9 @@ function Static({ cardId, boardId, projectId }) {
     );
   }
 
-  if (boardId === undefined) {
+  if (board === undefined) {
     return (
-      <div className={classNames(styles.board, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex, styles.wrapperProject)}>
         <div className={styles.message}>
           <Icon inverted name="hand point up outline" size="huge" className={styles.messageIcon} />
           <h1 className={styles.messageTitle}>
@@ -80,23 +80,31 @@ function Static({ cardId, boardId, projectId }) {
     );
   }
 
+  if (board.isFetching) {
+    return (
+      <div className={classNames(styles.wrapper, styles.wrapperLoader, styles.wrapperProject)}>
+        <Loader active size="big" />
+      </div>
+    );
+  }
+
   return (
-    <div className={classNames(styles.board, styles.flex)}>
-      <BoardWrapperContainer />
+    <div className={classNames(styles.wrapper, styles.wrapperFlex, styles.wrapperBoard)}>
+      <BoardContainer />
     </div>
   );
 }
 
 Static.propTypes = {
-  cardId: PropTypes.string,
-  boardId: PropTypes.string,
   projectId: PropTypes.string,
+  cardId: PropTypes.string,
+  board: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
 Static.defaultProps = {
-  cardId: undefined,
-  boardId: undefined,
   projectId: undefined,
+  cardId: undefined,
+  board: undefined,
 };
 
 export default Static;

client/src/components/Static/Static.module.scss

@@ -1,13 +1,4 @@
 :global(#app) {
-  .board {
-    margin-top: 174px;
-  }
-
-  .flex {
-    display: flex;
-    height: 100%;
-  }
-
   .message {
     align-content: space-between;
     align-items: center;
@@ -34,7 +25,24 @@
     text-align: center;
   }
 
-  .root {
+  .wrapper {
+    height: 100%;
     margin-top: 50px;
   }
+
+  .wrapperBoard {
+    margin-top: 174px;
+  }
+
+  .wrapperFlex {
+    display: flex;
+  }
+
+  .wrapperLoader {
+    position: relative;
+  }
+
+  .wrapperProject {
+    margin-top: 98px;
+  }
 }

client/src/components/UserAddPopup/UserAddPopup.jsx

@@ -88,7 +88,9 @@ const UserAddStep = React.memo(
     }, [onCreate, data]);
 
     useEffect(() => {
-      emailField.current.focus();
+      emailField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     useEffect(() => {

client/src/components/UserEmailEditStep/UserEmailEditStep.jsx

@@ -1,4 +1,3 @@
-import omit from 'lodash/omit';
 import isEmail from 'validator/lib/isEmail';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -78,16 +77,22 @@ const UserEmailEditStep = React.memo(
         return;
       }
 
-      if (usePasswordConfirmation && !cleanData.currentPassword) {
-        currentPasswordField.current.focus();
-        return;
+      if (usePasswordConfirmation) {
+        if (!cleanData.currentPassword) {
+          currentPasswordField.current.focus();
+          return;
+        }
+      } else {
+        delete cleanData.currentPassword;
       }
 
-      onUpdate(usePasswordConfirmation ? cleanData : omit(cleanData, 'currentPassword'));
+      onUpdate(cleanData);
     }, [email, usePasswordConfirmation, onUpdate, onClose, data]);
 
     useEffect(() => {
-      emailField.current.focus();
+      emailField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     useEffect(() => {

client/src/components/UserPasswordEditStep/UserPasswordEditStep.jsx

@@ -71,7 +71,9 @@ const UserPasswordEditStep = React.memo(
     }, [usePasswordConfirmation, onUpdate, data]);
 
     useEffect(() => {
-      passwordField.current.focus();
+      passwordField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     useEffect(() => {

client/src/components/UserSettingsModal/UserSettingsModal.jsx

@@ -73,7 +73,9 @@ const UserSettingsModal = React.memo(
         ),
       },
       {
-        menuItem: 'About Planka',
+        menuItem: t('common.aboutPlanka', {
+          context: 'title',
+        }),
         render: () => <AboutPane />,
       },
     ];

client/src/components/UserUsernameEditStep/UserUsernameEditStep.jsx

@@ -1,4 +1,3 @@
-import omit from 'lodash/omit';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -78,16 +77,22 @@ const UserUsernameEditStep = React.memo(
         return;
       }
 
-      if (usePasswordConfirmation && !cleanData.currentPassword) {
-        currentPasswordField.current.focus();
-        return;
+      if (usePasswordConfirmation) {
+        if (!cleanData.currentPassword) {
+          currentPasswordField.current.focus();
+          return;
+        }
+      } else {
+        delete cleanData.currentPassword;
       }
 
-      onUpdate(usePasswordConfirmation ? cleanData : omit(cleanData, 'currentPassword'));
+      onUpdate(cleanData);
     }, [username, usePasswordConfirmation, onUpdate, onClose, data]);
 
     useEffect(() => {
-      usernameField.current.focus();
+      usernameField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     useEffect(() => {

client/src/constants/Enums.js

@@ -3,10 +3,6 @@ export const ProjectBackgroundTypes = {
   IMAGE: 'image',
 };
 
-export const BoardTypes = {
-  KANBAN: 'kanban',
-};
-
 export const BoardMembershipRoles = {
   EDITOR: 'editor',
   VIEWER: 'viewer',

client/src/containers/BoardActionsContainer.js

@@ -15,13 +15,16 @@ const mapStateToProps = (state) => {
   const filterLabels = selectors.selectFilterLabelsForCurrentBoard(state);
   const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
+  const isCurrentUserEditor =
+    !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
+
   return {
     memberships,
     labels,
     filterUsers,
     filterLabels,
     allUsers,
-    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
+    canEdit: isCurrentUserEditor,
     canEditMemberships: isCurrentUserManager,
   };
 };

client/src/containers/BoardContainer.js

@@ -4,17 +4,20 @@ import { connect } from 'react-redux';
 import selectors from '../selectors';
 import entryActions from '../entry-actions';
 import { BoardMembershipRoles } from '../constants/Enums';
-import BoardKanban from '../components/BoardKanban';
+import Board from '../components/Board';
 
 const mapStateToProps = (state) => {
   const { cardId } = selectors.selectPath(state);
   const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
   const listIds = selectors.selectListIdsForCurrentBoard(state);
 
+  const isCurrentUserEditor =
+    !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
+
   return {
     listIds,
     isCardModalOpened: !!cardId,
-    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
+    canEdit: isCurrentUserEditor,
   };
 };
 
@@ -28,4 +31,4 @@ const mapDispatchToProps = (dispatch) =>
     dispatch,
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(BoardKanban);
+export default connect(mapStateToProps, mapDispatchToProps)(Board);

client/src/containers/BoardWrapperContainer.js

@@ -1,15 +0,0 @@
-import { connect } from 'react-redux';
-
-import selectors from '../selectors';
-import BoardWrapper from '../components/BoardWrapper';
-
-const mapStateToProps = (state) => {
-  const { type, isFetching } = selectors.selectCurrentBoard(state);
-
-  return {
-    type,
-    isFetching,
-  };
-};
-
-export default connect(mapStateToProps)(BoardWrapper);

client/src/containers/CardContainer.js

@@ -30,6 +30,9 @@ const makeMapStateToProps = () => {
     const tasks = selectTasksByCardId(state, id);
     const notificationsTotal = selectNotificationsTotalByCardId(state, id);
 
+    const isCurrentUserEditor =
+      !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
+
     return {
       id,
       index,
@@ -48,8 +51,7 @@ const makeMapStateToProps = () => {
       allProjectsToLists,
       allBoardMemberships,
       allLabels,
-      canEdit:
-        !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
+      canEdit: isCurrentUserEditor,
     };
   };
 };

client/src/containers/CardModalContainer.js

@@ -1,7 +1,7 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { push } from 'connected-react-router';
 import omit from 'lodash/omit';
+import { push } from '../lib/redux-router';
 
 import selectors from '../selectors';
 import entryActions from '../entry-actions';
@@ -37,6 +37,14 @@ const mapStateToProps = (state) => {
   const attachments = selectors.selectAttachmentsForCurrentCard(state);
   const activities = selectors.selectActivitiesForCurrentCard(state);
 
+  let isCurrentUserEditor = false;
+  let isCurrentUserEditorOrCanComment = false;
+
+  if (currentUserMembership) {
+    isCurrentUserEditor = currentUserMembership.role === BoardMembershipRoles.EDITOR;
+    isCurrentUserEditorOrCanComment = isCurrentUserEditor || currentUserMembership.canComment;
+  }
+
   return {
     name,
     description,
@@ -58,11 +66,8 @@ const mapStateToProps = (state) => {
     allProjectsToLists,
     allBoardMemberships,
     allLabels,
-    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
-    canEditCommentActivities:
-      !!currentUserMembership &&
-      (currentUserMembership.role === BoardMembershipRoles.EDITOR ||
-        currentUserMembership.canComment),
+    canEdit: isCurrentUserEditor,
+    canEditCommentActivities: isCurrentUserEditorOrCanComment,
     canEditAllCommentActivities: isCurrentUserManager,
   };
 };

client/src/containers/CoreContainer.js

@@ -4,12 +4,16 @@ import selectors from '../selectors';
 import Core from '../components/Core';
 
 const mapStateToProps = (state) => {
+  const isCoreInitializing = selectors.selectIsCoreInitializing(state);
+  const isSocketDisconnected = selectors.selectIsSocketDisconnected(state);
   const currentModal = selectors.selectCurrentModal(state);
   const currentProject = selectors.selectCurrentProject(state);
 
   return {
+    isSocketDisconnected,
     currentModal,
     currentProject,
+    isInitializing: isCoreInitializing,
   };
 };
 

client/src/containers/CoreWrapperContainer.js

@@ -1,15 +0,0 @@
-import { connect } from 'react-redux';
-
-import selectors from '../selectors';
-import CoreWrapper from '../components/CoreWrapper';
-
-const mapStateToProps = (state) => {
-  const isCoreInitializing = selectors.selectIsCoreInitializing(state);
-
-  return {
-    isInitializing: isCoreInitializing,
-    isSocketDisconnected: state.socket.isDisconnected,
-  };
-};
-
-export default connect(mapStateToProps)(CoreWrapper);

client/src/containers/ListContainer.js

@@ -15,14 +15,16 @@ const makeMapStateToProps = () => {
     const cardIds = selectCardIdsByListId(state, id);
     const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
+    const isCurrentUserEditor =
+      !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
+
     return {
       id,
       index,
       name,
       isPersisted,
       cardIds,
-      canEdit:
-        !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
+      canEdit: isCurrentUserEditor,
     };
   };
 };

client/src/containers/StaticContainer.js

@@ -4,12 +4,13 @@ import selectors from '../selectors';
 import Static from '../components/Static';
 
 const mapStateToProps = (state) => {
-  const { cardId, boardId, projectId } = selectors.selectPath(state);
+  const { cardId, projectId } = selectors.selectPath(state);
+  const currentBoard = selectors.selectCurrentBoard(state);
 
   return {
-    cardId,
-    boardId,
     projectId,
+    cardId,
+    board: currentBoard,
   };
 };
 

client/src/entry-actions/boards.js

@@ -7,10 +7,11 @@ const createBoardInCurrentProject = (data) => ({
   },
 });
 
-const handleBoardCreate = (board) => ({
+const handleBoardCreate = (board, requestId) => ({
   type: EntryActionTypes.BOARD_CREATE_HANDLE,
   payload: {
     board,
+    requestId,
   },
 });
 

client/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 import store from './store';
 import history from './history';
@@ -7,4 +7,5 @@ import Root from './components/Root';
 
 import './i18n';
 
-ReactDOM.render(React.createElement(Root, { store, history }), document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(React.createElement(Root, { store, history }));

client/src/lib/custom-ui/components/Input/Input.jsx

@@ -3,9 +3,10 @@ import { Input as SemanticUIInput } from 'semantic-ui-react';
 import InputPassword from './InputPassword';
 import InputMask from './InputMask';
 
-const Input = SemanticUIInput;
+export default class Input extends SemanticUIInput {
+  static Password = InputPassword;
 
-Input.Password = InputPassword;
-Input.Mask = InputMask;
+  static Mask = InputMask;
 
-export default Input;
+  focus = (options) => this.inputRef.current.focus(options);
+}

client/src/lib/custom-ui/components/Input/MaskedInput.jsx

@@ -1,8 +1,8 @@
 import InputMask from 'react-input-mask';
 
 export default class MaskedInput extends InputMask {
-  focus() {
-    this.getInputDOMNode().focus();
+  focus(options) {
+    this.getInputDOMNode().focus(options);
   }
 
   select() {

client/src/lib/popup/with-popup.jsx

@@ -6,7 +6,7 @@ import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
 import styles from './Popup.module.css';
 
 export default (WrappedComponent, defaultProps) => {
-  const Popup = React.memo(({ children, ...props }) => {
+  const Popup = React.memo(({ children, onClose, ...props }) => {
     const [isOpened, setIsOpened] = useState(false);
 
     const wrapper = useRef(null);
@@ -18,7 +18,11 @@ export default (WrappedComponent, defaultProps) => {
 
     const handleClose = useCallback(() => {
       setIsOpened(false);
-    }, []);
+
+      if (onClose) {
+        onClose();
+      }
+    }, [onClose]);
 
     const handleMouseDown = useCallback((event) => {
       event.stopPropagation();
@@ -80,8 +84,10 @@ export default (WrappedComponent, defaultProps) => {
         popperModifiers={[
           {
             name: 'preventOverflow',
+            enabled: true,
             options: {
-              boundariesElement: 'window',
+              altAxis: true,
+              padding: 20,
             },
           },
         ]}
@@ -103,6 +109,11 @@ export default (WrappedComponent, defaultProps) => {
 
   Popup.propTypes = {
     children: PropTypes.node.isRequired,
+    onClose: PropTypes.func,
+  };
+
+  Popup.defaultProps = {
+    onClose: undefined,
   };
 
   return Popup;

client/src/lib/redux-router/ReduxRouter.jsx

@@ -0,0 +1,46 @@
+import React, { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { Router } from 'react-router-dom';
+
+import { handleLocationChange } from './actions';
+
+function ReduxRouter({ children, history, selector, basename }) {
+  const state = useSelector(selector);
+  const dispatch = useDispatch();
+
+  useLayoutEffect(() => {
+    const unlisten = history.listen((nextState) => {
+      dispatch(handleLocationChange(nextState.location, nextState.action));
+    });
+
+    dispatch(handleLocationChange(history.location, history.action, true));
+
+    return unlisten;
+  }, [history, dispatch]);
+
+  return (
+    <Router
+      basename={basename}
+      location={state.location}
+      navigationType={state.action}
+      navigator={history}
+    >
+      {children}
+    </Router>
+  );
+}
+
+ReduxRouter.propTypes = {
+  children: PropTypes.element.isRequired,
+  history: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  selector: PropTypes.func,
+  basename: PropTypes.string,
+};
+
+ReduxRouter.defaultProps = {
+  selector: ({ router }) => router,
+  basename: undefined,
+};
+
+export default ReduxRouter;

client/src/lib/redux-router/actions.js

@@ -0,0 +1,28 @@
+export const LOCATION_CHANGE_HANDLE = '@@router/LOCATION_CHANGE_HANDLE';
+
+export const handleLocationChange = (location, action, isFirstRendering = false) => ({
+  type: LOCATION_CHANGE_HANDLE,
+  payload: {
+    location,
+    action,
+    isFirstRendering,
+  },
+});
+
+export const HISTORY_METHOD_CALL = '@@router/HISTORY_METHOD_CALL';
+
+const createHistoryMethodCaller = (method) => {
+  return (...args) => ({
+    type: HISTORY_METHOD_CALL,
+    payload: {
+      method,
+      args,
+    },
+  });
+};
+
+export const push = createHistoryMethodCaller('push');
+export const replace = createHistoryMethodCaller('replace');
+export const go = createHistoryMethodCaller('go');
+export const back = createHistoryMethodCaller('back');
+export const forward = createHistoryMethodCaller('forward');

client/src/lib/redux-router/create-router-middleware.js

@@ -0,0 +1,18 @@
+import { HISTORY_METHOD_CALL } from './actions';
+
+const createRouterMiddleware = (history) => {
+  // eslint-disable-next-line consistent-return
+  return () => (next) => (action) => {
+    if (action.type !== HISTORY_METHOD_CALL) {
+      return next(action);
+    }
+
+    const {
+      payload: { method, args },
+    } = action;
+
+    history[method](...args);
+  };
+};
+
+export default createRouterMiddleware;

client/src/lib/redux-router/create-router-reducer.js

@@ -0,0 +1,28 @@
+import { LOCATION_CHANGE_HANDLE } from './actions';
+
+const createRouterReducer = (history) => {
+  const initialState = {
+    location: history.location,
+    action: history.action,
+  };
+
+  return (state = initialState, { type, payload } = {}) => {
+    if (type === LOCATION_CHANGE_HANDLE) {
+      const { location, action, isFirstRendering } = payload;
+
+      if (isFirstRendering) {
+        return state;
+      }
+
+      return {
+        ...state,
+        location,
+        action,
+      };
+    }
+
+    return state;
+  };
+};
+
+export default createRouterReducer;

client/src/lib/redux-router/index.js

@@ -0,0 +1,12 @@
+export {
+  LOCATION_CHANGE_HANDLE,
+  HISTORY_METHOD_CALL,
+  push,
+  replace,
+  go,
+  back,
+  forward,
+} from './actions';
+export { default as createRouterReducer } from './create-router-reducer';
+export { default as createRouterMiddleware } from './create-router-middleware';
+export { default as ReduxRouter } from './ReduxRouter';

client/src/locales/en/core.js

@@ -9,6 +9,7 @@ export default {
 
   translation: {
     common: {
+      aboutPlanka: 'About Planka',
       account: 'Account',
       actions: 'Actions',
       addAttachment_title: 'Add Attachment',
@@ -92,8 +93,10 @@ export default {
       filterByLabels_title: 'Filter By Labels',
       filterByMembers_title: 'Filter By Members',
       fromComputer_title: 'From Computer',
+      fromTrello: 'From Trello',
       general: 'General',
       hours: 'Hours',
+      importBoard_title: 'Import Board',
       invalidCurrentPassword: 'Invalid current password',
       labels: 'Labels',
       language: 'Language',
@@ -201,6 +204,7 @@ export default {
       editTitle_title: 'Edit Title',
       editUsername_title: 'Edit Username',
       hideDetails: 'Hide details',
+      import: 'Import',
       leaveBoard: 'Leave board',
       leaveProject: 'Leave project',
       logOut_title: 'Log Out',

client/src/models/Activity.js

@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'Activity';
 
   static fields = {

client/src/models/Attachment.js

@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'Attachment';
 
   static fields = {

client/src/models/BaseModel.js

@@ -0,0 +1,6 @@
+import { Model } from 'redux-orm';
+
+export default class BaseModel extends Model {
+  // eslint-disable-next-line no-underscore-dangle, class-methods-use-this
+  _onDelete() {}
+}

client/src/models/Board.js

@@ -1,13 +1,13 @@
-import { Model, attr, fk, many } from 'redux-orm';
+import { attr, fk, many } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'Board';
 
   static fields = {
     id: attr(),
-    type: attr(),
     position: attr(),
     name: attr(),
     isFetching: attr({
@@ -30,11 +30,12 @@ export default class extends Model {
   static reducer({ type, payload }, Board) {
     switch (type) {
       case ActionTypes.LOCATION_CHANGE_HANDLE:
-      case ActionTypes.BOARD_FETCH__SUCCESS:
-        Board.upsert({
-          ...payload.board,
-          isFetching: false,
-        });
+        if (payload.board) {
+          Board.upsert({
+            ...payload.board,
+            isFetching: false,
+          });
+        }
 
         break;
       case ActionTypes.LOCATION_CHANGE_HANDLE__BOARD_FETCH:
@@ -124,7 +125,10 @@ export default class extends Model {
         break;
       case ActionTypes.BOARD_CREATE__SUCCESS:
         Board.withId(payload.localId).delete();
+        Board.upsert(payload.board);
 
+        break;
+      case ActionTypes.BOARD_FETCH__SUCCESS:
         Board.upsert({
           ...payload.board,
           isFetching: false,
@@ -175,7 +179,7 @@ export default class extends Model {
     return this.lists.orderBy('position');
   }
 
-  getMembershipModel(userId) {
+  getMembershipModelForUser(userId) {
     return this.memberships
       .filter({
         userId,
@@ -183,7 +187,7 @@ export default class extends Model {
       .first();
   }
 
-  hasMemberUser(userId) {
+  hasMembershipForUser(userId) {
     return this.memberships
       .filter({
         userId,
@@ -191,6 +195,12 @@ export default class extends Model {
       .exists();
   }
 
+  isAvailableForUser(userId) {
+    return (
+      this.project && (this.project.hasManagerForUser(userId) || this.hasMembershipForUser(userId))
+    );
+  }
+
   deleteRelated(exceptMemberUserId) {
     this.memberships.toModelArray().forEach((boardMembershipModel) => {
       if (boardMembershipModel.userId !== exceptMemberUserId) {

client/src/models/BoardMembership.js

@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'BoardMembership';
 
   static fields = {

client/src/models/Card.js

@@ -1,10 +1,11 @@
-import { Model, attr, fk, many, oneToOne } from 'redux-orm';
+import { attr, fk, many, oneToOne } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 import Config from '../constants/Config';
 import { ActivityTypes } from '../constants/Enums';
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'Card';
 
   static fields = {
@@ -74,7 +75,11 @@ export default class extends Model {
 
         break;
       case ActionTypes.SOCKET_RECONNECT_HANDLE:
-        Card.all().delete();
+        Card.all()
+          .toModelArray()
+          .forEach((cardModel) => {
+            cardModel.deleteWithClearable();
+          });
 
         if (payload.cards) {
           payload.cards.forEach((card) => {
@@ -176,7 +181,7 @@ export default class extends Model {
 
         break;
       case ActionTypes.CARD_DELETE:
-        Card.withId(payload.id).delete();
+        Card.withId(payload.id).deleteWithRelated();
 
         break;
       case ActionTypes.CARD_DELETE__SUCCESS:
@@ -220,15 +225,7 @@ export default class extends Model {
           isActivitiesDetailsFetching: false,
         });
 
-        cardModel.activities.toModelArray().forEach((activityModel) => {
-          if (activityModel.notification) {
-            activityModel.update({
-              isInCard: false,
-            });
-          } else {
-            activityModel.delete();
-          }
-        });
+        cardModel.deleteActivities();
 
         break;
       }
@@ -268,10 +265,37 @@ export default class extends Model {
     });
   }
 
+  isAvailableForUser(userId) {
+    return this.board && this.board.isAvailableForUser(userId);
+  }
+
+  deleteClearable() {
+    this.users.clear();
+    this.labels.clear();
+  }
+
+  deleteActivities() {
+    this.activities.toModelArray().forEach((activityModel) => {
+      if (activityModel.notification) {
+        activityModel.update({
+          isInCard: false,
+        });
+      } else {
+        activityModel.delete();
+      }
+    });
+  }
+
   deleteRelated() {
+    this.deleteClearable();
     this.tasks.delete();
     this.attachments.delete();
-    this.activities.delete();
+    this.deleteActivities();
+  }
+
+  deleteWithClearable() {
+    this.deleteClearable();
+    this.delete();
   }
 
   deleteWithRelated() {

client/src/models/Label.js

@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'Label';
 
   static fields = {

client/src/models/List.js

@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'List';
 
   static fields = {

client/src/models/Notification.js

@@ -1,8 +1,9 @@
-import { Model, attr, fk, oneToOne } from 'redux-orm';
+import { attr, fk, oneToOne } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'Notification';
 
   static fields = {

client/src/models/Project.js

@@ -1,9 +1,10 @@
-import { Model, attr, many } from 'redux-orm';
+import { attr, many } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 import { ProjectBackgroundTypes } from '../constants/Enums';
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'Project';
 
   static fields = {
@@ -143,21 +144,21 @@ export default class extends Model {
     return this.boards.orderBy('position');
   }
 
-  getOrderedMemberBoardsModelArray(userId) {
+  getOrderedBoardsModelArrayForUser(userId) {
     return this.getOrderedBoardsQuerySet()
       .toModelArray()
-      .filter((boardModel) => boardModel.hasMemberUser(userId));
+      .filter((boardModel) => boardModel.hasMembershipForUser(userId));
   }
 
-  getOrderedAvailableBoardsModelArray(userId) {
-    if (this.hasManagerUser(userId)) {
+  getOrderedBoardsModelArrayAvailableForUser(userId) {
+    if (this.hasManagerForUser(userId)) {
       return this.getOrderedBoardsQuerySet().toModelArray();
     }
 
-    return this.getOrderedMemberBoardsModelArray(userId);
+    return this.getOrderedBoardsModelArrayForUser(userId);
   }
 
-  hasManagerUser(userId) {
+  hasManagerForUser(userId) {
     return this.managers
       .filter({
         userId,
@@ -165,8 +166,12 @@ export default class extends Model {
       .exists();
   }
 
-  hasMemberUserForAnyBoard(userId) {
-    return this.boards.toModelArray().some((boardModel) => boardModel.hasMemberUser(userId));
+  hasMembershipInAnyBoardForUser(userId) {
+    return this.boards.toModelArray().some((boardModel) => boardModel.hasMembershipForUser(userId));
+  }
+
+  isAvailableForUser(userId) {
+    return this.hasManagerForUser(userId) || this.hasMembershipInAnyBoardForUser(userId);
   }
 
   deleteRelated() {

client/src/models/ProjectManager.js

@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'ProjectManager';
 
   static fields = {

client/src/models/Task.js

@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'Task';
 
   static fields = {

client/src/models/User.js

@@ -1,5 +1,6 @@
-import { Model, attr } from 'redux-orm';
+import { attr } from 'redux-orm';
 
+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 
 const DEFAULT_EMAIL_UPDATE_FORM = {
@@ -29,7 +30,7 @@ const DEFAULT_USERNAME_UPDATE_FORM = {
   error: null,
 };
 
-export default class extends Model {
+export default class extends BaseModel {
   static modelName = 'User';
 
   static fields = {

client/src/reducers/core.js

@@ -1,4 +1,4 @@
-import { LOCATION_CHANGE } from 'connected-react-router';
+import { LOCATION_CHANGE_HANDLE } from '../lib/redux-router';
 
 import ActionTypes from '../constants/ActionTypes';
 import ModalTypes from '../constants/ModalTypes';
@@ -12,7 +12,7 @@ const initialState = {
 // eslint-disable-next-line default-param-last
 export default (state = initialState, { type, payload }) => {
   switch (type) {
-    case LOCATION_CHANGE:
+    case LOCATION_CHANGE_HANDLE:
     case ActionTypes.MODAL_CLOSE:
       return {
         ...state,

client/src/reducers/router.js

@@ -1,5 +1,5 @@
-import { connectRouter } from 'connected-react-router';
+import { createRouterReducer } from '../lib/redux-router';
 
 import history from '../history';
 
-export default connectRouter(history);
+export default createRouterReducer(history);

client/src/sagas/core/requests/boards.js

@@ -23,9 +23,9 @@ export function* fetchBoardByCurrentPath() {
 
   if (pathsMatch) {
     let boardId;
-    if (pathsMatch.path === Paths.BOARDS) {
+    if (pathsMatch.pattern.path === Paths.BOARDS) {
       boardId = pathsMatch.params.id;
-    } else if (pathsMatch.path === Paths.CARDS) {
+    } else if (pathsMatch.pattern.path === Paths.CARDS) {
       ({
         item: card,
         item: { boardId },

client/src/sagas/core/services/boards.js

@@ -7,7 +7,7 @@ import actions from '../../../actions';
 import api from '../../../api';
 import { createLocalId } from '../../../utils/local-id';
 
-export function* createBoard(projectId, data) {
+export function* createBoard(projectId, { import: boardImport, ...data }) {
   const nextData = {
     ...data,
     position: yield select(selectors.selectNextBoardPosition, projectId),
@@ -30,7 +30,19 @@ export function* createBoard(projectId, data) {
     ({
       item: board,
       included: { boardMemberships },
-    } = yield call(request, api.createBoard, projectId, nextData));
+    } = yield boardImport
+      ? call(
+          request,
+          api.createBoardWithImport,
+          projectId,
+          {
+            ...nextData,
+            importType: boardImport.type,
+            importFile: boardImport.file,
+          },
+          localId,
+        )
+      : call(request, api.createBoard, projectId, nextData));
   } catch (error) {
     yield put(actions.createBoard.failure(localId, error));
     return;
@@ -46,8 +58,12 @@ export function* createBoardInCurrentProject(data) {
   yield call(createBoard, projectId, data);
 }
 
-export function* handleBoardCreate(board) {
-  yield put(actions.handleBoardCreate(board));
+export function* handleBoardCreate(board, requestId) {
+  const isExists = yield select(selectors.selectIsBoardWithIdExists, requestId);
+
+  if (!isExists) {
+    yield put(actions.handleBoardCreate(board));
+  }
 }
 
 export function* fetchBoard(id) {

client/src/sagas/core/services/cards.js

@@ -12,7 +12,6 @@ export function* createCard(listId, data) {
 
   const nextData = {
     ...data,
-    listId,
     position: yield select(selectors.selectNextCardPosition, listId),
   };
 
@@ -22,13 +21,14 @@ export function* createCard(listId, data) {
     actions.createCard({
       ...nextData,
       boardId,
+      listId,
       id: localId,
     }),
   );
 
   let card;
   try {
-    ({ item: card } = yield call(request, api.createCard, boardId, nextData));
+    ({ item: card } = yield call(request, api.createCard, listId, nextData));
   } catch (error) {
     yield put(actions.createCard.failure(localId, error));
     return;
@@ -61,8 +61,9 @@ export function* updateCurrentCard(data) {
   yield call(updateCard, cardId, data);
 }
 
+// TODO: handle card transfer
 export function* handleCardUpdate(card) {
-  yield put(actions.handleCardUpdate(card)); // TODO: handle card transfer
+  yield put(actions.handleCardUpdate(card));
 }
 
 export function* moveCard(id, listId, index) {

client/src/sagas/core/services/lists.js

@@ -39,8 +39,8 @@ export function* createListInCurrentBoard(data) {
   yield call(createList, boardId, data);
 }
 
-export function* handleListCreate(label) {
-  yield put(actions.handleListCreate(label));
+export function* handleListCreate(list) {
+  yield put(actions.handleListCreate(list));
 }
 
 export function* updateList(id, data) {
@@ -57,8 +57,8 @@ export function* updateList(id, data) {
   yield put(actions.updateList.success(list));
 }
 
-export function* handleListUpdate(label) {
-  yield put(actions.handleListUpdate(label));
+export function* handleListUpdate(list) {
+  yield put(actions.handleListUpdate(list));
 }
 
 export function* moveList(id, index) {
@@ -84,8 +84,8 @@ export function* deleteList(id) {
   yield put(actions.deleteList.success(list));
 }
 
-export function* handleListDelete(label) {
-  yield put(actions.handleListDelete(label));
+export function* handleListDelete(list) {
+  yield put(actions.handleListDelete(list));
 }
 
 export default {

client/src/sagas/core/services/project-managers.js

@@ -24,6 +24,7 @@ export function* createProjectManager(projectId, data) {
     ({ item: projectManager } = yield call(request, api.createProjectManager, projectId, data));
   } catch (error) {
     yield put(actions.createProjectManager.failure(localId, error));
+    return;
   }
 
   yield put(actions.createProjectManager.success(localId, projectManager));

client/src/sagas/core/services/projects.js

@@ -53,6 +53,7 @@ export function* updateProject(id, data) {
     ({ item: project } = yield call(request, api.updateProject, id, data));
   } catch (error) {
     yield put(actions.updateProject.failure(id, error));
+    return;
   }
 
   yield put(actions.updateProject.success(project));
@@ -76,6 +77,7 @@ export function* updateProjectBackgroundImage(id, data) {
     ({ item: project } = yield call(request, api.updateProjectBackgroundImage, id, data));
   } catch (error) {
     yield put(actions.updateProjectBackgroundImage.failure(id, error));
+    return;
   }
 
   yield put(actions.updateProjectBackgroundImage.success(project));
@@ -101,6 +103,7 @@ export function* deleteProject(id) {
     ({ item: project } = yield call(request, api.deleteProject, id));
   } catch (error) {
     yield put(actions.deleteProject.failure(id, error));
+    return;
   }
 
   yield put(actions.deleteProject.success(project));

client/src/sagas/core/services/router.js

@@ -1,5 +1,5 @@
 import { call, put, select, take } from 'redux-saga/effects';
-import { push } from 'connected-react-router';
+import { push } from '../../../lib/redux-router';
 
 import request from '../request';
 import selectors from '../../../selectors';
@@ -31,7 +31,7 @@ export function* handleLocationChange() {
     return;
   }
 
-  switch (pathsMatch.path) {
+  switch (pathsMatch.pattern.path) {
     case Paths.LOGIN:
       yield call(goToRoot);
 
@@ -58,7 +58,7 @@ export function* handleLocationChange() {
   let attachments;
   let deletedNotifications;
 
-  switch (pathsMatch.path) {
+  switch (pathsMatch.pattern.path) {
     case Paths.BOARDS:
     case Paths.CARDS: {
       const currentBoard = yield select(selectors.selectCurrentBoard);
@@ -85,7 +85,7 @@ export function* handleLocationChange() {
         } catch (error) {} // eslint-disable-line no-empty
       }
 
-      if (pathsMatch.path === Paths.CARDS) {
+      if (pathsMatch.pattern.path === Paths.CARDS) {
         const notificationIds = yield select(selectors.selectNotificationIdsForCurrentCard);
 
         if (notificationIds && notificationIds.length > 0) {

client/src/sagas/core/watchers/boards.js

@@ -8,8 +8,8 @@ export default function* boardsWatchers() {
     takeEvery(EntryActionTypes.BOARD_IN_CURRENT_PROJECT_CREATE, ({ payload: { data } }) =>
       services.createBoardInCurrentProject(data),
     ),
-    takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board } }) =>
-      services.handleBoardCreate(board),
+    takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board, requestId } }) =>
+      services.handleBoardCreate(board, requestId),
     ),
     takeEvery(EntryActionTypes.BOARD_FETCH, ({ payload: { id } }) => services.fetchBoard(id)),
     takeEvery(EntryActionTypes.BOARD_UPDATE, ({ payload: { id, data } }) =>

client/src/sagas/core/watchers/router.js

@@ -1,8 +1,8 @@
 import { takeEvery } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'connected-react-router';
+import { LOCATION_CHANGE_HANDLE } from '../../../lib/redux-router';
 
 import services from '../services';
 
 export default function* routerWatchers() {
-  yield takeEvery(LOCATION_CHANGE, () => services.handleLocationChange());
+  yield takeEvery(LOCATION_CHANGE_HANDLE, () => services.handleLocationChange());
 }

client/src/sagas/core/watchers/socket.js

@@ -48,8 +48,8 @@ const createSocketEventsChannel = () =>
       emit(entryActions.handleProjectManagerDelete(item));
     };
 
-    const handleBoardCreate = ({ item }) => {
-      emit(entryActions.handleBoardCreate(item));
+    const handleBoardCreate = ({ item, requestId }) => {
+      emit(entryActions.handleBoardCreate(item, requestId));
     };
 
     const handleBoardUpdate = ({ item }) => {

client/src/sagas/login/services/router.js

@@ -1,5 +1,5 @@
 import { call, put, select } from 'redux-saga/effects';
-import { push } from 'connected-react-router';
+import { push } from '../../../lib/redux-router';
 
 import selectors from '../../../selectors';
 import Paths from '../../../constants/Paths';
@@ -19,7 +19,7 @@ export function* handleLocationChange() {
     return;
   }
 
-  switch (pathsMatch.path) {
+  switch (pathsMatch.pattern.path) {
     case Paths.ROOT:
     case Paths.PROJECTS:
     case Paths.BOARDS:

client/src/sagas/login/watchers/router.js

@@ -1,8 +1,8 @@
 import { takeEvery } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'connected-react-router';
+import { LOCATION_CHANGE_HANDLE } from '../../../lib/redux-router';
 
 import services from '../services';
 
 export default function* routerWatchers() {
-  yield takeEvery(LOCATION_CHANGE, () => services.handleLocationChange());
+  yield takeEvery(LOCATION_CHANGE_HANDLE, () => services.handleLocationChange());
 }