plankanban#27 UI changes, front-end refactoring

client/src/api/boards.js

@@ -8,11 +8,12 @@ import { transformAttachment } from './attachments';
 const createBoard = (projectId, data, headers) =>
   socket.post(`/projects/${projectId}/boards`, data, headers);
 
+// TODO: remove and use createBoard instead
 const importBoard = (projectId, data, headers) =>
   http.post(
     `/projects/${projectId}/imports/boards?name=${data.name}&position=${data.position}`,
     {
-      file: data.file,
+      file: data.import.file,
     },
     headers,
   );

client/src/components/Boards/AddPopup.jsx

@@ -1,104 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import { Button, Form, Menu } from 'semantic-ui-react';
-import { withPopup } from '../../lib/popup';
-import { Input, Popup, FilePicker } from '../../lib/custom-ui';
-
-import { useForm } from '../../hooks';
-
-import styles from './AddPopup.module.scss';
-
-const AddStep = React.memo(({ onCreate, onImport, onClose }) => {
-  const [t] = useTranslation();
-
-  const [data, handleFieldChange] = useForm({
-    name: '',
-    file: null,
-  });
-
-  const [selectedFile, setSelectedFile] = useState(null);
-
-  const nameField = useRef(null);
-
-  const handleSubmit = useCallback(() => {
-    const cleanData = {
-      ...data,
-      type: 'kanban',
-      name: data.name.trim(),
-    };
-
-    if (!cleanData.name) {
-      nameField.current.select();
-      return;
-    }
-
-    if (data.file) {
-      onImport(cleanData);
-    } else {
-      onCreate(cleanData);
-    }
-
-    onClose();
-  }, [onClose, data, onImport, onCreate]);
-
-  const handleFileSelect = useCallback(
-    (file) => {
-      handleFieldChange(null, {
-        name: 'file',
-        value: file,
-      });
-      setSelectedFile(file);
-    },
-    [handleFieldChange, setSelectedFile],
-  );
-
-  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}
-          />
-          <Menu secondary vertical className={styles.menu}>
-            <FilePicker onSelect={handleFileSelect} accept=".json">
-              <Menu.Item className={styles.menuItem}>
-                {selectedFile
-                  ? selectedFile.name
-                  : t('common.uploadTrelloFile', {
-                      context: 'title',
-                    })}
-              </Menu.Item>
-            </FilePicker>
-          </Menu>
-          <Button
-            positive
-            content={selectedFile ? t('action.importTrelloBoard') : t('action.createBoard')}
-          />
-        </Form>
-      </Popup.Content>
-    </>
-  );
-});
-
-AddStep.propTypes = {
-  onCreate: PropTypes.func.isRequired,
-  onImport: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-};
-
-export default withPopup(AddStep);

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

@@ -1,10 +0,0 @@
-:global(#app) {
-  .field {
-    margin-bottom: 8px;
-  }
-
-  .menu {
-    margin: 0px 0px 4px;
-    width: 100%;
-  }
-}

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

@@ -0,0 +1,114 @@
+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}
+          />
+          <Button positive content={t('action.createBoard')} />
+          <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>
+        </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,31 @@
+:global(#app) {
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .importButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    float: right;
+    font-weight: normal;
+    margin-right: 0;
+    max-width: 49%;
+    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 {
+    font-size: 13px;
+    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.jsx

@@ -14,121 +14,118 @@ import EditPopup from './EditPopup';
 
 import styles from './Boards.module.scss';
 
-const Boards = React.memo(
-  ({ items, currentId, canEdit, onCreate, onImport, onUpdate, onMove, onDelete }) => {
-    const tabsWrapper = useRef(null);
+const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMove, onDelete }) => {
+  const tabsWrapper = useRef(null);
 
-    const handleWheel = useCallback(({ deltaY }) => {
-      tabsWrapper.current.scrollBy({
-        left: deltaY,
-      });
-    }, []);
+  const handleWheel = useCallback(({ deltaY }) => {
+    tabsWrapper.current.scrollBy({
+      left: deltaY,
+    });
+  }, []);
 
-    const handleDragStart = useCallback(() => {
-      closePopup();
-    }, []);
+  const handleDragStart = useCallback(() => {
+    closePopup();
+  }, []);
 
-    const handleDragEnd = useCallback(
-      ({ draggableId, source, destination }) => {
-        if (!destination || source.index === destination.index) {
-          return;
-        }
+  const handleDragEnd = useCallback(
+    ({ draggableId, source, destination }) => {
+      if (!destination || source.index === destination.index) {
+        return;
+      }
 
-        onMove(draggableId, destination.index);
-      },
-      [onMove],
-    );
+      onMove(draggableId, destination.index);
+    },
+    [onMove],
+  );
 
-    const handleUpdate = useCallback(
-      (id, data) => {
-        onUpdate(id, data);
-      },
-      [onUpdate],
-    );
+  const handleUpdate = useCallback(
+    (id, data) => {
+      onUpdate(id, data);
+    },
+    [onUpdate],
+  );
 
-    const handleDelete = useCallback(
-      (id) => {
-        onDelete(id);
-      },
-      [onDelete],
-    );
+  const handleDelete = useCallback(
+    (id) => {
+      onDelete(id);
+    },
+    [onDelete],
+  );
 
-    const itemsNode = items.map((item, index) => (
-      <Draggable
-        key={item.id}
-        draggableId={item.id}
-        index={index}
-        isDragDisabled={!item.isPersisted || !canEdit}
-      >
-        {({ innerRef, draggableProps, dragHandleProps }) => (
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          <div {...draggableProps} ref={innerRef} className={styles.tabWrapper}>
-            <div className={classNames(styles.tab, item.id === currentId && styles.tabActive)}>
-              {item.isPersisted ? (
-                <>
-                  <Link
-                    {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
-                    to={Paths.BOARDS.replace(':id', item.id)}
-                    title={item.name}
-                    className={styles.link}
-                  >
-                    {item.name}
-                  </Link>
-                  {canEdit && (
-                    <EditPopup
-                      defaultData={pick(item, 'name')}
-                      onUpdate={(data) => handleUpdate(item.id, data)}
-                      onDelete={() => handleDelete(item.id)}
-                    >
-                      <Button className={classNames(styles.editButton, styles.target)}>
-                        <Icon fitted name="pencil" size="small" />
-                      </Button>
-                    </EditPopup>
-                  )}
-                </>
-              ) : (
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                <span {...dragHandleProps} className={styles.link}>
+  const itemsNode = items.map((item, index) => (
+    <Draggable
+      key={item.id}
+      draggableId={item.id}
+      index={index}
+      isDragDisabled={!item.isPersisted || !canEdit}
+    >
+      {({ innerRef, draggableProps, dragHandleProps }) => (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <div {...draggableProps} ref={innerRef} className={styles.tabWrapper}>
+          <div className={classNames(styles.tab, item.id === currentId && styles.tabActive)}>
+            {item.isPersisted ? (
+              <>
+                <Link
+                  {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
+                  to={Paths.BOARDS.replace(':id', item.id)}
+                  title={item.name}
+                  className={styles.link}
+                >
                   {item.name}
-                </span>
-              )}
-            </div>
+                </Link>
+                {canEdit && (
+                  <EditPopup
+                    defaultData={pick(item, 'name')}
+                    onUpdate={(data) => handleUpdate(item.id, data)}
+                    onDelete={() => handleDelete(item.id)}
+                  >
+                    <Button className={classNames(styles.editButton, styles.target)}>
+                      <Icon fitted name="pencil" size="small" />
+                    </Button>
+                  </EditPopup>
+                )}
+              </>
+            ) : (
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              <span {...dragHandleProps} className={styles.link}>
+                {item.name}
+              </span>
+            )}
           </div>
-        )}
-      </Draggable>
-    ));
-
-    return (
-      <div className={styles.wrapper} onWheel={handleWheel}>
-        <div ref={tabsWrapper} className={styles.tabsWrapper}>
-          <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-            <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
-              {({ innerRef, droppableProps, placeholder }) => (
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                <div {...droppableProps} ref={innerRef} className={styles.tabs}>
-                  {itemsNode}
-                  {placeholder}
-                  {canEdit && (
-                    <AddPopup onCreate={onCreate} onImport={onImport}>
-                      <Button icon="plus" className={styles.addButton} />
-                    </AddPopup>
-                  )}
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
         </div>
+      )}
+    </Draggable>
+  ));
+
+  return (
+    <div className={styles.wrapper} onWheel={handleWheel}>
+      <div ref={tabsWrapper} className={styles.tabsWrapper}>
+        <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+          <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
+            {({ innerRef, droppableProps, placeholder }) => (
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              <div {...droppableProps} ref={innerRef} className={styles.tabs}>
+                {itemsNode}
+                {placeholder}
+                {canEdit && (
+                  <AddPopup onCreate={onCreate}>
+                    <Button icon="plus" className={styles.addButton} />
+                  </AddPopup>
+                )}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 
 Boards.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   currentId: PropTypes.string,
   canEdit: PropTypes.bool.isRequired,
   onCreate: PropTypes.func.isRequired,
-  onImport: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,

client/src/constants/EntryActionTypes.js

@@ -76,7 +76,6 @@ export default {
   /* Boards */
 
   BOARD_IN_CURRENT_PROJECT_CREATE: `${PREFIX}/BOARD_IN_CURRENT_PROJECT_CREATE`,
-  TRELLO_BOARD_IN_CURRENT_PROJECT_IMPORT: `${PREFIX}/TRELLO_BOARD_IN_CURRENT_PROJECT_IMPORT`,
   BOARD_CREATE_HANDLE: `${PREFIX}/BOARD_CREATE_HANDLE`,
   BOARD_FETCH: `${PREFIX}/BOARD_FETCH`,
   BOARD_UPDATE: `${PREFIX}/BOARD_UPDATE`,

client/src/containers/BoardsContainer.js

@@ -21,7 +21,6 @@ const mapDispatchToProps = (dispatch) =>
   bindActionCreators(
     {
       onCreate: entryActions.createBoardInCurrentProject,
-      onImport: entryActions.importTrelloBoardInCurrentProject,
       onUpdate: entryActions.updateBoard,
       onMove: entryActions.moveBoard,
       onDelete: entryActions.deleteBoard,

client/src/entry-actions/boards.js

@@ -7,13 +7,6 @@ const createBoardInCurrentProject = (data) => ({
   },
 });
 
-const importTrelloBoardInCurrentProject = (data) => ({
-  type: EntryActionTypes.TRELLO_BOARD_IN_CURRENT_PROJECT_IMPORT,
-  payload: {
-    data,
-  },
-});
-
 const handleBoardCreate = (board) => ({
   type: EntryActionTypes.BOARD_CREATE_HANDLE,
   payload: {
@@ -67,7 +60,6 @@ const handleBoardDelete = (board) => ({
 
 export default {
   createBoardInCurrentProject,
-  importTrelloBoardInCurrentProject,
   handleBoardCreate,
   fetchBoard,
   updateBoard,

client/src/locales/en/core.js

@@ -92,8 +92,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',
@@ -143,7 +145,6 @@ export default {
       time: 'Time',
       timer: 'Timer',
       title: 'Title',
-      uploadTrelloFile_title: 'Import Board from Trello',
       userActions_title: 'User Actions',
       userAddedThisCardToList: '<0>{{user}}</0><1> added this card to {{list}}</1>',
       userLeftNewCommentToCard: '{{user}} left a new comment «{{comment}}» to <2>{{card}}</2>',
@@ -202,7 +203,7 @@ export default {
       editTitle_title: 'Edit Title',
       editUsername_title: 'Edit Username',
       hideDetails: 'Hide details',
-      importTrelloBoard: 'Import Trello Board',
+      import: 'Import',
       leaveBoard: 'Leave board',
       leaveProject: 'Leave project',
       logOut_title: 'Log Out',

client/src/models/Board.js

@@ -124,11 +124,7 @@ export default class extends Model {
         break;
       case ActionTypes.BOARD_CREATE__SUCCESS:
         Board.withId(payload.localId).delete();
-
-        Board.upsert({
-          ...payload.board,
-          isFetching: false,
-        });
+        Board.upsert(payload.board);
 
         break;
       case ActionTypes.BOARD_FETCH__FAILURE:

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

@@ -1,3 +1,4 @@
+import omit from 'lodash/omit';
 import { call, put, select } from 'redux-saga/effects';
 
 import { goToBoard, goToProject } from './router';
@@ -7,6 +8,51 @@ import actions from '../../../actions';
 import api from '../../../api';
 import { createLocalId } from '../../../utils/local-id';
 
+export function* createBoard(projectId, data) {
+  const isImport = !!data.import;
+
+  const nextData = {
+    ...data,
+    position: yield select(selectors.selectNextBoardPosition, projectId),
+  };
+
+  const localId = yield call(createLocalId);
+
+  yield put(
+    actions.createBoard({
+      ...(isImport ? omit(nextData, 'import') : nextData),
+      projectId,
+      id: localId,
+    }),
+  );
+
+  let board;
+  let boardMemberships;
+
+  try {
+    ({
+      item: board,
+      included: { boardMemberships },
+    } = yield call(request, isImport ? api.importBoard : api.createBoard, projectId, nextData));
+  } catch (error) {
+    yield put(actions.createBoard.failure(localId, error));
+    return;
+  }
+
+  yield put(actions.createBoard.success(localId, board, boardMemberships));
+  yield call(goToBoard, board.id);
+}
+
+export function* createBoardInCurrentProject(data) {
+  const { projectId } = yield select(selectors.selectPath);
+
+  yield call(createBoard, projectId, data);
+}
+
+export function* handleBoardCreate(board) {
+  yield put(actions.handleBoardCreate(board));
+}
+
 export function* fetchBoard(id) {
   yield put(actions.fetchBoard(id));
 
@@ -60,59 +106,6 @@ export function* fetchBoard(id) {
   );
 }
 
-export function* createBoard(projectId, data) {
-  const isImport = data && data.file;
-  const nextData = {
-    ...data,
-    position: yield select(selectors.selectNextBoardPosition, projectId),
-  };
-
-  const localId = yield call(createLocalId);
-
-  yield put(
-    actions.createBoard({
-      ...nextData,
-      projectId,
-      id: localId,
-    }),
-  );
-
-  let board;
-  let boardMemberships;
-
-  try {
-    ({
-      item: board,
-      included: { boardMemberships },
-    } = yield call(request, isImport ? api.importBoard : api.createBoard, projectId, nextData));
-  } catch (error) {
-    yield put(actions.createBoard.failure(localId, error));
-    return;
-  }
-
-  yield put(actions.createBoard.success(localId, board, boardMemberships));
-  yield call(goToBoard, board.id);
-  if (isImport) {
-    yield call(fetchBoard, board.id);
-  }
-}
-
-export function* createBoardInCurrentProject(data) {
-  const { projectId } = yield select(selectors.selectPath);
-
-  yield call(createBoard, projectId, data);
-}
-
-export function* importTrelloBoardInCurrentProject(data) {
-  const { projectId } = yield select(selectors.selectPath);
-
-  yield call(createBoard, projectId, data);
-}
-
-export function* handleBoardCreate(board) {
-  yield put(actions.handleBoardCreate(board));
-}
-
 export function* updateBoard(id, data) {
   yield put(actions.updateBoard(id, data));
 
@@ -173,7 +166,6 @@ export function* handleBoardDelete(board) {
 export default {
   createBoard,
   createBoardInCurrentProject,
-  importTrelloBoardInCurrentProject,
   handleBoardCreate,
   fetchBoard,
   updateBoard,

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

@@ -8,9 +8,6 @@ export default function* boardsWatchers() {
     takeEvery(EntryActionTypes.BOARD_IN_CURRENT_PROJECT_CREATE, ({ payload: { data } }) =>
       services.createBoardInCurrentProject(data),
     ),
-    takeEvery(EntryActionTypes.TRELLO_BOARD_IN_CURRENT_PROJECT_IMPORT, ({ payload: { data } }) =>
-      services.importTrelloBoardInCurrentProject(data),
-    ),
     takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board } }) =>
       services.handleBoardCreate(board),
     ),