From 742d3fcdeffbf9fc95d86a1606776191178610d0 Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Tue, 24 Oct 2023 21:15:22 +0300
Subject: [PATCH] optimize breadcrumbs configuration using existing data

---
 .../saga/configureBreadcrumbsData.ts          | 76 ++++++++++++++++---
 1 file changed, 64 insertions(+), 12 deletions(-)

diff --git a/src/store/states/multipleSpacesLayout/saga/configureBreadcrumbsData.ts b/src/store/states/multipleSpacesLayout/saga/configureBreadcrumbsData.ts
index 45025fea08..9a189226e1 100644
--- a/src/store/states/multipleSpacesLayout/saga/configureBreadcrumbsData.ts
+++ b/src/store/states/multipleSpacesLayout/saga/configureBreadcrumbsData.ts
@@ -1,8 +1,43 @@
 import { put, select } from "redux-saga/effects";
 import { InboxItemType } from "@/shared/constants";
+import {
+  selectCommonLayoutCommonsState,
+  selectCommonLayoutProjectsState,
+} from "@/store/states";
 import * as actions from "../actions";
 import { selectMultipleSpacesLayoutBreadcrumbs } from "../selectors";
-import { MultipleSpacesLayoutState } from "../types";
+import { MultipleSpacesLayoutState, ProjectsStateItem } from "../types";
+
+const getItemsByExistingData = (
+  activeCommonId: string,
+  existingItems: ProjectsStateItem[],
+): ProjectsStateItem[] | null => {
+  const currentItem = existingItems.find(
+    (item) => item.commonId === activeCommonId,
+  );
+
+  if (!currentItem) {
+    return null;
+  }
+
+  const items: ProjectsStateItem[] = [currentItem];
+  let parentCommonId = currentItem.directParent?.commonId;
+
+  while (parentCommonId) {
+    const parentItem = existingItems.find(
+      (item) => item.commonId === parentCommonId,
+    );
+
+    if (!parentItem) {
+      return null;
+    }
+
+    items.unshift(parentItem);
+    parentCommonId = parentItem.directParent?.commonId;
+  }
+
+  return items;
+};
 
 export function* configureBreadcrumbsData(
   action: ReturnType<typeof actions.configureBreadcrumbsData>,
@@ -41,27 +76,44 @@ export function* configureBreadcrumbsData(
     return;
   }
 
+  const { commons, areCommonsFetched } = (yield select(
+    selectCommonLayoutCommonsState,
+  )) as { commons: ProjectsStateItem[]; areCommonsFetched: boolean };
+  const { projects } = (yield select(selectCommonLayoutProjectsState)) as {
+    projects: ProjectsStateItem[];
+  };
+  const items = areCommonsFetched
+    ? getItemsByExistingData(payload.activeCommonId, [...commons, ...projects])
+    : null;
+
   yield put(
     actions.setBreadcrumbsData({
-      ...(currentBreadcrumbs || {
-        items: [],
-        areItemsLoading: true,
-        areItemsFetched: false,
-      }),
+      ...(items
+        ? {
+            items,
+            areItemsLoading: false,
+            areItemsFetched: true,
+          }
+        : currentBreadcrumbs || {
+            items: [],
+            areItemsLoading: true,
+            areItemsFetched: false,
+          }),
       type: InboxItemType.FeedItemFollow,
       activeItem: payload.activeItem ? { ...payload.activeItem } : null,
       activeCommonId: payload.activeCommonId,
     }),
   );
 
-  if (
-    currentBreadcrumbs?.activeCommonId !== payload.activeCommonId ||
-    !currentBreadcrumbs.items.some(
-      (item) => item.commonId === payload.activeCommonId,
-    )
-  ) {
+  if (!items) {
     yield put(
       actions.fetchBreadcrumbsItemsByCommonId.request(payload.activeCommonId),
     );
+  } else {
+    yield put(
+      actions.fetchBreadcrumbsItemsByCommonId.cancel(
+        "Stop current breadcrumbs items fetch",
+      ),
+    );
   }
 }