fix: 🐛 sidepane menu options code refactor with common data and delet…

src/pageComponents/dashboard/dashboardLayout.tsx

@@ -31,6 +31,7 @@ import {
 	CATEGORIES_KEY,
 	IMAGES_URL,
 	LINKS_URL,
+	menuListItemName,
 	SEARCH_URL,
 	SETTINGS_URL,
 	TRASH_URL,
@@ -289,7 +290,7 @@ const DashboardLayout = (props: DashboardLayoutProps) => {
 								find(
 									categoryData?.data,
 									(item) => item?.category_slug === currentPath,
-								)?.category_name ?? "All Bookmarks"
+								)?.category_name ?? menuListItemName.allBookmarks
 							}`}
 							userId={userId}
 						/>

src/pageComponents/dashboard/index.tsx

@@ -45,6 +45,7 @@ import AddModalContent from "./modals/addModalContent";
 import SignedOutSection from "./signedOutSection";
 
 import "react-toastify/dist/ReactToastify.css";
+
 import useAddBookmarkMinDataOptimisticMutation from "../../async/mutationHooks/bookmarks/useAddBookmarkMinDataOptimisticMutation";
 import useAddBookmarkScreenshotMutation from "../../async/mutationHooks/bookmarks/useAddBookmarkScreenshotMutation";
 import useClearBookmarksInTrashMutation from "../../async/mutationHooks/bookmarks/useClearBookmarksInTrashMutation";
@@ -1058,11 +1059,12 @@ const Dashboard = () => {
 										"Only collection owner can delete this collection",
 									);
 								}
-							}
 
-							// only push to home if user is deleting the category when user is currently in that category
-							if (current) {
-								void router.push(`/${ALL_BOOKMARKS_URL}`);
+								// current - only push to home if user is deleting the category when user is currently in that category
+								// isDataPresentCheck - only push to home after category get delete successfully
+								if (isDataPresentCheck && current) {
+									void router.push(`/${ALL_BOOKMARKS_URL}`);
+								}
 							}
 
 							break;

src/pageComponents/dashboard/sidePane/sidePaneOptionsMenu.tsx

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { isLink } from "@adaptui/react";
 import { useSession } from "@supabase/auth-helpers-react";
 import { type PostgrestError } from "@supabase/supabase-js";
 import { useQueryClient } from "@tanstack/react-query";
@@ -15,6 +16,7 @@ import { optionsMenuListArray } from "../../../utils/commonData";
 import {
 	ALL_BOOKMARKS_URL,
 	BOOKMARKS_COUNT_KEY,
+	menuListItemName,
 	SEARCH_URL,
 	TRASH_URL,
 	UNCATEGORIZED_URL,
@@ -45,10 +47,10 @@ const SidePaneOptionsMenu = () => {
 		bookmarksCountData,
 	).filter((item) => {
 		if (
-			item?.name === "Inbox" ||
-			item?.name === "All Bookmarks" ||
-			item?.name === "Trash" ||
-			item?.name === "Settings"
+			item?.name === menuListItemName.inbox ||
+			item?.name === menuListItemName.allBookmarks ||
+			item?.name === menuListItemName.trash ||
+			item?.name === menuListItemName.settings
 		) {
 			return item;
 		} else return null;

src/pageComponents/dashboard/sidePane/sidePaneTypesList.tsx

@@ -1,21 +1,13 @@
-import { count } from "console";
 import { useSession } from "@supabase/auth-helpers-react";
 import { type PostgrestError } from "@supabase/supabase-js";
 import { useQueryClient } from "@tanstack/react-query";
-import { id } from "date-fns/locale";
 
 import useGetCurrentUrlPath from "../../../hooks/useGetCurrentUrlPath";
-import ArticleIcon from "../../../icons/articleIcon";
-import FolderIcon from "../../../icons/folderIcon";
-import ImageIcon from "../../../icons/imageIcon";
-import VideoIcon from "../../../icons/videoIcon";
 import { type BookmarksCountTypes } from "../../../types/apiTypes";
+import { optionsMenuListArray } from "../../../utils/commonData";
 import {
-	ALL_BOOKMARKS_URL,
 	BOOKMARKS_COUNT_KEY,
-	IMAGES_URL,
-	LINKS_URL,
-	VIDEOS_URL,
+	menuListItemName,
 } from "../../../utils/constants";
 
 import SingleListItemComponent from "./singleListItemComponent";
@@ -33,44 +25,21 @@ const SidePaneTypesList = () => {
 		error: PostgrestError;
 	};
 
-	const optionsMenuList = [
-		{
-			icon: <ArticleIcon />,
-			name: "Links",
-			href: `/${LINKS_URL}`,
-			current: currentPath === LINKS_URL,
-			id: 0,
-			count: bookmarksCountData?.data?.links,
-			iconColor: "",
-		},
-		{
-			icon: <ImageIcon />,
-			name: "Image",
-			href: `/${IMAGES_URL}`,
-			current: currentPath === IMAGES_URL,
-			id: 1,
-			count: bookmarksCountData?.data?.images,
-			iconColor: "",
-		},
-		{
-			icon: <VideoIcon />,
-			name: "Videos",
-			href: `/${VIDEOS_URL}`,
-			current: currentPath === VIDEOS_URL,
-			id: 2,
-			count: bookmarksCountData?.data?.videos,
-			iconColor: "",
-		},
-		{
-			icon: <FolderIcon />,
-			name: "Documents",
-			href: `/${ALL_BOOKMARKS_URL}`,
-			current: false,
-			id: 3,
-			count: undefined,
-			iconColor: "",
-		},
-	];
+	const optionsMenuList = optionsMenuListArray(currentPath, bookmarksCountData)
+		.filter((item) => {
+			if (
+				item.name === menuListItemName.links ||
+				item.name === menuListItemName.image ||
+				item.name === menuListItemName.videos ||
+				item.name === menuListItemName.documents
+			) {
+				return item;
+			} else return null;
+		})
+		.map((item, index) => ({
+			...item,
+			id: index,
+		}));
 
 	return (
 		<div className="pt-4">

src/utils/commonData.tsx

@@ -1,6 +1,7 @@
 import { type PostgrestError } from "@supabase/supabase-js";
 
 import ArticleIcon from "../icons/articleIcon";
+import FolderIcon from "../icons/folderIcon";
 import HomeIconGray from "../icons/homeIconGray";
 import ImageIcon from "../icons/imageIcon";
 import InboxIconGray from "../icons/inboxIconGray";
@@ -14,6 +15,7 @@ import {
 	ALL_BOOKMARKS_URL,
 	IMAGES_URL,
 	LINKS_URL,
+	menuListItemName,
 	SEARCH_URL,
 	SETTINGS_URL,
 	TRASH_URL,
@@ -3793,7 +3795,7 @@ export const optionsMenuListArray = (
 ) => [
 	{
 		icon: <HomeIconGray />,
-		name: "All Bookmarks",
+		name: menuListItemName.allBookmarks,
 		href: `/${ALL_BOOKMARKS_URL}`,
 		current: currentPath === ALL_BOOKMARKS_URL,
 		id: 0,
@@ -3802,7 +3804,7 @@ export const optionsMenuListArray = (
 	},
 	{
 		icon: <InboxIconGray />,
-		name: "Inbox",
+		name: menuListItemName.inbox,
 		href: `/${UNCATEGORIZED_URL}`,
 		current: currentPath === UNCATEGORIZED_URL,
 		id: 1,
@@ -3811,7 +3813,7 @@ export const optionsMenuListArray = (
 	},
 	{
 		icon: <TrashIconGray />,
-		name: "Trash",
+		name: menuListItemName.trash,
 		href: `/${TRASH_URL}`,
 		current: currentPath === TRASH_URL,
 		id: 2,
@@ -3820,7 +3822,7 @@ export const optionsMenuListArray = (
 	},
 	{
 		icon: <SettingsIcon />,
-		name: "Settings",
+		name: menuListItemName.settings,
 		href: `/${SETTINGS_URL}`,
 		current: currentPath === SETTINGS_URL,
 		id: 3,
@@ -3829,7 +3831,7 @@ export const optionsMenuListArray = (
 	},
 	{
 		icon: <ImageIcon />,
-		name: "Image",
+		name: menuListItemName.image,
 		href: `/${IMAGES_URL}`,
 		current: currentPath === IMAGES_URL,
 		id: 4,
@@ -3838,7 +3840,7 @@ export const optionsMenuListArray = (
 	},
 	{
 		icon: <VideoIcon />,
-		name: "Videos",
+		name: menuListItemName.videos,
 		href: `/${VIDEOS_URL}`,
 		current: currentPath === VIDEOS_URL,
 		id: 5,
@@ -3847,11 +3849,20 @@ export const optionsMenuListArray = (
 	},
 	{
 		icon: <ArticleIcon />,
-		name: "Links",
+		name: menuListItemName.links,
 		href: `/${LINKS_URL}`,
 		current: currentPath === LINKS_URL,
 		id: 6,
 		count: undefined,
 		iconColor: "",
 	},
+	{
+		icon: <FolderIcon />,
+		name: menuListItemName.documents,
+		href: `/${ALL_BOOKMARKS_URL}`,
+		current: false,
+		id: 7,
+		count: undefined,
+		iconColor: "",
+	},
 ];

src/utils/constants.ts

@@ -157,12 +157,12 @@ export const acceptedFileTypes = [
 
 export const bookmarkType = "bookmark";
 
-export const imageFileTypes = acceptedFileTypes?.filter((item) =>
-	item?.includes("image"),
+export const imageFileTypes = acceptedFileTypes?.filter(
+	(item) => item?.includes("image"),
 );
 
-export const videoFileTypes = acceptedFileTypes?.filter((item) =>
-	item?.includes("video"),
+export const videoFileTypes = acceptedFileTypes?.filter(
+	(item) => item?.includes("video"),
 );
 
 // color picker colors
@@ -197,3 +197,14 @@ export const colorPickerColors = [
 // blur-hash
 export const defaultBlur =
 	"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA8RJREFUWEeNVwly4zAMk5z/v2+b++wvYmuHJEhCspPdTFv5SEUQBA/V39ejFXxai8tSStMf+9hF99pf+dtKDzYu+9dpp/4vgN54btAKbf0FxCaAVkoCUId9Y/eePWd2iJyVtzC1AaZ2rNo/1t+nhSCNO9cGQp/jGxQMMssM/CMOYnAArADgJ8Itdw3xFuP2G99hacRu7HVe15U5eM3wX2AgRSfGYViBLAkghCCANjyvYrLCzXz/iRd5XgOAbg5v3eswDhCrUMgOuk2psqolWQEEt/p+1AokZQDcM6FajS/qOV9bGJwZyEKNGwjzfLLr8TmMbzFRXw8Roasdni6yAsRiq947Q+4NvA+jdYJxsODsGEr6m/Wlvh73yLXwGEbbMhsTDCirU9AvnlsIxjVDEawglZyN+robAPPOjJnRGb9yP5fiz7cATGJY6Le1A+P62EhB2SoBeOzVkBufyxJAZmQDxIrYW9wBAEAMBOvBRbgOQ30KA6T68H5+BwsKQlhwYSpfrnwAcBamHVhwJjwM60zQ/HnebhaCYMC8XwJAAonMEACu/ElivytVAeTqerDYZ2YoB1TVDYBm1xj79xoEMeD5roamqRT1fAQi5oyJkfwQ4eMqDKAASfw15u+yLO/SZlntPjJCUjLSkOgXAE7/tOsEaeatUNW+p5X6uFwRgoEBNe4gEoDVAyo+Qr0woN73IMxziHGrFkgW3BXANwZGDfQMmHEBMQDgTIjy3Mdf/bifL9Z0tQxT/jsDyoJlAYswav4XACFED8FGSa638zkrodeAWfJfPDfv7TrLs9d/K8EiQMoA6KArStGMqBug/9Tb6WzdPhgQFrgGDPH3xqW6AgAPAa1jGoZusw2YH9fTKUSoIFT1BiKqoFZGiT26pdbQLETJAkqxh2VszYNxBXA5HqkZcQfMchzdULsiBTIYqChEVJapM36aBQDgQJUQQgwx+lzg8ac+oBGgDkh9IOcD5P+HYUQBnA8GIOgd5oD0Pse0XoTe+735TFR6aVYcCpAzWc+HfQ6l3USUbORg2u9iDLAWuO6vZ0M+2ZjRVurpsPf5OyeeGMt8Qs55MQsaSqsLrZsNo9L35Md0jcdNAOx/VmO5HdFS8XlkSwZ4+g0mfEb4MI5DbASqlXrc//Ckb20ZhxEeQldnIQyePmp52+0YirSjk0fnrgL4E271CJ2BjeTV/q7uQo85HefTATIdbvicGQD45BNZYTrxgNkavZ2unY0g1wDxcY/D2AE4EAP9kXw4L1LkMv6oBVGbXPmJOQ51fKqiZPoLu7CiXKiHtJUAAAAASUVORK5CYII=";
+
+export const menuListItemName = {
+	allBookmarks: "All Bookmarks",
+	inbox: "Inbox",
+	trash: "Trash",
+	settings: "Settings",
+	image: "Image",
+	videos: "Videos",
+	links: "Links",
+	documents: "Documents",
+};