#27 add trello import to UI

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,15 @@ import { transformAttachment } from './attachments';
 const createBoard = (projectId, data, headers) =>
   socket.post(`/projects/${projectId}/boards`, data, headers);
 
+const importBoard = (projectId, data, headers) =>
+  http.post(
+    `/projects/${projectId}/imports/boards?name=${data.name}&position=${data.position}`,
+    {
+      file: data.file,
+    },
+    headers,
+  );
+
 const getBoard = (id, headers) =>
   socket.get(`/boards/${id}`, undefined, headers).then((body) => ({
     ...body,
@@ -23,6 +33,7 @@ const deleteBoard = (id, headers) => socket.delete(`/boards/${id}`, undefined, h
 
 export default {
   createBoard,
+  importBoard,
   getBoard,
   updateBoard,
   deleteBoard,

client/src/components/Boards/AddPopup.jsx

@@ -1,21 +1,24 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Button, Form } from 'semantic-ui-react';
+import { Button, Form, Divider, Menu } from 'semantic-ui-react';
 import { withPopup } from '../../lib/popup';
-import { Input, Popup } from '../../lib/custom-ui';
+import { Input, Popup, FilePicker } from '../../lib/custom-ui';
 
 import { useForm } from '../../hooks';
 
 import styles from './AddPopup.module.scss';
 
-const AddStep = React.memo(({ onCreate, onClose }) => {
+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(() => {
@@ -30,9 +33,25 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
       return;
     }
 
+    if (data.file) {
+      onImport(cleanData);
+    } else {
       onCreate(cleanData);
+    }
+
     onClose();
-  }, [onCreate, onClose, data]);
+  }, [onClose, data, onImport, onCreate]);
+
+  const handleFileSelect = useCallback(
+    (file) => {
+      handleFieldChange(null, {
+        name: 'file',
+        value: file,
+      });
+      setSelectedFile(file);
+    },
+    [handleFieldChange, setSelectedFile],
+  );
 
   useEffect(() => {
     nameField.current.focus();
@@ -55,7 +74,21 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
             className={styles.field}
             onChange={handleFieldChange}
           />
-          <Button positive content={t('action.createBoard')} />
+          <Divider />
+          <FilePicker onSelect={handleFileSelect} accept=".json">
+            <Menu.Item className={styles.menuItem}>
+              {selectedFile
+                ? selectedFile.name
+                : t('common.uploadTrelloFile', {
+                    context: 'title',
+                  })}
+            </Menu.Item>
+          </FilePicker>
+          <Divider />
+          <Button
+            positive
+            content={selectedFile ? t('action.importTrelloBoard') : t('action.createBoard')}
+          />
         </Form>
       </Popup.Content>
     </>
@@ -64,6 +97,7 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
 
 AddStep.propTypes = {
   onCreate: PropTypes.func.isRequired,
+  onImport: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 

client/src/components/Boards/Boards.jsx

@@ -14,7 +14,8 @@ import EditPopup from './EditPopup';
 
 import styles from './Boards.module.scss';
 
-const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMove, onDelete }) => {
+const Boards = React.memo(
+  ({ items, currentId, canEdit, onCreate, onImport, onUpdate, onMove, onDelete }) => {
     const tabsWrapper = useRef(null);
 
     const handleWheel = useCallback(({ deltaY }) => {
@@ -108,7 +109,7 @@ const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMo
                   {itemsNode}
                   {placeholder}
                   {canEdit && (
-                  <AddPopup onCreate={onCreate}>
+                    <AddPopup onCreate={onCreate} onImport={onImport}>
                       <Button icon="plus" className={styles.addButton} />
                     </AddPopup>
                   )}
@@ -119,13 +120,15 @@ const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMo
         </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,6 +76,7 @@ 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,6 +21,7 @@ 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,6 +7,13 @@ 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: {
@@ -60,6 +67,7 @@ const handleBoardDelete = (board) => ({
 
 export default {
   createBoardInCurrentProject,
+  importTrelloBoardInCurrentProject,
   handleBoardCreate,
   fetchBoard,
   updateBoard,

client/src/locales/en/core.js

@@ -143,6 +143,7 @@ export default {
       time: 'Time',
       timer: 'Timer',
       title: 'Title',
+      uploadTrelloFile_title: 'Import Trello JSON File',
       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>',
@@ -201,6 +202,7 @@ export default {
       editTitle_title: 'Edit Title',
       editUsername_title: 'Edit Username',
       hideDetails: 'Hide details',
+      importTrelloBoard: 'Import Trello Board',
       leaveBoard: 'Leave board',
       leaveProject: 'Leave project',
       logOut_title: 'Log Out',

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

@@ -46,6 +46,46 @@ export function* createBoardInCurrentProject(data) {
   yield call(createBoard, projectId, data);
 }
 
+export function* importBoard(projectId, data) {
+  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, api.importBoard, projectId, nextData));
+  } catch (error) {
+    yield put(actions.createBoard.failure(localId, error));
+    return;
+  }
+
+  yield put(actions.createBoard.success(localId, board, boardMemberships));
+  yield put(actions.fetchBoard(board.id));
+  yield call(goToBoard, board.id);
+}
+
+export function* importTrelloBoardInCurrentProject(data) {
+  const { projectId } = yield select(selectors.selectPath);
+
+  yield call(importBoard, projectId, data);
+}
+
 export function* handleBoardCreate(board) {
   yield put(actions.handleBoardCreate(board));
 }
@@ -163,6 +203,7 @@ export function* handleBoardDelete(board) {
 export default {
   createBoard,
   createBoardInCurrentProject,
+  importTrelloBoardInCurrentProject,
   handleBoardCreate,
   fetchBoard,
   updateBoard,

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

@@ -8,6 +8,9 @@ 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),
     ),