Skip to content

[WEB-2774] fix:favorites reorder #6179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pushya22 merged 2 commits into from
Dec 11, 2024
Merged

[WEB-2774] fix:favorites reorder #6179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
86e1285
fix:favorites reorder
vamsikrishnamathala Dec 10, 2024
4bbf7e1
chore: added error handling
vamsikrishnamathala Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { CustomMenu, Tooltip, DropIndicator, FavoriteFolderIcon, DragHandle } fr
import { cn } from "@/helpers/common.helper";
// hooks
import { useAppTheme } from "@/hooks/store";
import { useFavorite } from "@/hooks/store/use-favorite";
import { usePlatformOS } from "@/hooks/use-platform-os";
// constants
import { FavoriteRoot } from "./favorite-items";
Expand All @@ -45,7 +46,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
const { favorite, handleRemoveFromFavorites, isLastChild, handleDrop } = props;
// store hooks
const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();

const { getGroupedFavorites } = useFavorite();
const { isMobile } = usePlatformOS();
const { workspaceSlug } = useParams();
// states
Expand All @@ -58,6 +59,12 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
const actionSectionRef = useRef<HTMLDivElement | null>(null);
const elementRef = useRef<HTMLDivElement | null>(null);

useEffect(() => {
if (favorite.children === undefined && workspaceSlug) {
getGroupedFavorites(workspaceSlug.toString(), favorite.id);
}
}, [favorite.id, favorite.children, workspaceSlug, getGroupedFavorites]);

useEffect(() => {
const element = elementRef.current;

Expand Down Expand Up @@ -123,7 +130,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
})
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isDragging, favorite.id]);
}, [isDragging, favorite.id, isLastChild, favorite.id]);

useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));

Expand Down
2 changes: 1 addition & 1 deletion web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
})
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [elementRef?.current, isDragging]);
}, [elementRef?.current, isDragging, isLastChild, favorite.id]);
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Unnecessary dependency elementRef.current in useEffect

Including elementRef.current in the dependency array of the useEffect hook may cause unnecessary re-executions since changes to elementRef.current do not trigger re-renders. Consider removing elementRef.current from the dependency array.

Suggested fix:

-      }, [elementRef?.current, isDragging, isLastChild, favorite.id]);
+      }, [isDragging, isLastChild, favorite.id]);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
}, [elementRef?.current, isDragging, isLastChild, favorite.id]);
}, [isDragging, isLastChild, favorite.id]);


useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));

Expand Down
20 changes: 7 additions & 13 deletions web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,33 +87,27 @@ export const SidebarFavoritesMenu = observer(() => {
const sourceData = source.data as TargetData;

if (!sourceData.id) return;

if (isFolder) {
// handle move to a new parent folder if dropped on a folder
if (parentId && parentId !== sourceData.parentId) {
handleMoveToFolder(sourceData.id, parentId);
}
//handle remove from folder if dropped outside of the folder
if (parentId && parentId !== sourceData.parentId && sourceData.isChild) {
handleRemoveFromFavoritesFolder(sourceData.id);
handleMoveToFolder(sourceData.id, parentId); /**parent id */
}

// handle reordering at root level
if (droppedFavId) {
if (instruction != "make-child") {
handleReorder(sourceData.id, droppedFavId, instruction);
handleReorder(sourceData.id, droppedFavId, instruction); /** sequence */
}
}
} else {
//handling reordering for favorites
if (droppedFavId) {
handleReorder(sourceData.id, droppedFavId, instruction);
handleReorder(sourceData.id, droppedFavId, instruction); /** sequence */
}
}

// handle removal from folder if dropped outside a folder
if (!parentId && sourceData.isChild) {
handleRemoveFromFavoritesFolder(sourceData.id);
}
/**remove if dropped outside and source is a child */
if (!parentId && sourceData.isChild) {
handleRemoveFromFavoritesFolder(sourceData.id); /**parent null */
}
};

Expand Down
34 changes: 8 additions & 26 deletions web/core/store/favorite.store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,23 +174,14 @@ export class FavoriteStore implements IFavoriteStore {
* @returns Promise<void>
*/
moveFavoriteToFolder = async (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => {
const oldParent = this.favoriteMap[favoriteId].parent;
try {
await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, data);
runInAction(() => {
// add parent of the favorite
set(this.favoriteMap, [favoriteId, "parent"], data.parent);
});
await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, data);
} catch (error) {
console.error("Failed to move favorite from favorite store");

// revert the changes
runInAction(() => {
if (!data.parent) return;

// revert the parent
set(this.favoriteMap, [favoriteId, "parent"], oldParent);
});
console.error("Failed to move favorite to folder", error);
throw error;
}
};
Expand All @@ -201,7 +192,6 @@ export class FavoriteStore implements IFavoriteStore {
destinationId: string,
edge: string | undefined
) => {
const initialSequence = this.favoriteMap[favoriteId].sequence;
try {
let resultSequence = 10000;
if (edge) {
Expand All @@ -221,35 +211,27 @@ export class FavoriteStore implements IFavoriteStore {
}
}
}

await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { sequence: resultSequence });

runInAction(() => {
set(this.favoriteMap, [favoriteId, "sequence"], resultSequence);
});

await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { sequence: resultSequence });
} catch (error) {
console.error("Failed to move favorite folder");
runInAction(() => {
set(this.favoriteMap, [favoriteId, "sequence"], initialSequence);
throw error;
});
throw error;
}
};

removeFromFavoriteFolder = async (workspaceSlug: string, favoriteId: string) => {
const parent = this.favoriteMap[favoriteId].parent;
try {
await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { parent: null });
runInAction(() => {
//remove parent
set(this.favoriteMap, [favoriteId, "parent"], null);
});
await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { parent: null });
} catch (error) {
console.error("Failed to move favorite");
runInAction(() => {
set(this.favoriteMap, [favoriteId, "parent"], parent);

throw error;
});
throw error;
}
};
Expand Down Expand Up @@ -384,7 +366,7 @@ export class FavoriteStore implements IFavoriteStore {
set(this.favoriteMap, [favorite.id], favorite);
this.favoriteIds.push(favorite.id);
this.favoriteIds = uniqBy(this.favoriteIds, (id) => id);
favorite.entity_identifier && set(this.entityMap, [favorite.entity_identifier], favorite);
if (favorite.entity_identifier) set(this.entityMap, [favorite.entity_identifier], favorite);
});
});

Expand Down