NU-1778 resolve toggle items issues

TouK · Oct 4, 2024 · 100f6dc · 100f6dc
1 parent d4d4a50
commit 100f6dc
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 26 deletions.
diff --git a/designer/client/src/components/toolbars/activities/ActivitiesPanel.tsx b/designer/client/src/components/toolbars/activities/ActivitiesPanel.tsx
@@ -104,38 +104,44 @@ export const ActivitiesPanel = (props: ToolbarPanelProps) => {
         handleUpdateScenarioActivities,
     });
 
-    const handleHideRow = (index: number, sameItemOccurrence: number) => {
+    const handleHideRows = (uiGeneratedId: string, sameItemOccurrence: number) => {
+        let buttonIndex: number;
+
         dispatch(
             updateScenarioActivities((prevState) => {
                 return prevState.map((data, prevStateItemIndex) => {
-                    if (prevStateItemIndex === index) {
+                    if (data.uiGeneratedId === uiGeneratedId) {
                         return { ...data, isClicked: false };
                     }
 
-                    if (prevStateItemIndex <= index && prevStateItemIndex > index - sameItemOccurrence - 1) {
+                    buttonIndex = prevState.findIndex((uiActivity) => uiActivity.uiGeneratedId === uiGeneratedId);
+
+                    if (prevStateItemIndex <= buttonIndex && prevStateItemIndex > buttonIndex - sameItemOccurrence - 1) {
                         return { ...data, isHidden: true };
                     }
 
                     return data;
                 });
             }),
         );
-        listRef.current.scrollToItem(index - sameItemOccurrence - 2);
+        listRef.current.scrollToItem(buttonIndex - sameItemOccurrence - 2);
     };
 
-    const handleShowRow = (index: number, sameItemOccurrence: number) => {
+    const handleShowRows = (uiGeneratedId: string, sameItemOccurrence: number) => {
         dispatch(
             updateScenarioActivities((prevState) => {
-                return prevState.map((data, prevStateItemIndex) => {
-                    if (prevStateItemIndex === index + sameItemOccurrence) {
-                        return { ...data, isClicked: true };
+                return prevState.map((uiActivity, prevStateItemIndex) => {
+                    if (uiActivity.uiGeneratedId === uiGeneratedId) {
+                        return { ...uiActivity, isClicked: true };
                     }
 
-                    if (prevStateItemIndex >= index && prevStateItemIndex < index + sameItemOccurrence) {
-                        return { ...data, isHidden: false };
+                    const buttonIndex = prevState.findIndex((uiActivity) => uiActivity.uiGeneratedId === uiGeneratedId);
+
+                    if (prevStateItemIndex < buttonIndex && prevStateItemIndex >= buttonIndex - sameItemOccurrence) {
+                        return { ...uiActivity, isHidden: false };
                     }
 
-                    return data;
+                    return uiActivity;
                 });
             }),
         );
@@ -188,8 +194,8 @@ export const ActivitiesPanel = (props: ToolbarPanelProps) => {
                                         index={index}
                                         style={style}
                                         setRowHeight={setRowHeight}
-                                        handleShowRow={handleShowRow}
-                                        handleHideRow={handleHideRow}
+                                        handleShowRows={handleShowRows}
+                                        handleHideRows={handleHideRows}
                                         activities={visibleUiActivities}
                                         searchQuery={searchQuery}
                                     />

diff --git a/designer/client/src/components/toolbars/activities/ActivitiesPanelRow.tsx b/designer/client/src/components/toolbars/activities/ActivitiesPanelRow.tsx
@@ -6,13 +6,13 @@ interface Props {
     index: number;
     style?: CSSProperties | undefined;
     setRowHeight: (index: number, height: number) => void;
-    handleShowRow(index: number, sameItemOccurrence: number): void;
-    handleHideRow(index: number, sameItemOccurrence: number): void;
+    handleShowRows(uiGeneratedId: string, sameItemOccurrence: number): void;
+    handleHideRows(uiGeneratedId: string, sameItemOccurrence: number): void;
     activities: UIActivity[];
     searchQuery: string;
 }
 
-export const ActivitiesPanelRow = memo(({ index, style, setRowHeight, handleShowRow, handleHideRow, activities, searchQuery }: Props) => {
+export const ActivitiesPanelRow = memo(({ index, style, setRowHeight, handleShowRows, handleHideRows, activities, searchQuery }: Props) => {
     const rowRef = useRef<HTMLDivElement>(null);
     const activity = useMemo(() => activities[index], [activities, index]);
     const firstDeployedIndex = useMemo(
@@ -39,9 +39,11 @@ export const ActivitiesPanelRow = memo(({ index, style, setRowHeight, handleShow
                 return (
                     <div ref={rowRef}>
                         {activity.isClicked ? (
-                            <ButtonItem handleHideRow={() => handleHideRow(index, activity.sameItemOccurrence)}>Show less</ButtonItem>
+                            <ButtonItem handleHideRow={() => handleHideRows(activity.uiGeneratedId, activity.sameItemOccurrence)}>
+                                Show less
+                            </ButtonItem>
                         ) : (
-                            <ButtonItem handleHideRow={() => handleShowRow(index, activity.sameItemOccurrence)}>
+                            <ButtonItem handleHideRow={() => handleShowRows(activity.uiGeneratedId, activity.sameItemOccurrence)}>
                                 Show {activity.sameItemOccurrence} more
                             </ButtonItem>
                         )}
@@ -52,7 +54,7 @@ export const ActivitiesPanelRow = memo(({ index, style, setRowHeight, handleShow
                 return null;
             }
         }
-    }, [activity, handleHideRow, handleShowRow, index, isActiveDeployedItem, searchQuery]);
+    }, [activity, handleHideRows, handleShowRows, isActiveDeployedItem, searchQuery]);
 
     return (
         <div key={activity.uiGeneratedId} style={style}>

diff --git a/designer/client/src/components/toolbars/activities/helpers/extendActivitiesWithUIData.ts b/designer/client/src/components/toolbars/activities/helpers/extendActivitiesWithUIData.ts
@@ -37,7 +37,7 @@ export const extendActivitiesWithUIData = (activitiesDataWithMetadata: Activity[
         const isDateRangeInOccurrences = occurrences.every((occurrence) => occurrence === occurrences[0]);
         const isNextOccurrence = currentActivity.type === nextActivity?.type;
         const shouldAddDateRangeElement =
-            occurrences.length > hideItemsOptionAvailableLimit && !isNextOccurrence && !isDateRangeInOccurrences;
+            occurrences.length >= hideItemsOptionAvailableLimit && !isNextOccurrence && !isDateRangeInOccurrences;
 
         if (shouldAddDateRangeElement) {
             const dates = occurrences.map((occurrence) => moment(occurrence));
@@ -55,6 +55,8 @@ export const extendActivitiesWithUIData = (activitiesDataWithMetadata: Activity[
 
             if (isNextOccurrence) {
                 occurrences.push(formatDate(currentActivity.date));
+            } else {
+                occurrences = [];
             }
 
             return recursiveDateLabelDesignation(nextActivity, index, occurrences, iteration);
@@ -74,27 +76,27 @@ export const extendActivitiesWithUIData = (activitiesDataWithMetadata: Activity[
         return undefined;
     };
 
-    const recursiveToggleItemsButtonDesignation = (activity: Activity, index: number, occurrence = 0): ButtonActivity | undefined => {
-        const previousActivityIndex = index - 1 - occurrence;
+    const recursiveToggleItemsButtonDesignation = (activity: Activity, index: number, occurrences = 0): ButtonActivity | undefined => {
+        const previousActivityIndex = index - 1 - occurrences;
         const previousActivity = activitiesDataWithMetadata[previousActivityIndex];
         const nextActivity = activitiesDataWithMetadata[index + 1];
 
         if (
-            occurrence > hideItemsOptionAvailableLimit &&
+            occurrences >= hideItemsOptionAvailableLimit &&
             activity.type !== previousActivity?.type &&
             activity.type !== nextActivity?.type
         ) {
             return {
                 uiGeneratedId: uuid4(),
                 uiType: "toggleItemsButton",
-                sameItemOccurrence: occurrence,
+                sameItemOccurrence: occurrences,
                 isClicked: false,
             };
         }
 
         if (activity.type === previousActivity?.type) {
-            occurrence++;
-            return recursiveToggleItemsButtonDesignation(activity, index, occurrence);
+            occurrences++;
+            return recursiveToggleItemsButtonDesignation(activity, index, occurrences);
         }
 
         return undefined;

diff --git a/designer/client/src/components/toolbars/activities/useActivitiesSearch.ts b/designer/client/src/components/toolbars/activities/useActivitiesSearch.ts
@@ -86,6 +86,7 @@ export const useActivitiesSearch = ({ activities, handleScrollToItem, handleUpda
     const handleClearResults = () => {
         handleSearch("");
         setSelectedResult(0);
+        setFoundResults([]);
     };
 
     useEffect(() => {