feat: Open card once created with Ctrl+Enter (#373)

client/src/components/List/CardAdd.jsx

@@ -21,36 +21,46 @@ const CardAdd = React.memo(({ isOpened, onCreate, onClose }) => {
 
   const nameField = useRef(null);
 
-  const submit = useCallback(() => {
-    const cleanData = {
-      ...data,
-      name: data.name.trim(),
-    };
-
-    if (!cleanData.name) {
-      nameField.current.ref.current.select();
-      return;
-    }
+  const submit = useCallback(
+    (autoOpen) => {
+      const cleanData = {
+        ...data,
+        name: data.name.trim(),
+      };
+
+      if (!cleanData.name) {
+        nameField.current.ref.current.select();
+        return;
+      }
 
-    onCreate(cleanData);
+      onCreate(cleanData, autoOpen);
+      setData(DEFAULT_DATA);
 
-    setData(DEFAULT_DATA);
-    focusNameField();
-  }, [onCreate, data, setData, focusNameField]);
+      if (autoOpen) {
+        onClose();
+      } else {
+        focusNameField();
+      }
+    },
+    [onCreate, onClose, data, setData, focusNameField],
+  );
 
   const handleFieldKeyDown = useCallback(
     (event) => {
       switch (event.key) {
-        case 'Enter':
+        case 'Enter': {
           event.preventDefault();
 
-          submit();
+          const autoOpen = event.ctrlKey;
+          submit(autoOpen);
 
           break;
-        case 'Escape':
+        }
+        case 'Escape': {
           onClose();
 
           break;
+        }
         default:
       }
     },

client/src/containers/ListContainer.js

@@ -34,7 +34,7 @@ const mapDispatchToProps = (dispatch, { id }) =>
     {
       onUpdate: (data) => entryActions.updateList(id, data),
       onDelete: () => entryActions.deleteList(id),
-      onCardCreate: (data) => entryActions.createCard(id, data),
+      onCardCreate: (data, autoOpen) => entryActions.createCard(id, data, autoOpen),
     },
     dispatch,
   );

client/src/entry-actions/cards.js

@@ -1,10 +1,11 @@
 import EntryActionTypes from '../constants/EntryActionTypes';
 
-const createCard = (listId, data) => ({
+const createCard = (listId, data, autoOpen) => ({
   type: EntryActionTypes.CARD_CREATE,
   payload: {
     listId,
     data,
+    autoOpen,
   },
 });
 

client/src/locales/en/core.js

@@ -84,7 +84,7 @@ export default {
       editUsername_title: 'Edit Username',
       email: 'E-mail',
       emailAlreadyInUse: 'E-mail already in use',
-      enterCardTitle: 'Enter card title...',
+      enterCardTitle: 'Enter card title... [Ctrl+Enter] to auto-open',
       enterDescription: 'Enter description...',
       enterFilename: 'Enter filename',
       enterListTitle: 'Enter list title...',

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

@@ -1,13 +1,13 @@
 import { call, put, select } from 'redux-saga/effects';
 
-import { goToBoard } from './router';
+import { goToBoard, goToCard } from './router';
 import request from '../request';
 import selectors from '../../../selectors';
 import actions from '../../../actions';
 import api from '../../../api';
 import { createLocalId } from '../../../utils/local-id';
 
-export function* createCard(listId, data) {
+export function* createCard(listId, data, autoOpen) {
   const { boardId } = yield select(selectors.selectListById, listId);
 
   const nextData = {
@@ -35,6 +35,10 @@ export function* createCard(listId, data) {
   }
 
   yield put(actions.createCard.success(localId, card));
+
+  if (autoOpen) {
+    yield call(goToCard, card.id);
+  }
 }
 
 export function* handleCardCreate(card) {

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

@@ -5,8 +5,8 @@ import EntryActionTypes from '../../../constants/EntryActionTypes';
 
 export default function* cardsWatchers() {
   yield all([
-    takeEvery(EntryActionTypes.CARD_CREATE, ({ payload: { listId, data } }) =>
-      services.createCard(listId, data),
+    takeEvery(EntryActionTypes.CARD_CREATE, ({ payload: { listId, data, autoOpen } }) =>
+      services.createCard(listId, data, autoOpen),
     ),
     takeEvery(EntryActionTypes.CARD_CREATE_HANDLE, ({ payload: { card } }) =>
       services.handleCardCreate(card),