Add file attachments

client/src/sagas/app/requests/attachment.js

@@ -0,0 +1,92 @@
+import { call, put } from 'redux-saga/effects';
+
+import request from './request';
+import {
+  createAttachmentFailed,
+  createAttachmentRequested,
+  createAttachmentSucceeded,
+  deleteAttachmentFailed,
+  deleteAttachmentRequested,
+  deleteAttachmentSucceeded,
+  updateAttachmentFailed,
+  updateAttachmentRequested,
+  updateAttachmentSucceeded,
+} from '../../../actions';
+import api from '../../../api';
+
+export function* createAttachmentRequest(cardId, localId, data) {
+  yield put(
+    createAttachmentRequested(localId, {
+      ...data,
+      cardId,
+    }),
+  );
+
+  try {
+    const { item } = yield call(request, api.createAttachment, cardId, data);
+
+    const action = createAttachmentSucceeded(localId, item);
+    yield put(action);
+
+    return {
+      success: true,
+      payload: action.payload,
+    };
+  } catch (error) {
+    const action = createAttachmentFailed(localId, error);
+    yield put(action);
+
+    return {
+      success: false,
+      payload: action.payload,
+    };
+  }
+}
+
+export function* updateAttachmentRequest(id, data) {
+  yield put(updateAttachmentRequested(id, data));
+
+  try {
+    const { item } = yield call(request, api.updateAttachment, id, data);
+
+    const action = updateAttachmentSucceeded(item);
+    yield put(action);
+
+    return {
+      success: true,
+      payload: action.payload,
+    };
+  } catch (error) {
+    const action = updateAttachmentFailed(error);
+    yield put(action);
+
+    return {
+      success: false,
+      payload: action.payload,
+    };
+  }
+}
+
+export function* deleteAttachmentRequest(id) {
+  yield put(deleteAttachmentRequested(id));
+
+  try {
+    const { item } = yield call(request, api.deleteAttachment, id);
+
+    const action = deleteAttachmentSucceeded(item);
+    yield put(action);
+
+    return {
+      success: true,
+      payload: action.payload,
+    };
+  } catch (error) {
+    const action = deleteAttachmentFailed(error);
+    yield put(action);
+
+    return {
+      success: false,
+      payload: action.payload,
+    };
+  }
+}

client/src/sagas/app/requests/board.js

@@ -55,7 +55,7 @@ export function* fetchBoardRequest(id) {
   try {
     const {
       item,
-      included: { lists, labels, cards, cardMemberships, cardLabels, tasks },
+      included: { lists, labels, cards, cardMemberships, cardLabels, tasks, attachments },
     } = yield call(request, api.getBoard, id);
 
     const action = fetchBoardSucceeded(
@@ -66,6 +66,7 @@ export function* fetchBoardRequest(id) {
       cardMemberships,
       cardLabels,
       tasks,
+      attachments,
     );
     yield put(action);
 

client/src/sagas/app/requests/index.js

@@ -10,6 +10,7 @@ export * from './card';
 export * from './card-membership';
 export * from './card-label';
 export * from './task';
+export * from './attachment';
 export * from './actions';
 export * from './comment-action';
 export * from './notifications';

client/src/sagas/app/requests/user.js

@@ -11,6 +11,9 @@ import {
   fetchCurrentUserFailed,
   fetchCurrentUserRequested,
   fetchCurrentUserSucceeded,
+  updateUserAvatarFailed,
+  updateUserAvatarRequested,
+  updateUserAvatarSucceeded,
   updateUserEmailFailed,
   updateUserEmailRequested,
   updateUserEmailSucceeded,
@@ -23,9 +26,6 @@ import {
   updateUserUsernameFailed,
   updateUserUsernameRequested,
   updateUserUsernameSucceeded,
-  uploadUserAvatarFailed,
-  uploadUserAvatarRequested,
-  uploadUserAvatarSucceeded,
 } from '../../../actions';
 import api from '../../../api';
 
@@ -173,13 +173,13 @@ export function* updateUserUsernameRequest(id, data) {
   }
 }
 
-export function* uploadUserAvatarRequest(id, file) {
-  yield put(uploadUserAvatarRequested(id));
+export function* updateUserAvatarRequest(id, data) {
+  yield put(updateUserAvatarRequested(id));
 
   try {
-    const { item } = yield call(request, api.uploadUserAvatar, id, file);
+    const { item } = yield call(request, api.updateUserAvatar, id, data);
 
-    const action = uploadUserAvatarSucceeded(id, item);
+    const action = updateUserAvatarSucceeded(id, item);
     yield put(action);
 
     return {
@@ -187,7 +187,7 @@ export function* uploadUserAvatarRequest(id, file) {
       payload: action.payload,
     };
   } catch (error) {
-    const action = uploadUserAvatarFailed(id, error);
+    const action = updateUserAvatarFailed(id, error);
     yield put(action);
 
     return {

client/src/sagas/app/services/attachment.js

@@ -0,0 +1,40 @@
+import { call, put, select } from 'redux-saga/effects';
+
+import {
+  createAttachmentRequest,
+  deleteAttachmentRequest,
+  updateAttachmentRequest,
+} from '../requests';
+import { pathSelector } from '../../../selectors';
+import { createAttachment, deleteAttachment, updateAttachment } from '../../../actions';
+import { createLocalId } from '../../../utils/local-id';
+
+export function* createAttachmentService(cardId, data) {
+  const localId = yield call(createLocalId);
+
+  yield put(
+    createAttachment({
+      cardId,
+      id: localId,
+      name: data.file.name,
+    }),
+  );
+
+  yield call(createAttachmentRequest, cardId, localId, data);
+}
+
+export function* createAttachmentInCurrentCardService(data) {
+  const { cardId } = yield select(pathSelector);
+
+  yield call(createAttachmentService, cardId, data);
+}
+
+export function* updateAttachmentService(id, data) {
+  yield put(updateAttachment(id, data));
+  yield call(updateAttachmentRequest, id, data);
+}
+
+export function* deleteAttachmentService(id) {
+  yield put(deleteAttachment(id));
+  yield call(deleteAttachmentRequest, id);
+}

client/src/sagas/app/services/index.js

@@ -11,6 +11,7 @@ export * from './list';
 export * from './label';
 export * from './card';
 export * from './task';
+export * from './attachment';
 export * from './actions';
 export * from './comment-action';
 export * from './notifications';

client/src/sagas/app/services/socket.js

@@ -12,6 +12,7 @@ import {
 } from '../../../selectors';
 import {
   createActionReceived,
+  createAttachmentReceived,
   createBoardReceived,
   createCardLabelReceived,
   createCardMembershipReceived,
@@ -24,6 +25,7 @@ import {
   createTaskReceived,
   createUserReceived,
   deleteActionReceived,
+  deleteAttachmentReceived,
   deleteCardLabelReceived,
   deleteCardMembershipReceived,
   deleteCardReceived,
@@ -38,6 +40,7 @@ import {
   socketDisconnected,
   socketReconnected,
   updateActionReceived,
+  updateAttachmentReceived,
   updateBoardReceived,
   updateCardReceived,
   updateLabelReceived,
@@ -205,6 +208,18 @@ export function* deleteTaskReceivedService(task) {
   yield put(deleteTaskReceived(task));
 }
 
+export function* createAttachmentReceivedService(attachment) {
+  yield put(createAttachmentReceived(attachment));
+}
+
+export function* updateAttachmentReceivedService(attachment) {
+  yield put(updateAttachmentReceived(attachment));
+}
+
+export function* deleteAttachmentReceivedService(attachment) {
+  yield put(deleteAttachmentReceived(attachment));
+}
+
 export function* createActionReceivedService(action) {
   yield put(createActionReceived(action));
 }

client/src/sagas/app/services/user.js

@@ -5,11 +5,11 @@ import {
   createUserRequest,
   deleteCardMembershipRequest,
   deleteUserRequest,
+  updateUserAvatarRequest,
   updateUserEmailRequest,
   updateUserPasswordRequest,
   updateUserRequest,
   updateUserUsernameRequest,
-  uploadUserAvatarRequest,
 } from '../requests';
 import { currentUserIdSelector, pathSelector } from '../../../selectors';
 import {
@@ -106,14 +106,14 @@ export function* clearCurrentUserUsernameUpdateErrorService() {
   yield call(clearUserUsernameUpdateErrorService, id);
 }
 
-export function* uploadUserAvatarService(id, file) {
-  yield call(uploadUserAvatarRequest, id, file);
+export function* updateUserAvatarService(id, data) {
+  yield call(updateUserAvatarRequest, id, data);
 }
 
-export function* uploadCurrentUserAvatarService(file) {
+export function* updateCurrentUserAvatarService(data) {
   const id = yield select(currentUserIdSelector);
 
-  yield call(uploadUserAvatarService, id, file);
+  yield call(updateUserAvatarService, id, data);
 }
 
 export function* deleteUserService(id) {

client/src/sagas/app/watchers/attachment.js

@@ -0,0 +1,22 @@
+import { all, takeLatest } from 'redux-saga/effects';
+
+import {
+  createAttachmentInCurrentCardService,
+  deleteAttachmentService,
+  updateAttachmentService,
+} from '../services';
+import EntryActionTypes from '../../../constants/EntryActionTypes';
+
+export default function* () {
+  yield all([
+    takeLatest(EntryActionTypes.ATTACHMENT_IN_CURRENT_CARD_CREATE, ({ payload: { data } }) =>
+      createAttachmentInCurrentCardService(data),
+    ),
+    takeLatest(EntryActionTypes.ATTACHMENT_UPDATE, ({ payload: { id, data } }) =>
+      updateAttachmentService(id, data),
+    ),
+    takeLatest(EntryActionTypes.ATTACHMENT_DELETE, ({ payload: { id } }) =>
+      deleteAttachmentService(id),
+    ),
+  ]);
+}

client/src/sagas/app/watchers/index.js

@@ -10,6 +10,7 @@ import list from './list';
 import label from './label';
 import card from './card';
 import task from './task';
+import attachment from './attachment';
 import actions from './actions';
 import commentAction from './comment-action';
 import notification from './notification';
@@ -27,6 +28,7 @@ export default [
   label,
   card,
   task,
+  attachment,
   actions,
   commentAction,
   notification,

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

@@ -3,6 +3,7 @@ import { call, cancelled, take } from 'redux-saga/effects';
 
 import {
   createActionReceivedService,
+  createAttachmentReceivedService,
   createBoardReceivedService,
   createCardLabelReceivedService,
   createCardMembershipReceivedService,
@@ -15,6 +16,7 @@ import {
   createTaskReceivedService,
   createUserReceivedService,
   deleteActionReceivedService,
+  deleteAttachmentReceivedService,
   deleteCardLabelReceivedService,
   deleteCardMembershipReceivedService,
   deleteCardReceivedService,
@@ -29,6 +31,7 @@ import {
   socketDisconnectedService,
   socketReconnectedService,
   updateActionReceivedService,
+  updateAttachmentReceivedService,
   updateBoardReceivedService,
   updateCardReceivedService,
   updateLabelReceivedService,
@@ -153,6 +156,18 @@ const createSocketEventsChannel = () =>
       emit([deleteTaskReceivedService, item]);
     };
 
+    const handleAttachmentCreate = api.makeHandleAttachmentCreate(({ item }) => {
+      emit([createAttachmentReceivedService, item]);
+    });
+
+    const handleAttachmentUpdate = api.makeHandleAttachmentUpdate(({ item }) => {
+      emit([updateAttachmentReceivedService, item]);
+    });
+
+    const handleAttachmentDelete = api.makeHandleAttachmentDelete(({ item }) => {
+      emit([deleteAttachmentReceivedService, item]);
+    });
+
     const handleActionCreate = api.makeHandleActionCreate(({ item }) => {
       emit([createActionReceivedService, item]);
     });
@@ -222,6 +237,10 @@ const createSocketEventsChannel = () =>
     socket.on('taskUpdate', handleTaskUpdate);
     socket.on('taskDelete', handleTaskDelete);
 
+    socket.on('attachmentCreate', handleAttachmentCreate);
+    socket.on('attachmentUpdate', handleAttachmentUpdate);
+    socket.on('attachmentDelete', handleAttachmentDelete);
+
     socket.on('actionCreate', handleActionCreate);
     socket.on('actionUpdate', handleActionUpdate);
     socket.on('actionDelete', handleActionDelete);
@@ -270,6 +289,10 @@ const createSocketEventsChannel = () =>
       socket.off('taskUpdate', handleTaskUpdate);
       socket.off('taskDelete', handleTaskDelete);
 
+      socket.off('attachmentCreate', handleAttachmentCreate);
+      socket.off('attachmentUpdate', handleAttachmentUpdate);
+      socket.off('attachmentDelete', handleAttachmentDelete);
+
       socket.off('actionCreate', handleActionCreate);
       socket.off('actionUpdate', handleActionUpdate);
       socket.off('actionDelete', handleActionDelete);

client/src/sagas/app/watchers/user.js

@@ -14,11 +14,11 @@ import {
   removeUserFromCurrentCardService,
   removeUserFromFilterInCurrentBoardService,
   updateUserService,
+  updateCurrentUserAvatarService,
   updateCurrentUserEmailService,
   updateCurrentUserPasswordService,
   updateCurrentUserService,
   updateCurrentUserUsernameService,
-  uploadCurrentUserAvatarService,
 } from '../services';
 import EntryActionTypes from '../../../constants/EntryActionTypes';
 
@@ -50,8 +50,8 @@ export default function* () {
     takeLatest(EntryActionTypes.CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR, () =>
       clearCurrentUserUsernameUpdateErrorService(),
     ),
-    takeLatest(EntryActionTypes.CURRENT_USER_AVATAR_UPLOAD, ({ payload: { file } }) =>
-      uploadCurrentUserAvatarService(file),
+    takeLatest(EntryActionTypes.CURRENT_USER_AVATAR_UPDATE, ({ payload: { data } }) =>
+      updateCurrentUserAvatarService(data),
     ),
     takeLatest(EntryActionTypes.USER_DELETE, ({ payload: { id } }) => deleteUserService(id)),
     takeLatest(EntryActionTypes.USER_TO_CARD_ADD, ({ payload: { id, cardId } }) =>