feat: Toggle actions details, little redesign

client/src/models/Action.js

@@ -50,6 +50,7 @@ export default class extends Model {
 
         break;
       case ActionTypes.ACTIONS_FETCH__SUCCESS:
+      case ActionTypes.ACTIONS_DETAILS_TOGGLE__SUCCESS:
       case ActionTypes.NOTIFICATION_CREATE_HANDLE:
         payload.actions.forEach((action) => {
           Action.upsert(action);

client/src/models/Card.js

@@ -2,6 +2,7 @@ import { Model, attr, fk, many, oneToOne } from 'redux-orm';
 
 import ActionTypes from '../constants/ActionTypes';
 import Config from '../constants/Config';
+import { ActionTypes as ActionTypesEnum } from '../constants/Enums';
 
 export default class extends Model {
   static modelName = 'Card';
@@ -22,6 +23,12 @@ export default class extends Model {
     isAllActionsFetched: attr({
       getDefault: () => false,
     }),
+    isActionsDetailsVisible: attr({
+      getDefault: () => false,
+    }),
+    isActionsDetailsFetching: attr({
+      getDefault: () => false,
+    }),
     boardId: fk({
       to: 'Board',
       as: 'board',
@@ -195,6 +202,36 @@ export default class extends Model {
         });
 
         break;
+      case ActionTypes.ACTIONS_DETAILS_TOGGLE: {
+        const cardModel = Card.withId(payload.cardId);
+        cardModel.isActionsDetailsVisible = payload.isVisible;
+
+        if (payload.isVisible) {
+          cardModel.isActionsDetailsFetching = true;
+        }
+
+        break;
+      }
+      case ActionTypes.ACTIONS_DETAILS_TOGGLE__SUCCESS: {
+        const cardModel = Card.withId(payload.cardId);
+
+        cardModel.update({
+          isAllActionsFetched: payload.actions.length < Config.ACTIONS_LIMIT,
+          isActionsDetailsFetching: false,
+        });
+
+        cardModel.actions.toModelArray().forEach((actionModel) => {
+          if (actionModel.notification) {
+            actionModel.update({
+              isInCard: false,
+            });
+          } else {
+            actionModel.delete();
+          }
+        });
+
+        break;
+      }
       case ActionTypes.NOTIFICATION_CREATE_HANDLE:
         payload.cards.forEach((card) => {
           Card.upsert(card);
@@ -213,8 +250,16 @@ export default class extends Model {
     return this.attachments.orderBy('id', false);
   }
 
-  getOrderedInCardActionsQuerySet() {
-    return this.actions.orderBy('id', false);
+  getFilteredOrderedInCardActionsQuerySet() {
+    const filter = {
+      isInCard: true,
+    };
+
+    if (!this.isActionsDetailsVisible) {
+      filter.type = ActionTypesEnum.COMMENT_CARD;
+    }
+
+    return this.actions.filter(filter).orderBy('id', false);
   }
 
   getUnreadNotificationsQuerySet() {

client/src/models/List.js

@@ -83,7 +83,7 @@ export default class extends Model {
     return this.cards.orderBy('position');
   }
 
-  getOrderedFilteredCardsModelArray() {
+  getFilteredOrderedCardsModelArray() {
     let cardModels = this.getOrderedCardsQuerySet().toModelArray();
 
     const filterUserIds = this.board.filterUsers.toRefArray().map((user) => user.id);

client/src/models/Notification.js

@@ -1,4 +1,4 @@
-import { Model, attr, fk } from 'redux-orm';
+import { Model, attr, fk, oneToOne } from 'redux-orm';
 
 import ActionTypes from '../constants/ActionTypes';
 
@@ -15,16 +15,15 @@ export default class extends Model {
       as: 'user',
       relatedName: 'notifications',
     }),
-    actionId: fk({
-      to: 'Action',
-      as: 'action',
-      relatedName: 'notifications',
-    }),
     cardId: fk({
       to: 'Card',
       as: 'card',
       relatedName: 'notifications',
     }),
+    actionId: oneToOne({
+      to: 'Action',
+      as: 'action',
+    }),
   };
 
   static reducer({ type, payload }, Notification) {