When I set empty list, and before, try again push element with express operator, page refresh. I have two functions, one function add tabs, and validator that no exists and others thinks, and second function, deleted tab of list tabs, and change some propertys.
This working good, but, when I delete last item, and lists is empty, en try again add new element, page refresh. Please some body help me...
Next code.
handlerTabs : (state, action) => {
const { id } = action.payload
if (!state.some(tab => tab.id === id)) {
let newArray = state.map(e=>{
return {
...e,
active : false,
}
})
action.payload.isOpen = true
action.payload.active = true
return state = [...newArray, action.payload]
} else {
//Si existe el tab...
return state.map((e) => {
if(e.id === id){
return {
...e,
active : true
}
}
else {
return {
...e,
active : false
}
}
})
}
}
And second function to delete tab:
closeTab : (state, action) => {
const { id } = action.payload
let index = state.findIndex((e) => e.id === id)
if(state.length === 1){
return []
}
index = index - 1
let newArray = state.filter((e)=> e.id !== id)
let lastId = newArray.at(index).id
//console.log(newArray[-1])
return state = newArray.map(e => {
if(e.id === lastId){
return {
...e,
active : true
}
} else{
return {
...e,
active : false
}
}
})
}
In my component Sidebar:
return <NavLink
onClick={() => {
dispatch(handlerTabs(el))
}}
key={el.value}
className={({ isActive }) => (isActive ? 'navLink active' : 'navLink')}
to={el.link}>
{el.icon}
<span>{el.name}</span>
</NavLink>
IN my component tabs:
return <Button
onClick={(e)=> handleClickButton(e, el)}
size="small"
key={el.id}
sx={el.active ? buttonStyleActive : buttonStyle}
variant={el.active ? 'contained' : 'outlined'}
endIcon={<CancelRoundedIcon
onClick={(e)=> handleClickClose(e, el)}
sx={iconCancelStyle} />}
>
{el.name}
</Button>