Merge pull request #2371 from daostack/bugfix/CW-2356-same-items-on-s…

…witch Optimize breadcrumb loading #2356
daostack · Nov 30, 2023 · 53e77b9 · 53e77b9
2 parents e53dd3c + 8707e44
commit 53e77b9
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 14 deletions.
diff --git a/...ents/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx b/...ents/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx
@@ -9,7 +9,6 @@ import {
   selectCommonLayoutCommonId,
 } from "@/store/states";
 import { useGoToCreateCommon } from "../../../../../../hooks";
-import { LoadingBreadcrumbsItem } from "../LoadingBreadcrumbsItem";
 import { Separator } from "../Separator";
 import { ActiveFeedBreadcrumbsItem, FeedBreadcrumbsItem } from "./components";
 import styles from "./FeedItemBreadcrumbs.module.scss";
@@ -60,7 +59,6 @@ const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
 
   return (
     <ul className={styles.container}>
-      {breadcrumbs.areItemsLoading && <LoadingBreadcrumbsItem />}
       {!breadcrumbs.areItemsLoading &&
         breadcrumbs.items.map((item, index) => (
           <React.Fragment key={item.commonId}>
@@ -75,7 +73,7 @@ const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
         ))}
       {breadcrumbs.activeItem && (
         <>
-          {(breadcrumbs.areItemsLoading || breadcrumbs.items.length > 0) && (
+          {!breadcrumbs.areItemsLoading && breadcrumbs.items.length > 0 && (
             <Separator />
           )}
           <ActiveFeedBreadcrumbsItem

diff --git a/src/store/states/multipleSpacesLayout/saga/configureBreadcrumbsData.ts b/src/store/states/multipleSpacesLayout/saga/configureBreadcrumbsData.ts
@@ -1,6 +1,7 @@
 import { put, select } from "redux-saga/effects";
 import { InboxItemType } from "@/shared/constants";
 import {
+  MultipleSpacesLayoutFeedItemBreadcrumbs,
   selectCommonLayoutCommonsState,
   selectCommonLayoutProjectsState,
 } from "@/store/states";
@@ -39,6 +40,42 @@ const getItemsByExistingData = (
   return items;
 };
 
+const getNextBreadcrumbsData = (
+  items: ProjectsStateItem[] | null,
+  currentBreadcrumbs: MultipleSpacesLayoutFeedItemBreadcrumbs | null,
+  activeCommonId: string,
+): Pick<
+  MultipleSpacesLayoutFeedItemBreadcrumbs,
+  "items" | "areItemsLoading" | "areItemsFetched"
+> => {
+  if (items) {
+    return {
+      items,
+      areItemsLoading: false,
+      areItemsFetched: true,
+    };
+  }
+  if (!currentBreadcrumbs) {
+    return {
+      items: [],
+      areItemsLoading: true,
+      areItemsFetched: false,
+    };
+  }
+
+  const activeItemIndex = currentBreadcrumbs.items.findIndex(
+    (item) => item.commonId === activeCommonId,
+  );
+
+  return {
+    ...currentBreadcrumbs,
+    items:
+      activeItemIndex > -1
+        ? currentBreadcrumbs.items.slice(0, activeItemIndex + 1)
+        : currentBreadcrumbs.items,
+  };
+};
+
 export function* configureBreadcrumbsData(
   action: ReturnType<typeof actions.configureBreadcrumbsData>,
 ) {
@@ -88,17 +125,11 @@ export function* configureBreadcrumbsData(
 
   yield put(
     actions.setBreadcrumbsData({
-      ...(items
-        ? {
-            items,
-            areItemsLoading: false,
-            areItemsFetched: true,
-          }
-        : currentBreadcrumbs || {
-            items: [],
-            areItemsLoading: true,
-            areItemsFetched: false,
-          }),
+      ...getNextBreadcrumbsData(
+        items,
+        currentBreadcrumbs,
+        payload.activeCommonId,
+      ),
       type: InboxItemType.FeedItemFollow,
       activeItem: payload.activeItem ? { ...payload.activeItem } : null,
       activeCommonId: payload.activeCommonId,