From ef948420662f4da0b09aed64651b16f389eebdf0 Mon Sep 17 00:00:00 2001 From: Eugene Fox Date: Thu, 8 May 2025 06:55:35 +0300 Subject: [PATCH] fix: collections removed by their sorted index --- .../sidepanel/components/CollectionView.tsx | 2 +- entrypoints/sidepanel/components/TabView.tsx | 8 +++- .../collections/CollectionHeader.tsx | 4 +- .../collections/CollectionMoreButton.tsx | 10 ++--- .../components/collections/GroupMoreMenu.tsx | 14 ++++--- .../collections/OpenCollectionButton.tsx | 4 +- .../sidepanel/contexts/CollectionContext.tsx | 1 - .../contexts/CollectionsProvider.tsx | 23 ++++++----- .../collections/CollectionListView.tsx | 38 +++++++++---------- 9 files changed, 56 insertions(+), 48 deletions(-) diff --git a/entrypoints/sidepanel/components/CollectionView.tsx b/entrypoints/sidepanel/components/CollectionView.tsx index 77ef360..b4b2696 100644 --- a/entrypoints/sidepanel/components/CollectionView.tsx +++ b/entrypoints/sidepanel/components/CollectionView.tsx @@ -33,7 +33,7 @@ export default function CollectionView({ collection, index: collectionIndex, dra const colorCls = useGroupColors(); return ( - +
(CollectionContext); const { setNodeRef, setActivatorNodeRef, nodeProps, activatorProps, isBeingDragged @@ -29,16 +31,18 @@ export default function TabView({ tab, indices, dragOverlay }: TabViewProps): Re args.preventDefault(); args.stopPropagation(); + const removeIndex: number[] = [collection.timestamp, ...indices.slice(1)]; + if (deletePrompt) dialog.pushPrompt({ title: i18n.t("tabs.delete"), content: i18n.t("common.delete_prompt"), destructive: true, confirmText: i18n.t("common.actions.delete"), - onConfirm: () => removeItem(...indices) + onConfirm: () => removeItem(...removeIndex) }); else - removeItem(...indices); + removeItem(...removeIndex); }; const handleClick: MouseEventHandler = (args) => diff --git a/entrypoints/sidepanel/components/collections/CollectionHeader.tsx b/entrypoints/sidepanel/components/collections/CollectionHeader.tsx index c83249a..38d505e 100644 --- a/entrypoints/sidepanel/components/collections/CollectionHeader.tsx +++ b/entrypoints/sidepanel/components/collections/CollectionHeader.tsx @@ -15,7 +15,7 @@ export default function CollectionHeader({ dragHandleRef, dragHandleProps }: Col const [listLocation] = useSettings("listLocation"); const isTab: boolean = listLocation === "tab" || listLocation === "pinned"; const { updateCollection } = useCollections(); - const { tabCount, collection, collectionIndex } = useContext(CollectionContext); + const { tabCount, collection } = useContext(CollectionContext); const [alwaysShowToolbars] = useSettings("alwaysShowToolbars"); const AddIcon = bundleIcon(Add20Filled, Add20Regular); @@ -25,7 +25,7 @@ export default function CollectionHeader({ dragHandleRef, dragHandleProps }: Col const newTabs: (TabItem | GroupItem)[] = isTab ? (await saveTabsToCollection(false)).items : await getSelectedTabs(); - updateCollection({ ...collection, items: [...collection.items, ...newTabs] }, collectionIndex); + updateCollection({ ...collection, items: [...collection.items, ...newTabs] }, collection.timestamp); }; const cls = useStyles(); diff --git a/entrypoints/sidepanel/components/collections/CollectionMoreButton.tsx b/entrypoints/sidepanel/components/collections/CollectionMoreButton.tsx index f8156a0..92ab169 100644 --- a/entrypoints/sidepanel/components/collections/CollectionMoreButton.tsx +++ b/entrypoints/sidepanel/components/collections/CollectionMoreButton.tsx @@ -13,7 +13,7 @@ export default function CollectionMoreButton({ onAddSelected }: CollectionMoreBu const [listLocation] = useSettings("listLocation"); const isTab: boolean = listLocation === "tab" || listLocation === "pinned"; const { removeItem, updateCollection } = useCollections(); - const { tabCount, hasPinnedGroup, collection, collectionIndex } = useContext(CollectionContext); + const { tabCount, hasPinnedGroup, collection } = useContext(CollectionContext); const dialog = useDialog(); const [deletePrompt] = useSettings("deletePrompt"); @@ -33,10 +33,10 @@ export default function CollectionMoreButton({ onAddSelected }: CollectionMoreBu content: i18n.t("common.delete_prompt"), destructive: true, confirmText: i18n.t("common.actions.delete"), - onConfirm: () => removeItem(collectionIndex) + onConfirm: () => removeItem(collection.timestamp) }); else - removeItem(collectionIndex); + removeItem(collection.timestamp); }; const handleEdit = () => @@ -44,7 +44,7 @@ export default function CollectionMoreButton({ onAddSelected }: CollectionMoreBu updateCollection(item, collectionIndex) } /> + onSave={ item => updateCollection(item, collection.timestamp) } /> ); const handleCreateGroup = () => @@ -52,7 +52,7 @@ export default function CollectionMoreButton({ onAddSelected }: CollectionMoreBu updateCollection({ ...collection, items: [...collection.items, group] }, collectionIndex) } /> + onSave={ group => updateCollection({ ...collection, items: [...collection.items, group] }, collection.timestamp) } /> ); return ( diff --git a/entrypoints/sidepanel/components/collections/GroupMoreMenu.tsx b/entrypoints/sidepanel/components/collections/GroupMoreMenu.tsx index 3342161..7bf2904 100644 --- a/entrypoints/sidepanel/components/collections/GroupMoreMenu.tsx +++ b/entrypoints/sidepanel/components/collections/GroupMoreMenu.tsx @@ -18,7 +18,7 @@ export default function GroupMoreMenu(): ReactElement const [listLocation] = useSettings("listLocation"); const isTab: boolean = listLocation === "tab" || listLocation === "pinned"; const { group, indices } = useContext(GroupContext); - const { hasPinnedGroup } = useContext(CollectionContext); + const { hasPinnedGroup, collection } = useContext(CollectionContext); const [deletePrompt] = useSettings("deletePrompt"); const dialog = useDialog(); const { updateGroup, removeItem, ungroup } = useCollections(); @@ -33,16 +33,18 @@ export default function GroupMoreMenu(): ReactElement const handleDelete = () => { + const removeIndex: number[] = [collection.timestamp, ...indices.slice(1)]; + if (deletePrompt) dialog.pushPrompt({ title: i18n.t("groups.menu.delete"), content: i18n.t("common.delete_prompt"), confirmText: i18n.t("common.actions.delete"), destructive: true, - onConfirm: () => removeItem(...indices) + onConfirm: () => removeItem(...removeIndex) }); else - removeItem(...indices); + removeItem(...removeIndex); }; const handleEdit = () => @@ -51,7 +53,7 @@ export default function GroupMoreMenu(): ReactElement type="group" group={ group } hidePinned={ hasPinnedGroup } - onSave={ item => updateGroup(item, indices[0], indices[1]) } /> + onSave={ item => updateGroup(item, collection.timestamp, indices[1]) } /> ); const handleAddSelected = async () => @@ -59,7 +61,7 @@ export default function GroupMoreMenu(): ReactElement const newTabs: TabItem[] = isTab ? (await saveTabsToCollection(false)).items.flatMap(i => i.type === "tab" ? i : i.items) : await getSelectedTabs(); - updateGroup({ ...group, items: [...group.items, ...newTabs] }, indices[0], indices[1]); + updateGroup({ ...group, items: [...group.items, ...newTabs] }, collection.timestamp, indices[1]); }; return ( @@ -89,7 +91,7 @@ export default function GroupMoreMenu(): ReactElement } - onClick={ () => ungroup(indices[0], indices[1]) } + onClick={ () => ungroup(collection.timestamp, indices[1]) } > { i18n.t("groups.menu.ungroup") } diff --git a/entrypoints/sidepanel/components/collections/OpenCollectionButton.tsx b/entrypoints/sidepanel/components/collections/OpenCollectionButton.tsx index 69150d6..cffdf36 100644 --- a/entrypoints/sidepanel/components/collections/OpenCollectionButton.tsx +++ b/entrypoints/sidepanel/components/collections/OpenCollectionButton.tsx @@ -12,7 +12,7 @@ export default function OpenCollectionButton(): React.ReactElement const [defaultAction] = useSettings("defaultRestoreAction"); const { removeItem } = useCollections(); const dialog = useDialog(); - const { collection, collectionIndex } = useContext(CollectionContext); + const { collection } = useContext(CollectionContext); const OpenIcon = ic.bundleIcon(ic.Open20Filled, ic.Open20Regular); const RestoreIcon = ic.bundleIcon(ic.ArrowExportRtl20Filled, ic.ArrowExportRtl20Regular); @@ -50,7 +50,7 @@ export default function OpenCollectionButton(): React.ReactElement const handleRestore = async () => { await openCollection(collection); - removeItem(collectionIndex); + removeItem(collection.timestamp); }; return ( diff --git a/entrypoints/sidepanel/contexts/CollectionContext.tsx b/entrypoints/sidepanel/contexts/CollectionContext.tsx index a28fdd4..55f1dde 100644 --- a/entrypoints/sidepanel/contexts/CollectionContext.tsx +++ b/entrypoints/sidepanel/contexts/CollectionContext.tsx @@ -8,7 +8,6 @@ export default CollectionContext; export type CollectionContextType = { collection: CollectionItem; - collectionIndex: number; tabCount: number; hasPinnedGroup: boolean; }; diff --git a/entrypoints/sidepanel/contexts/CollectionsProvider.tsx b/entrypoints/sidepanel/contexts/CollectionsProvider.tsx index 5a94f66..c5249bb 100644 --- a/entrypoints/sidepanel/contexts/CollectionsProvider.tsx +++ b/entrypoints/sidepanel/contexts/CollectionsProvider.tsx @@ -50,12 +50,14 @@ export default function CollectionsProvider({ children }: React.PropsWithChildre const removeItem = (...indices: number[]): void => { + const collectionIndex: number = collections.findIndex(i => i.timestamp === indices[0]); + if (indices.length > 2) - (collections[indices[0]].items[indices[1]] as GroupItem).items.splice(indices[2], 1); + (collections[collectionIndex].items[indices[1]] as GroupItem).items.splice(indices[2], 1); else if (indices.length > 1) - collections[indices[0]].items.splice(indices[1], 1); + collections[collectionIndex].items.splice(indices[1], 1); else - collections.splice(indices[0], 1); + collections.splice(collectionIndex, 1); updateStorage(collections); }; @@ -65,20 +67,23 @@ export default function CollectionsProvider({ children }: React.PropsWithChildre updateStorage(collectionList); }; - const updateCollection = (collection: CollectionItem, index: number): void => + const updateCollection = (collection: CollectionItem, id: number): void => { + const index: number = collections.findIndex(i => i.timestamp === id); collections[index] = collection; updateStorage(collections); }; - const updateGroup = (group: GroupItem, collectionIndex: number, groupIndex: number): void => + const updateGroup = (group: GroupItem, collectionId: number, groupIndex: number): void => { + const collectionIndex: number = collections.findIndex(i => i.timestamp === collectionId); collections[collectionIndex].items[groupIndex] = group; updateStorage(collections); }; - const ungroup = (collectionIndex: number, groupIndex: number): void => + const ungroup = (collectionId: number, groupIndex: number): void => { + const collectionIndex: number = collections.findIndex(i => i.timestamp === collectionId); const group = collections[collectionIndex].items[groupIndex] as GroupItem; collections[collectionIndex].items.splice(groupIndex, 1, ...group.items); updateStorage(collections); @@ -108,9 +113,9 @@ export type CollectionsContextType = addCollection: (collection: CollectionItem) => void; updateCollections: (collections: CollectionItem[]) => void; - updateCollection: (collection: CollectionItem, index: number) => void; - updateGroup: (group: GroupItem, collectionIndex: number, groupIndex: number) => void; - ungroup: (collectionIndex: number, groupIndex: number) => void; + updateCollection: (collection: CollectionItem, id: number) => void; + updateGroup: (group: GroupItem, collectionId: number, groupIndex: number) => void; + ungroup: (collectionId: number, groupIndex: number) => void; removeItem: (...indices: number[]) => void; }; diff --git a/entrypoints/sidepanel/layouts/collections/CollectionListView.tsx b/entrypoints/sidepanel/layouts/collections/CollectionListView.tsx index 4b91f47..66dec73 100644 --- a/entrypoints/sidepanel/layouts/collections/CollectionListView.tsx +++ b/entrypoints/sidepanel/layouts/collections/CollectionListView.tsx @@ -121,27 +121,25 @@ export default function CollectionListView(): ReactElement - { active && - <> - { active.item.type === "collection" && - - } - { active.item.type === "group" && - + { active !== null ? + active.item.type === "collection" ? + + : + + { active.item.type === "group" ? - - } - { active.item.type === "tab" && - - } - + : + + } + + : + <> }