fix: Proper image error handling during migration

Closes #349

README.md

@@ -261,7 +261,7 @@ fail2ban-client status planka
 
 ### Import from Trello
 
-It is not yet implemented inside Planka, but for now you can use the great tool [trello2planka](https://github.com/christophenne/trello2planka) to do the import.
+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
 

client/package-lock.json

@@ -32,13 +32,11 @@
         "react-markdown": "^8.0.3",
         "react-photoswipe-gallery": "^2.2.2",
         "react-redux": "^8.0.5",
-        "react-router": "^6.4.3",
         "react-router-dom": "^6.4.3",
         "react-scripts": "5.0.1",
         "react-simplemde-editor": "^5.2.0",
         "react-textarea-autosize": "^8.4.0",
         "redux": "^4.2.0",
-        "redux-first-history": "^5.1.1",
         "redux-logger": "^3.0.6",
         "redux-orm": "^0.16.2",
         "redux-saga": "^1.2.1",
@@ -19949,15 +19947,6 @@
         "@babel/runtime": "^7.9.2"
       }
     },
-    "node_modules/redux-first-history": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/redux-first-history/-/redux-first-history-5.1.1.tgz",
-      "integrity": "sha512-ujVHv+y9wC2rqavS5tLiSu6zkw+VYrEea+/ggwVTRuutadEtwxSRlaK19ry/PTLSQtFuUF1Xu+plL5erD4roVw==",
-      "peerDependencies": {
-        "history": "^4.7.2 || ^5.0",
-        "redux": "^3.6.0 || ^4.0.0"
-      }
-    },
     "node_modules/redux-logger": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
@@ -37850,12 +37839,6 @@
         "@babel/runtime": "^7.9.2"
       }
     },
-    "redux-first-history": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/redux-first-history/-/redux-first-history-5.1.1.tgz",
-      "integrity": "sha512-ujVHv+y9wC2rqavS5tLiSu6zkw+VYrEea+/ggwVTRuutadEtwxSRlaK19ry/PTLSQtFuUF1Xu+plL5erD4roVw==",
-      "requires": {}
-    },
     "redux-logger": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",

client/package.json

@@ -79,13 +79,11 @@
     "react-markdown": "^8.0.3",
     "react-photoswipe-gallery": "^2.2.2",
     "react-redux": "^8.0.5",
-    "react-router": "^6.4.3",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "react-simplemde-editor": "^5.2.0",
     "react-textarea-autosize": "^8.4.0",
     "redux": "^4.2.0",
-    "redux-first-history": "^5.1.1",
     "redux-logger": "^3.0.6",
     "redux-orm": "^0.16.2",
     "redux-saga": "^1.2.1",

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/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/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,116 @@
+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,
+      type: 'kanban',
+      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();
+  }, []);
+
+  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/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/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/Root.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { Route, Routes } from 'react-router-dom';
-import { HistoryRouter as Router } from 'redux-first-history/rr6';
+import { ReduxRouter } from '../lib/redux-router';
 
 import Paths from '../constants/Paths';
 import LoginContainer from '../containers/LoginContainer';
@@ -19,7 +19,7 @@ import '../styles.module.scss';
 function Root({ store, history }) {
   return (
     <Provider store={store}>
-      <Router history={history}>
+      <ReduxRouter history={history}>
         <Routes>
           <Route path={Paths.LOGIN} element={<LoginContainer />} />
           <Route path={Paths.ROOT} element={<CoreWrapperContainer />} />
@@ -28,7 +28,7 @@ function Root({ store, history }) {
           <Route path={Paths.CARDS} element={<CoreWrapperContainer />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
-      </Router>
+      </ReduxRouter>
     </Provider>
   );
 }

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/containers/CardModalContainer.js

@@ -1,7 +1,7 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { push } from 'redux-first-history';
 import omit from 'lodash/omit';
+import { push } from '../lib/redux-router';
 
 import selectors from '../selectors';
 import entryActions from '../entry-actions';

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/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history';
+
+export default createBrowserHistory();

client/src/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-import store, { history } from './store';
+import store from './store';
+import history from './history';
 import Root from './components/Root';
 
 import './i18n';

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

@@ -80,8 +80,10 @@ export default (WrappedComponent, defaultProps) => {
         popperModifiers={[
           {
             name: 'preventOverflow',
+            enabled: true,
             options: {
-              boundariesElement: 'window',
+              altAxis: true,
+              padding: 20,
             },
           },
         ]}

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/Board.js

@@ -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,

client/src/reducers/core.js

@@ -1,4 +1,4 @@
-import { LOCATION_CHANGE } from 'redux-first-history';
+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,3 +1,5 @@
-import { routerReducer } from '../redux-history-context';
+import { createRouterReducer } from '../lib/redux-router';
 
-export default routerReducer;
+import history from '../history';
+
+export default createRouterReducer(history);

client/src/redux-history-context.js

@@ -1,6 +0,0 @@
-import { createBrowserHistory } from 'history';
-import { createReduxHistoryContext } from 'redux-first-history';
-
-export const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({
-  history: createBrowserHistory(),
-});

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/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 'redux-first-history';
+import { push } from '../../../lib/redux-router';
 
 import request from '../request';
 import selectors from '../../../selectors';

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 'redux-first-history';
+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 'redux-first-history';
+import { push } from '../../../lib/redux-router';
 
 import selectors from '../../../selectors';
 import Paths from '../../../constants/Paths';

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

@@ -1,8 +1,8 @@
 import { takeEvery } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'redux-first-history';
+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/selectors/boards.js

@@ -172,6 +172,12 @@ export const selectCurrentUserMembershipForCurrentBoard = createSelector(
   },
 );
 
+export const selectIsBoardWithIdExists = createSelector(
+  orm,
+  (_, id) => id,
+  ({ Board }, id) => Board.idExists(id),
+);
+
 export default {
   makeSelectBoardById,
   selectBoardById,
@@ -182,4 +188,5 @@ export default {
   selectFilterUsersForCurrentBoard,
   selectFilterLabelsForCurrentBoard,
   selectCurrentUserMembershipForCurrentBoard,
+  selectIsBoardWithIdExists,
 };

client/src/store.js

@@ -1,13 +1,14 @@
 import { applyMiddleware, legacy_createStore as createStore, compose as reduxCompose } from 'redux';
 import createSagaMiddleware from 'redux-saga';
+import { createRouterMiddleware } from './lib/redux-router';
 
 import rootReducer from './reducers';
 import rootSaga from './sagas';
-import { createReduxHistory, routerMiddleware } from './redux-history-context';
+import history from './history';
 
 const sagaMiddleware = createSagaMiddleware();
 
-const middlewares = [sagaMiddleware, routerMiddleware];
+const middlewares = [sagaMiddleware, createRouterMiddleware(history)];
 
 let compose = reduxCompose;
 
@@ -22,10 +23,6 @@ if (process.env.NODE_ENV !== 'production') {
   }
 }
 
-const store = createStore(rootReducer, compose(applyMiddleware(...middlewares)));
+export default createStore(rootReducer, compose(applyMiddleware(...middlewares)));
 
 sagaMiddleware.run(rootSaga);
-
-export default store;
-
-export const history = createReduxHistory(store);

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "planka",
-  "version": "1.8.7",
+  "version": "1.9.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "planka",
-      "version": "1.8.7",
+      "version": "1.9.1",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "planka",
-  "version": "1.8.7",
+  "version": "1.9.1",
   "private": true,
   "homepage": "https://plankanban.github.io/planka",
   "repository": {

server/api/controllers/attachments/download-thumbnail.js

@@ -50,7 +50,7 @@ module.exports = {
       sails.config.custom.attachmentsPath,
       attachment.dirname,
       'thumbnails',
-      'cover-256.jpg',
+      `cover-256.${attachment.image.thumbnailsExtension}`,
     );
 
     if (!fs.existsSync(filePath)) {

server/api/controllers/boards/create.js

@@ -1,7 +1,16 @@
+const util = require('util');
+const { v4: uuid } = require('uuid');
+
 const Errors = {
   PROJECT_NOT_FOUND: {
     projectNotFound: 'Project not found',
   },
+  NO_IMPORT_FILE_WAS_UPLOADED: {
+    noImportFileWasUploaded: 'No import file was uploaded',
+  },
+  INVALID_IMPORT_FILE: {
+    invalidImportFile: 'Invalid import file',
+  },
 };
 
 module.exports = {
@@ -24,12 +33,26 @@ module.exports = {
       type: 'string',
       required: true,
     },
+    importType: {
+      type: 'string',
+      isIn: Object.values(Board.ImportTypes),
+    },
+    requestId: {
+      type: 'string',
+      isNotEmptyString: true,
+    },
   },
 
   exits: {
     projectNotFound: {
       responseType: 'notFound',
     },
+    noImportFileWasUploaded: {
+      responseType: 'unprocessableEntity',
+    },
+    uploadError: {
+      responseType: 'unprocessableEntity',
+    },
   },
 
   async fn(inputs) {
@@ -49,10 +72,42 @@ module.exports = {
 
     const values = _.pick(inputs, ['type', 'position', 'name']);
 
+    let boardImport;
+    if (inputs.importType && Object.values(Board.ImportTypes).includes(inputs.importType)) {
+      const upload = util.promisify((options, callback) =>
+        this.req.file('importFile').upload(options, (error, files) => callback(error, files)),
+      );
+
+      let files;
+      try {
+        files = await upload({
+          saveAs: uuid(),
+          maxBytes: null,
+        });
+      } catch (error) {
+        return exits.uploadError(error.message); // TODO: add error
+      }
+
+      if (files.length === 0) {
+        throw Errors.NO_IMPORT_FILE_WAS_UPLOADED;
+      }
+
+      const file = _.last(files);
+
+      if (inputs.importType === Board.ImportTypes.TRELLO) {
+        boardImport = {
+          type: inputs.importType,
+          board: await sails.helpers.boards.processUploadedTrelloImportFile(file),
+        };
+      }
+    }
+
     const { board, boardMembership } = await sails.helpers.boards.createOne(
       values,
+      boardImport,
       currentUser,
       project,
+      inputs.requestId,
       this.req,
     );
 

server/api/controllers/projects/update-background-image.js

@@ -88,7 +88,7 @@ module.exports = {
     project = await sails.helpers.projects.updateOne(
       project,
       {
-        backgroundImageDirname: fileData.dirname,
+        backgroundImage: fileData,
       },
       this.req,
     );

server/api/controllers/users/update-avatar.js

@@ -89,7 +89,7 @@ module.exports = {
     user = await sails.helpers.users.updateOne(
       user,
       {
-        avatarDirname: fileData.dirname,
+        avatar: fileData,
       },
       currentUser,
       this.req,

server/api/controllers/users/update.js

@@ -65,15 +65,17 @@ module.exports = {
       throw Errors.USER_NOT_FOUND;
     }
 
-    const values = _.pick(inputs, [
-      'isAdmin',
-      'name',
-      'avatarUrl',
-      'phone',
-      'organization',
-      'language',
-      'subscribeToOwnCards',
-    ]);
+    const values = {
+      ..._.pick(inputs, [
+        'isAdmin',
+        'name',
+        'phone',
+        'organization',
+        'language',
+        'subscribeToOwnCards',
+      ]),
+      avatar: inputs.avatarUrl,
+    };
 
     user = await sails.helpers.users.updateOne(user, values, currentUser, this.req);
 

server/api/helpers/attachments/process-uploaded-file.js

@@ -26,9 +26,11 @@ module.exports = {
     fs.mkdirSync(rootPath);
     await moveFile(inputs.file.fd, filePath);
 
-    const image = sharp(filePath);
-    let metadata;
+    const image = sharp(filePath, {
+      animated: true,
+    });
 
+    let metadata;
     try {
       metadata = await image.metadata();
     } catch (error) {} // eslint-disable-line no-empty
@@ -44,25 +46,21 @@ module.exports = {
       const thumbnailsPath = path.join(rootPath, 'thumbnails');
       fs.mkdirSync(thumbnailsPath);
 
+      const { width, pageHeight: height = metadata.height } = metadata;
+      const thumbnailsExtension = metadata.format === 'jpeg' ? 'jpg' : metadata.format;
+
       try {
         await image
-          .resize(
-            metadata.height > metadata.width
-              ? {
-                  width: 256,
-                  height: 320,
-                }
-              : {
-                  width: 256,
-                },
-          )
-          .jpeg({
-            quality: 100,
-            chromaSubsampling: '4:4:4',
+          .resize(256, height > width ? 320 : undefined, {
+            kernel: sharp.kernel.nearest,
           })
-          .toFile(path.join(thumbnailsPath, 'cover-256.jpg'));
+          .toFile(path.join(thumbnailsPath, `cover-256.${thumbnailsExtension}`));
 
-        fileData.image = _.pick(metadata, ['width', 'height']);
+        fileData.image = {
+          width,
+          height,
+          thumbnailsExtension,
+        };
       } catch (error1) {
         try {
           rimraf.sync(thumbnailsPath);

server/api/helpers/boards/create-one.js

@@ -5,6 +5,13 @@ module.exports = {
       custom: (value) => _.isPlainObject(value) && _.isFinite(value.position),
       required: true,
     },
+    import: {
+      type: 'json',
+      custom: (value) =>
+        value.type &&
+        Object.values(Board.ImportTypes).includes(value.type) &&
+        _.isPlainObject(value.board),
+    },
     user: {
       type: 'ref',
       required: true,
@@ -13,6 +20,10 @@ module.exports = {
       type: 'ref',
       required: true,
     },
+    requestId: {
+      type: 'string',
+      isNotEmptyString: true,
+    },
     request: {
       type: 'ref',
     },
@@ -54,6 +65,10 @@ module.exports = {
       projectId: inputs.project.id,
     }).fetch();
 
+    if (inputs.import && inputs.import.type === Board.ImportTypes.TRELLO) {
+      await sails.helpers.boards.importFromTrello(inputs.user, board, inputs.import.board);
+    }
+
     const boardMembership = await BoardMembership.create({
       boardId: board.id,
       userId: inputs.user.id,
@@ -66,6 +81,7 @@ module.exports = {
         'boardCreate',
         {
           item: board,
+          requestId: inputs.requestId,
         },
         inputs.request,
       );

server/api/helpers/boards/import-from-trello.js

@@ -0,0 +1,152 @@
+module.exports = {
+  inputs: {
+    user: {
+      type: 'ref',
+      required: true,
+    },
+    board: {
+      type: 'ref',
+      required: true,
+    },
+    trelloBoard: {
+      type: 'json',
+      required: true,
+    },
+  },
+
+  async fn(inputs) {
+    const trelloToPlankaLabels = {};
+
+    const getTrelloLists = () => inputs.trelloBoard.lists.filter((list) => !list.closed);
+
+    const getUsedTrelloLabels = () => {
+      const result = {};
+      inputs.trelloBoard.cards
+        .map((card) => card.labels)
+        .flat()
+        .forEach((label) => {
+          result[label.id] = label;
+        });
+
+      return Object.values(result);
+    };
+
+    const getTrelloCardsOfList = (listId) =>
+      inputs.trelloBoard.cards.filter((card) => card.idList === listId && !card.closed);
+
+    const getAllTrelloCheckItemsOfCard = (cardId) =>
+      inputs.trelloBoard.checklists
+        .filter((checklist) => checklist.idCard === cardId)
+        .map((checklist) => checklist.checkItems)
+        .flat();
+
+    const getTrelloCommentsOfCard = (cardId) =>
+      inputs.trelloBoard.actions.filter(
+        (action) =>
+          action.type === 'commentCard' &&
+          action.data &&
+          action.data.card &&
+          action.data.card.id === cardId,
+      );
+
+    const getPlankaLabelColor = (trelloLabelColor) =>
+      Label.COLORS.find((color) => color.indexOf(trelloLabelColor) !== -1) || 'desert-sand';
+
+    const importCardLabels = async (plankaCard, trelloCard) => {
+      return Promise.all(
+        trelloCard.labels.map(async (trelloLabel) => {
+          return CardLabel.create({
+            cardId: plankaCard.id,
+            labelId: trelloToPlankaLabels[trelloLabel.id].id,
+          });
+        }),
+      );
+    };
+
+    const importTasks = async (plankaCard, trelloCard) => {
+      // TODO find workaround for tasks/checklist mismapping, see issue trello2planka#5
+      return Promise.all(
+        getAllTrelloCheckItemsOfCard(trelloCard.id).map(async (trelloCheckItem) => {
+          return Task.create({
+            cardId: plankaCard.id,
+            position: trelloCheckItem.pos,
+            name: trelloCheckItem.name,
+            isCompleted: trelloCheckItem.state === 'complete',
+          }).fetch();
+        }),
+      );
+    };
+
+    const importComments = async (plankaCard, trelloCard) => {
+      const trelloComments = getTrelloCommentsOfCard(trelloCard.id);
+      trelloComments.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+
+      return Promise.all(
+        trelloComments.map(async (trelloComment) => {
+          return Action.create({
+            cardId: plankaCard.id,
+            userId: inputs.user.id,
+            type: 'commentCard',
+            data: {
+              text:
+                `${trelloComment.data.text}\n\n---\n*Note: imported comment, originally posted by ` +
+                `\n${trelloComment.memberCreator.fullName} (${trelloComment.memberCreator.username}) on ${trelloComment.date}*`,
+            },
+          }).fetch();
+        }),
+      );
+    };
+
+    const importCards = async (plankaList, trelloList) => {
+      return Promise.all(
+        getTrelloCardsOfList(trelloList.id).map(async (trelloCard) => {
+          const plankaCard = await Card.create({
+            boardId: inputs.board.id,
+            listId: plankaList.id,
+            creatorUserId: inputs.user.id,
+            position: trelloCard.pos,
+            name: trelloCard.name,
+            description: trelloCard.desc || null,
+          }).fetch();
+
+          await importCardLabels(plankaCard, trelloCard);
+          await importTasks(plankaCard, trelloCard);
+          await importComments(plankaCard, trelloCard);
+
+          return plankaCard;
+        }),
+      );
+    };
+
+    const importLabels = async () => {
+      return Promise.all(
+        getUsedTrelloLabels().map(async (trelloLabel) => {
+          const plankaLabel = await Label.create({
+            boardId: inputs.board.id,
+            name: trelloLabel.name || null,
+            color: getPlankaLabelColor(trelloLabel.color),
+          }).fetch();
+
+          trelloToPlankaLabels[trelloLabel.id] = plankaLabel;
+        }),
+      );
+    };
+
+    const importLists = async () => {
+      return Promise.all(
+        getTrelloLists().map(async (trelloList) => {
+          const plankaList = await List.create({
+            boardId: inputs.board.id,
+            name: trelloList.name,
+            position: trelloList.pos,
+          }).fetch();
+
+          return importCards(plankaList, trelloList);
+        }),
+      );
+    };
+
+    await importLabels();
+    await importLists();
+  },
+};

server/api/helpers/boards/process-uploaded-trello-import-file.js

@@ -0,0 +1,38 @@
+const fs = require('fs').promises;
+const rimraf = require('rimraf');
+
+module.exports = {
+  inputs: {
+    file: {
+      type: 'json',
+      required: true,
+    },
+  },
+
+  exits: {
+    invalidFile: {},
+  },
+
+  async fn(inputs) {
+    const content = await fs.readFile(inputs.file.fd);
+    const trelloBoard = JSON.parse(content);
+
+    if (
+      !trelloBoard ||
+      !_.isArray(trelloBoard.lists) ||
+      !_.isArray(trelloBoard.cards) ||
+      !_.isArray(trelloBoard.checklists) ||
+      !_.isArray(trelloBoard.actions)
+    ) {
+      throw 'invalidFile';
+    }
+
+    try {
+      rimraf.sync(inputs.file.fd);
+    } catch (error) {
+      console.warn(error.stack); // eslint-disable-line no-console
+    }
+
+    return trelloBoard;
+  },
+};

server/api/helpers/projects/process-uploaded-background-image-file.js

@@ -17,29 +17,36 @@ module.exports = {
   },
 
   async fn(inputs) {
-    const image = sharp(inputs.file.fd);
+    const image = sharp(inputs.file.fd, {
+      animated: true,
+    });
 
+    let metadata;
     try {
-      await image.metadata();
+      metadata = await image.metadata();
     } catch (error) {
       throw 'fileIsNotImage';
     }
 
+    if (['svg', 'pdf'].includes(metadata.format)) {
+      throw 'fileIsNotImage';
+    }
+
     const dirname = uuid();
     const rootPath = path.join(sails.config.custom.projectBackgroundImagesPath, dirname);
 
     fs.mkdirSync(rootPath);
 
+    const extension = metadata.format === 'jpeg' ? 'jpg' : metadata.format;
+
     try {
-      await image.jpeg().toFile(path.join(rootPath, 'original.jpg'));
+      await image.toFile(path.join(rootPath, `original.${extension}`));
 
       await image
-        .resize(336, 200)
-        .jpeg({
-          quality: 100,
-          chromaSubsampling: '4:4:4',
+        .resize(336, 200, {
+          kernel: sharp.kernel.nearest,
         })
-        .toFile(path.join(rootPath, 'cover-336.jpg'));
+        .toFile(path.join(rootPath, `cover-336.${extension}`));
     } catch (error1) {
       try {
         rimraf.sync(rootPath);
@@ -58,6 +65,7 @@ module.exports = {
 
     return {
       dirname,
+      extension,
     };
   },
 };

server/api/helpers/projects/update-one.js

@@ -14,15 +14,11 @@ module.exports = {
           return false;
         }
 
-        if (
-          !_.isUndefined(value.background) &&
-          !_.isNull(value.background) &&
-          !_.isPlainObject(value.background)
-        ) {
+        if (value.background && !_.isPlainObject(value.background)) {
           return false;
         }
 
-        if (!_.isUndefined(value.backgroundImage) && !_.isNull(value.backgroundImage)) {
+        if (value.backgroundImage && !_.isPlainObject(value.backgroundImage)) {
           return false;
         }
 
@@ -36,24 +32,17 @@ module.exports = {
   },
 
   exits: {
-    backgroundImageDirnameMustBeNotNullInValues: {},
+    backgroundImageMustBeNotNullInValues: {},
   },
 
   async fn(inputs) {
-    if (!_.isUndefined(inputs.values.backgroundImage)) {
-      /* eslint-disable no-param-reassign */
-      inputs.values.backgroundImageDirname = null;
-      delete inputs.values.backgroundImage;
-      /* eslint-enable no-param-reassign */
-    }
-
-    if (inputs.values.backgroundImageDirname) {
+    if (inputs.values.backgroundImage) {
       // eslint-disable-next-line no-param-reassign
       inputs.values.background = {
         type: 'image',
       };
     } else if (
-      _.isNull(inputs.values.backgroundImageDirname) &&
+      _.isNull(inputs.values.backgroundImage) &&
       inputs.record.background &&
       inputs.record.background.type === 'image'
     ) {
@@ -62,14 +51,14 @@ module.exports = {
 
     let project;
     if (inputs.values.background && inputs.values.background.type === 'image') {
-      if (_.isNull(inputs.values.backgroundImageDirname)) {
-        throw 'backgroundImageDirnameMustBeNotNullInValues';
+      if (_.isNull(inputs.values.backgroundImage)) {
+        throw 'backgroundImageMustBeNotNullInValues';
       }
 
-      if (_.isUndefined(inputs.values.backgroundImageDirname)) {
+      if (_.isUndefined(inputs.values.backgroundImage)) {
         project = await Project.updateOne({
           id: inputs.record.id,
-          backgroundImageDirname: {
+          backgroundImage: {
             '!=': null,
           },
         }).set(inputs.values);
@@ -86,14 +75,15 @@ module.exports = {
 
     if (project) {
       if (
-        inputs.record.backgroundImageDirname &&
-        project.backgroundImageDirname !== inputs.record.backgroundImageDirname
+        inputs.record.backgroundImage &&
+        (!project.backgroundImage ||
+          project.backgroundImage.dirname !== inputs.record.backgroundImage.dirname)
       ) {
         try {
           rimraf.sync(
             path.join(
               sails.config.custom.projectBackgroundImagesPath,
-              inputs.record.backgroundImageDirname,
+              inputs.record.backgroundImage.dirname,
             ),
           );
         } catch (error) {

server/api/helpers/users/process-uploaded-avatar-file.js

@@ -17,34 +17,36 @@ module.exports = {
   },
 
   async fn(inputs) {
-    const image = sharp(inputs.file.fd);
+    const image = sharp(inputs.file.fd, {
+      animated: true,
+    });
 
+    let metadata;
     try {
-      await image.metadata();
+      metadata = await image.metadata();
     } catch (error) {
       throw 'fileIsNotImage';
     }
 
+    if (['svg', 'pdf'].includes(metadata.format)) {
+      throw 'fileIsNotImage';
+    }
+
     const dirname = uuid();
     const rootPath = path.join(sails.config.custom.userAvatarsPath, dirname);
 
     fs.mkdirSync(rootPath);
 
+    const extension = metadata.format === 'jpeg' ? 'jpg' : metadata.format;
+
     try {
-      await image
-        .jpeg({
-          quality: 100,
-          chromaSubsampling: '4:4:4',
-        })
-        .toFile(path.join(rootPath, 'original.jpg'));
+      await image.toFile(path.join(rootPath, `original.${extension}`));
 
       await image
-        .resize(100, 100)
-        .jpeg({
-          quality: 100,
-          chromaSubsampling: '4:4:4',
+        .resize(100, 100, {
+          kernel: sharp.kernel.nearest,
         })
-        .toFile(path.join(rootPath, 'square-100.jpg'));
+        .toFile(path.join(rootPath, `square-100.${extension}`));
     } catch (error1) {
       try {
         rimraf.sync(rootPath);
@@ -63,6 +65,7 @@ module.exports = {
 
     return {
       dirname,
+      extension,
     };
   },
 };

server/api/helpers/users/update-one.js

@@ -28,7 +28,7 @@ module.exports = {
           return false;
         }
 
-        if (!_.isUndefined(value.avatarUrl) && !_.isNull(value.avatarUrl)) {
+        if (value.avatar && !_.isPlainObject(value.avatar)) {
           return false;
         }
 
@@ -74,13 +74,6 @@ module.exports = {
       inputs.values.username = inputs.values.username.toLowerCase();
     }
 
-    if (!_.isUndefined(inputs.values.avatarUrl)) {
-      /* eslint-disable no-param-reassign */
-      inputs.values.avatarDirname = null;
-      delete inputs.values.avatarUrl;
-      /* eslint-enable no-param-reassign */
-    }
-
     const user = await User.updateOne({
       id: inputs.record.id,
       deletedAt: null,
@@ -102,9 +95,12 @@ module.exports = {
       );
 
     if (user) {
-      if (inputs.record.avatarDirname && user.avatarDirname !== inputs.record.avatarDirname) {
+      if (
+        inputs.record.avatar &&
+        (!user.avatar || user.avatar.dirname !== inputs.record.avatar.dirname)
+      ) {
         try {
-          rimraf.sync(path.join(sails.config.custom.userAvatarsPath, inputs.record.avatarDirname));
+          rimraf.sync(path.join(sails.config.custom.userAvatarsPath, inputs.record.avatar.dirname));
         } catch (error) {
           console.warn(error.stack); // eslint-disable-line no-console
         }

server/api/models/Attachment.js

@@ -49,10 +49,10 @@ module.exports = {
 
   customToJSON() {
     return {
-      ..._.omit(this, ['dirname', 'filename']),
+      ..._.omit(this, ['dirname', 'filename', 'image.thumbnailsExtension']),
       url: `${sails.config.custom.attachmentsUrl}/${this.id}/download/${this.filename}`,
       coverUrl: this.image
-        ? `${sails.config.custom.attachmentsUrl}/${this.id}/download/thumbnails/cover-256.jpg`
+        ? `${sails.config.custom.attachmentsUrl}/${this.id}/download/thumbnails/cover-256.${this.image.thumbnailsExtension}`
         : null,
     };
   },

server/api/models/Board.js

@@ -10,8 +10,13 @@ const Types = {
   COLLECTION: 'collection',
 };
 
+const ImportTypes = {
+  TRELLO: 'trello',
+};
+
 module.exports = {
   Types,
+  ImportTypes,
 
   attributes: {
     //  ╔═╗╦═╗╦╔╦╗╦╔╦╗╦╦  ╦╔═╗╔═╗

server/api/models/Project.js

@@ -54,11 +54,9 @@ module.exports = {
     background: {
       type: 'json',
     },
-    backgroundImageDirname: {
-      type: 'string',
-      isNotEmptyString: true,
-      allowNull: true,
-      columnName: 'background_image_dirname',
+    backgroundImage: {
+      type: 'json',
+      columnName: 'background_image',
     },
 
     //  ╔═╗╔╦╗╔╗ ╔═╗╔╦╗╔═╗
@@ -82,10 +80,10 @@ module.exports = {
 
   customToJSON() {
     return {
-      ..._.omit(this, ['backgroundImageDirname']),
-      backgroundImage: this.backgroundImageDirname && {
-        url: `${sails.config.custom.projectBackgroundImagesUrl}/${this.backgroundImageDirname}/original.jpg`,
-        coverUrl: `${sails.config.custom.projectBackgroundImagesUrl}/${this.backgroundImageDirname}/cover-336.jpg`,
+      ..._.omit(this, ['backgroundImage']),
+      backgroundImage: this.backgroundImage && {
+        url: `${sails.config.custom.projectBackgroundImagesUrl}/${this.backgroundImage.dirname}/original.${this.backgroundImage.extension}`,
+        coverUrl: `${sails.config.custom.projectBackgroundImagesUrl}/${this.backgroundImage.dirname}/cover-336.${this.backgroundImage.extension}`,
       },
     };
   },

server/api/models/User.js

@@ -37,11 +37,8 @@ module.exports = {
       regex: /^[a-zA-Z0-9]+((_|\.)?[a-zA-Z0-9])*$/,
       allowNull: true,
     },
-    avatarDirname: {
-      type: 'string',
-      isNotEmptyString: true,
-      allowNull: true,
-      columnName: 'avatar_dirname',
+    avatar: {
+      type: 'json',
     },
     phone: {
       type: 'string',
@@ -106,10 +103,10 @@ module.exports = {
 
   customToJSON() {
     return {
-      ..._.omit(this, ['password', 'avatarDirname', 'passwordChangedAt']),
+      ..._.omit(this, ['password', 'avatar', 'passwordChangedAt']),
       avatarUrl:
-        this.avatarDirname &&
-        `${sails.config.custom.userAvatarsUrl}/${this.avatarDirname}/square-100.jpg`,
+        this.avatar &&
+        `${sails.config.custom.userAvatarsUrl}/${this.avatar.dirname}/square-100.${this.avatar.extension}`,
     };
   },
 };

server/config/routes.js

@@ -82,7 +82,7 @@ module.exports.routes = {
     skipAssets: false,
   },
 
-  'GET /attachments/:id/download/thumbnails/cover-256.jpg': {
+  'GET /attachments/:id/download/thumbnails/cover-256.:extension': {
     action: 'attachments/download-thumbnail',
     skipAssets: false,
   },

server/db/migrations/20221003140000_@.js

@@ -0,0 +1,4 @@
+/* Move to new naming by feature */
+
+module.exports.up = () => Promise.resolve();
+module.exports.down = () => Promise.resolve();

server/db/migrations/20221223131625_preserve_original_format_of_images.js

@@ -0,0 +1,118 @@
+const path = require('path');
+const rimraf = require('rimraf');
+const sharp = require('sharp');
+
+const getConfig = require('../../get-config');
+
+const migrateImage = async (knex, tableName, fieldName, prevFieldName) => {
+  await knex.schema.table(tableName, (table) => {
+    /* Columns */
+
+    table.jsonb(fieldName);
+  });
+
+  await knex(tableName)
+    .update({
+      [fieldName]: knex.raw('format(\'{"dirname":"%s","extension":"jpg"}\', ??)::jsonb', [
+        prevFieldName,
+      ]),
+    })
+    .whereNotNull(prevFieldName);
+
+  await knex.schema.table(tableName, (table) => {
+    table.dropColumn(prevFieldName);
+  });
+};
+
+const rollbackImage = async (knex, tableName, fieldName, prevFieldName) => {
+  await knex.schema.table(tableName, (table) => {
+    /* Columns */
+
+    table.text(prevFieldName);
+  });
+
+  await knex(tableName)
+    .update({
+      [prevFieldName]: knex.raw("??->>'dirname'", [fieldName]),
+    })
+    .whereNotNull(fieldName);
+
+  await knex.schema.table(tableName, (table) => {
+    table.dropColumn(fieldName);
+  });
+};
+
+const processAttachmentImage = async (attachment, attachmentsPath) => {
+  const rootPath = path.join(attachmentsPath, attachment.dirname);
+  const thumbnailsPath = path.join(rootPath, 'thumbnails');
+
+  const image = sharp(path.join(rootPath, attachment.filename), {
+    animated: true,
+  });
+
+  let metadata;
+  try {
+    metadata = await image.metadata();
+  } catch (error) {
+    return null;
+  }
+
+  const { width, pageHeight: height = metadata.height } = metadata;
+  const thumbnailsExtension = metadata.format === 'jpeg' ? 'jpg' : metadata.format;
+
+  try {
+    await image
+      .resize(256, height > width ? 320 : undefined, {
+        kernel: sharp.kernel.nearest,
+      })
+      .toFile(path.join(thumbnailsPath, `cover-256.${thumbnailsExtension}`));
+  } catch (error) {
+    return null;
+  }
+
+  if (thumbnailsExtension !== 'jpg') {
+    try {
+      rimraf.sync(path.join(thumbnailsPath, 'cover-256.jpg'));
+    } catch (error) {
+      console.warn(error.stack); // eslint-disable-line no-console
+    }
+  }
+
+  return {
+    width,
+    height,
+    thumbnailsExtension,
+  };
+};
+
+module.exports.up = async (knex) => {
+  await migrateImage(knex, 'user_account', 'avatar', 'avatar_dirname');
+  await migrateImage(knex, 'project', 'background_image', 'background_image_dirname');
+
+  const config = await getConfig();
+  const attachments = await knex('attachment').whereNotNull('image');
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (attachment of attachments) {
+    // eslint-disable-next-line no-await-in-loop
+    const image = await processAttachmentImage(attachment, config.custom.attachmentsPath);
+
+    // eslint-disable-next-line no-await-in-loop
+    await knex('attachment')
+      .update({
+        image: image || knex.raw('?? || \'{"thumbnailsExtension":"jpg"}\'', ['image']),
+      })
+      .where('id', attachment.id);
+  }
+};
+
+module.exports.down = async (knex) => {
+  await rollbackImage(knex, 'user_account', 'avatar', 'avatar_dirname');
+  await rollbackImage(knex, 'project', 'background_image', 'background_image_dirname');
+
+  return knex('attachment')
+    .update({
+      image: knex.raw("?? - 'thumbnailsExtension'", ['image']),
+    })
+    .whereNotNull('image');
+};