update matrix state structure to use array instead of TaskDictionary

Author: Manuela Paula Ritter

src/app/matrix/canvas/canvas.component.ts

@@ -1,9 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
 import { map } from 'rxjs/operators';
-import { AppState } from 'src/app/store/app.state';
 import { Task, TaskDictionary, Topic } from '../matrix.interfaces';
-import { selectMatrixTasks, selectMatrixTopics } from '../matrix.selectors';
 import { MatrixService } from '../matrix.service';
 
 @Component({
@@ -22,10 +19,9 @@ export class CanvasComponent implements OnInit {
 
   ngOnInit(): void {
     this.matrixService
-      .selectTasks()
+      .selectTasksByTopics()
       .pipe(
         map((tasks) => {
-          console.log(tasks);
           if (tasks) {
             this.tasks = tasks;
           }

src/app/matrix/matrix.actions.ts

@@ -1,5 +1,5 @@
-import { Action, createAction, props } from '@ngrx/store';
-import { CurrentTask, MatrixData, Task, Topic } from './matrix.interfaces';
+import { Action } from '@ngrx/store';
+import { MatrixData, Task, Topic } from './matrix.interfaces';
 
 export const GET_MATRIX_DATA = '[MATRIX] get all matrix data from sever';
 export const GET_MATRIX_DATA_SUCCESS =
@@ -101,7 +101,7 @@ export class UpdateTopicFailed implements Action {
 
 export class SelectTask implements Action {
   readonly type = SELECT_TASK;
-  constructor(public currentTask: CurrentTask) {}
+  constructor(public currentTaskId: number) {}
 }
 
 export class ToggleTopicVisibility implements Action {

src/app/matrix/matrix.interfaces.ts

@@ -37,9 +37,8 @@ export interface TaskDictionary {
   [topicId: number]: Task[];
 }
 
-export interface CurrentTask {
-  topicId?: number;
-  taskId?: number;
+export interface TopicDictionary {
+  [id: number]: Topic;
 }
 
 export interface MatrixData {
@@ -49,8 +48,8 @@ export interface MatrixData {
 
 export interface MatrixState {
   topics: Topic[];
-  tasks: TaskDictionary;
-  taskHistory: CurrentTask[];
+  tasks: Task[];
+  taskHistory: number[];
   isLoading: boolean;
   errorMessage?: string;
 }
@@ -65,7 +64,8 @@ export interface MatrixService {
   selectTopics: () => Observable<Topic[]>;
   selectIsLoading: () => Observable<boolean>;
   selectErrorMessage: () => Observable<string | undefined>;
-  selectTasks: () => Observable<TaskDictionary>;
+  selectTasks: () => Observable<Task[]>;
+  selectTasksByTopics: () => Observable<TaskDictionary>;
   selectTaskHistory: () => Observable<Task[]>;
   selectTopicById: (id: number) => Observable<Topic | undefined>;
 }

src/app/matrix/matrix.reducers.spec.ts

@@ -31,7 +31,7 @@ describe('MatrixReducers', () => {
     beforeEach(() => {
       defaultState = {
         topics: [],
-        tasks: {},
+        tasks: [],
         taskHistory: [],
         isLoading: false,
         errorMessage: undefined,
@@ -80,7 +80,7 @@ describe('MatrixReducers', () => {
     beforeEach(() => {
       defaultState = {
         topics: [],
-        tasks: {},
+        tasks: [],
         taskHistory: [],
         isLoading: true,
         errorMessage: undefined,
@@ -126,7 +126,7 @@ describe('MatrixReducers', () => {
     beforeEach(() => {
       defaultState = {
         topics: [new Topic(1, 'test', Color.orange, true, false)],
-        tasks: { [1]: [] },
+        tasks: [],
         taskHistory: [],
         isLoading: true,
         errorMessage: 'test message',
@@ -178,7 +178,7 @@ describe('MatrixReducers', () => {
     beforeEach(() => {
       emptyState = {
         topics: [],
-        tasks: {},
+        tasks: [],
         taskHistory: [],
         isLoading: true,
         errorMessage: undefined,
@@ -187,7 +187,7 @@ describe('MatrixReducers', () => {
       defaultState = {
         ...emptyState,
         topics: [new Topic(1, 'test', Color.orange, true, false)],
-        tasks: {},
+        tasks: [],
       };
     });
 
@@ -235,7 +235,7 @@ describe('MatrixReducers', () => {
           new Topic(1, 'test', Color.green, true, false),
           new Topic(2, 'test', Color.orange, false, false),
         ],
-        tasks: {},
+        tasks: [],
         taskHistory: [],
         isLoading: false,
         errorMessage: undefined,

src/app/matrix/matrix.reducers.ts

@@ -17,11 +17,11 @@ import {
   UPDATE_TOPIC_FAILED,
   UPDATE_TOPIC_SUCCESS,
 } from './matrix.actions';
-import { MatrixState, Task, TaskDictionary } from './matrix.interfaces';
+import { MatrixState } from './matrix.interfaces';
 
 export const initialState: MatrixState = {
   topics: [],
-  tasks: {},
+  tasks: [],
   taskHistory: [],
   isLoading: false,
   errorMessage: undefined,
@@ -49,15 +49,15 @@ export function matrixReducer(state = initialState, action: Action) {
       // === success cases ===
       case GET_MATRIX_DATA_SUCCESS:
         draft.topics = matrixAction.data.topics;
-        draft.tasks = createTaskDictionary(matrixAction.data.tasks);
+        draft.tasks = matrixAction.data.tasks;
         setUnloading(draft);
         return;
       case UPDATE_TASK_SUCCESS:
-        const taskIndex = draft.tasks[matrixAction.task.topic].findIndex(
+        const taskIndex = draft.tasks.findIndex(
           (task) => task.id === matrixAction.task.id,
         );
         if (taskIndex > -1) {
-          draft.tasks[matrixAction.task.topic][taskIndex] = matrixAction.task;
+          draft.tasks[taskIndex] = matrixAction.task;
         }
         setUnloading(draft);
         return;
@@ -76,14 +76,13 @@ export function matrixReducer(state = initialState, action: Action) {
         return;
       // === frontend only actions ===
       case SELECT_TASK:
-        console.log(matrixAction.currentTask);
         const alreadyInHistory = draft.taskHistory.findIndex(
-          (t) => t.taskId === matrixAction.currentTask.taskId,
+          (t) => t === matrixAction.currentTaskId,
         );
         if (alreadyInHistory > -1) {
           draft.taskHistory.splice(alreadyInHistory, 1);
         }
-        draft.taskHistory.unshift(matrixAction.currentTask);
+        draft.taskHistory.unshift(matrixAction.currentTaskId);
         if (draft.taskHistory.length > 6) {
           draft.taskHistory.pop();
         }
@@ -104,16 +103,3 @@ const setUnloading = (draft: MatrixState): void => {
   draft.isLoading = false;
   draft.errorMessage = undefined;
 };
-
-const createTaskDictionary = (tasks: Task[]): TaskDictionary => {
-  const dict: TaskDictionary = {};
-  tasks.forEach((task) => {
-    if (dict[task.topic]) {
-      dict[task.topic].push(task);
-    } else {
-      dict[task.topic] = [task];
-    }
-  });
-  console.log(dict);
-  return dict;
-};

src/app/matrix/matrix.selectors.ts

@@ -24,6 +24,11 @@ export const selectMatrixTasks = createSelector(
   (state: MatrixState) => state.tasks,
 );
 
+export const selectMatrixTasksByTopics = createSelector(
+  selectMatrix,
+  (state: MatrixState) => createTaskDictionary(state.tasks),
+);
+
 export const selectMatrixTopic = createSelector(
   selectMatrixTopics,
   (topics: Topic[], id: number) => topics.find((t) => t.id === id),
@@ -36,10 +41,8 @@ export const selectTaskHistory = createSelector(
 
     if (state.taskHistory.length > 0) {
       state.taskHistory.forEach((c) => {
-        if (c.topicId) {
-          const foundTask = state.tasks[c.topicId].find(
-            (t) => t.id === c.taskId,
-          );
+        if (c) {
+          const foundTask = state.tasks.find((t) => t.id === c);
           if (foundTask) {
             result.push(foundTask);
           }
@@ -50,3 +53,15 @@ export const selectTaskHistory = createSelector(
     return result;
   },
 );
+
+const createTaskDictionary = (tasks: Task[]): TaskDictionary => {
+  const dict: TaskDictionary = {};
+  tasks.forEach((task) => {
+    if (dict[task.topic]) {
+      dict[task.topic].push(task);
+    } else {
+      dict[task.topic] = [task];
+    }
+  });
+  return dict;
+};

src/app/matrix/matrix.service.mock.ts

@@ -28,7 +28,10 @@ export class MatrixMockService implements MatrixService {
   selectErrorMessage(): Observable<string | undefined> {
     return of(undefined);
   }
-  selectTasks(): Observable<TaskDictionary> {
+  selectTasks(): Observable<Task[]> {
+    return of([this.testTask]);
+  }
+  selectTasksByTopics(): Observable<TaskDictionary> {
     return of({ [1]: [this.testTask] });
   }
   selectCurrentTask(): Observable<Task | undefined> {

src/app/matrix/matrix.service.ts

@@ -21,6 +21,7 @@ import {
   selectMatrixErrorMessage,
   selectMatrixIsLoading,
   selectMatrixTasks,
+  selectMatrixTasksByTopics,
   selectMatrixTopic,
   selectMatrixTopics,
   selectTaskHistory,
@@ -53,9 +54,7 @@ export class MatrixService implements IMatrixService, OnDestroy {
 
   selectTask(task: Task): void {
     console.log(task);
-    this.store.dispatch(
-      new SelectTask({ taskId: task.id, topicId: task.topic }),
-    );
+    this.store.dispatch(new SelectTask(task.id));
   }
   toggleTopicVisibility(topicId: number): void {
     this.store.dispatch(new ToggleTopicVisibility(topicId));
@@ -86,13 +85,20 @@ export class MatrixService implements IMatrixService, OnDestroy {
     );
   }
 
-  selectTasks(): Observable<TaskDictionary> {
+  selectTasks(): Observable<Task[]> {
     return this.store.pipe(
       select(selectMatrixTasks),
       takeUntil(this.unsubscribe$),
     );
   }
 
+  selectTasksByTopics(): Observable<TaskDictionary> {
+    return this.store.pipe(
+      select(selectMatrixTasksByTopics),
+      takeUntil(this.unsubscribe$),
+    );
+  }
+
   selectTaskHistory(): Observable<Task[]> {
     return this.store.pipe(
       select(selectTaskHistory),
@@ -102,7 +108,7 @@ export class MatrixService implements IMatrixService, OnDestroy {
 
   selectTopicById(id: number): Observable<Topic | undefined> {
     return this.store.pipe(
-      select(selectMatrixTopic),
+      select(selectMatrixTopic, id),
       takeUntil(this.unsubscribe$),
     );
   }