feat: Toggle actions details, little redesign

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

@@ -1,11 +1,12 @@
 import { call, put, select } from 'redux-saga/effects';
 
 import request from '../request';
-import { lastActionIdByCardIdSelector, pathSelector } from '../../../selectors';
-import { fetchActions } from '../../../actions';
+import { cardByIdSelector, lastActionIdByCardIdSelector, pathSelector } from '../../../selectors';
+import { fetchActions, toggleActionsDetails } from '../../../actions';
 import api from '../../../api';
 
 export function* fetchActionsService(cardId) {
+  const { isActionsDetailsVisible } = yield select(cardByIdSelector, cardId);
   const lastId = yield select(lastActionIdByCardIdSelector, cardId);
 
   yield put(fetchActions(cardId));
@@ -19,6 +20,7 @@ export function* fetchActionsService(cardId) {
       included: { users },
     } = yield call(request, api.getActions, cardId, {
       beforeId: lastId,
+      withDetails: isActionsDetailsVisible,
     }));
   } catch (error) {
     yield put(fetchActions.failure(cardId, error));
@@ -33,3 +35,32 @@ export function* fetchActionsInCurrentCardService() {
 
   yield call(fetchActionsService, cardId);
 }
+
+export function* toggleActionsDetailsService(cardId, isVisible) {
+  yield put(toggleActionsDetails(cardId, isVisible));
+
+  if (isVisible) {
+    let actions;
+    let users;
+
+    try {
+      ({
+        items: actions,
+        included: { users },
+      } = yield call(request, api.getActions, cardId, {
+        withDetails: isVisible,
+      }));
+    } catch (error) {
+      yield put(toggleActionsDetails.failure(cardId, error));
+      return;
+    }
+
+    yield put(toggleActionsDetails.success(cardId, actions, users));
+  }
+}
+
+export function* toggleActionsDetailsInCurrentCardService(isVisible) {
+  const { cardId } = yield select(pathSelector);
+
+  yield call(toggleActionsDetailsService, cardId, isVisible);
+}

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

@@ -1,10 +1,19 @@
-import { takeEvery } from 'redux-saga/effects';
+import { all, takeEvery } from 'redux-saga/effects';
 
-import { fetchActionsInCurrentCardService } from '../services';
+import {
+  fetchActionsInCurrentCardService,
+  toggleActionsDetailsInCurrentCardService,
+} from '../services';
 import EntryActionTypes from '../../../constants/EntryActionTypes';
 
 export default function* actionsWatchers() {
-  yield takeEvery(EntryActionTypes.ACTIONS_IN_CURRENT_CARD_FETCH, () =>
-    fetchActionsInCurrentCardService(),
-  );
+  yield all([
+    takeEvery(EntryActionTypes.ACTIONS_IN_CURRENT_CARD_FETCH, () =>
+      fetchActionsInCurrentCardService(),
+    ),
+    takeEvery(
+      EntryActionTypes.ACTIONS_DETAILS_IN_CURRENT_CARD_TOGGLE,
+      ({ payload: { isVisible } }) => toggleActionsDetailsInCurrentCardService(isVisible),
+    ),
+  ]);
 }