I write the toggleSelectedItems function but it did not work correctly and I could not solve the problem.
when I click on add button, I want to send the items that are in candidateItems to selectedGroups and if I click on add all, the all items in groups are added to selectedGroups.if I click on remove, the items that are in candidateItems are removed from selectedGroups . I want when I send the items to the toggleSelectedItems function, if they exist, they will be removed from the selectedGroups state, and if they don’t exist, they will be added. the items should be add to the related group. the groupId of items are equal to id of each group in selectedGroups.how can I fix the toggleSelectedItems function?
for example
const groups =[
{
"title": "Clusters",
"id": "clusters",
"items": [
{
"id": 1,
"label": "cluster1",
"groupId": "selected-clusters"
},
{
"id": 2,
"label": "cluster2",
"groupId": "selected-clusters"
}
]
},
{
"title": "Rigs",
"id": "rigs",
"items": [
{
"id": 1,
"label": "rig1",
"groupId": "selected-rigs"
},
{
"id": 2,
"label": "rig2",
"groupId": "selected-rigs"
},
{
"id": 3,
"label": "rig3",
"groupId": "selected-rigs"
},
]
}
]
const selectedGroups=[
{
"title": "Selected Clusters",
"id": "selected-clusters",
"items": []
},
{
"title": "Selected Rigs",
"id": "selected-rigs",
"items": []
}
]
const candidateItems=[
{
"id": 1,
"label": "cluster1",
"groupId": "selected-clusters"
},
{
"id": 2,
"label": "cluster2",
"groupId": "selected-clusters"
}
]
my code :
type GroupType = {
title: string
id: string
items: GroupItemType[]
}
type GroupItemType = {
id: string | number
label: string
groupId: string | number
}
const [groups, setGroups] = useState<GroupType[]>([])
const [selectedGroups, setSelectedGroups] = useState < GroupType[] > ([])
const [candidateItems, setCandidateItems] = useState < GroupItemType[] > ([])
const toggleSelectedItems = useCallback(
(toggleItems: GroupItemType[]) => {
setSelectedGroups((prevGroups) =>
prevGroups.map((group) => {
const groupToggleItems = toggleItems.filter(
(toggleItem) => toggleItem.groupId === group.id
)
if (groupToggleItems.length === 0) return group
const itemExists = groupToggleItems.some((toggleItem) =>
group.items.some((item) => item.id === toggleItem.id)
)
const updatedItems = itemExists
? group.items.filter(
(item) =>
!groupToggleItems.some(
(toggleItem) => toggleItem.id === item.id
)
)
: [...group.items, ...groupToggleItems]
return { ...group, items: updatedItems }
})
)
},
[selectedGroups]
)
const add = useCallback(() => {
toggleSelectedItems(candidateItems)
setCandidateItems([])
}, [candidateItems])
const addAll = useCallback(() => {
const allItems = groups.flatMap((item) => item.items)
toggleSelectedItems(allItems)
}, [groups])
const remove = useCallback(() => {
toggleSelectedItems(candidateItems)
setCandidateItems([])
}, [candidateItems])
const removeAll = useCallback(() => {
const allItems = selectedGroups.flatMap((item) => item.items)
toggleSelectedItems(allItems)
}, [selectedGroups])
