Morphy
Morphy
SSolidJS
Created by Morphy on 4/18/2024 in #support
`onClick` delegated event fires wrong handler
I have a fixed action button and it sometimes overlaps with another button that has a click handler and sometimes when they overlap, clicking the action button fires the other one's handler. In my experience this only happens on mobile, is it a bug with firefox or delegated events?
2 replies
SSolidJS
Created by Morphy on 4/17/2024 in #support
Reactive field inside objects of an array
import {
Accessor,
ParentComponent,
Setter,
createContext,
createEffect,
createSignal
} from 'solid-js'

class Cart {
get: Accessor<Array<CartItem>>
private set: Setter<Array<CartItem>>
constructor(items = []) {
;[this.get, this.set] = createSignal<Array<CartItem>>(items)
}

add(id: number) {
let item = this.get().find((item) => item.id === id)

if (item === undefined) {
this.set((prev) => [...prev, new CartItem(id)])
} else {
throw Error('item already exists')
}
}
remove(id: number) {
this.set((prev) =>
prev.toSpliced(
prev.findIndex((item) => item.id === id),
1
)
)
}
}

class CartItem {
id: number
count: number

constructor(id: number) {
this.id = id
this.count = 1
}

increment() {
this.count++
}
decrement() {
if (this.count > 1) {
this.count--
} else {
throw Error(`count is ${this.count}, can't decrement more`)
}
}
}

export const cartContext = createContext(new Cart())

export const Provider: ParentComponent = (props) => {
const cart = new Cart()
createEffect(() => {
console.log(cart.get()) // I want this to update when I update `CartItem`'s count
})
return <cartContext.Provider value={cart}>{props.children}</cartContext.Provider>
}
import {
Accessor,
ParentComponent,
Setter,
createContext,
createEffect,
createSignal
} from 'solid-js'

class Cart {
get: Accessor<Array<CartItem>>
private set: Setter<Array<CartItem>>
constructor(items = []) {
;[this.get, this.set] = createSignal<Array<CartItem>>(items)
}

add(id: number) {
let item = this.get().find((item) => item.id === id)

if (item === undefined) {
this.set((prev) => [...prev, new CartItem(id)])
} else {
throw Error('item already exists')
}
}
remove(id: number) {
this.set((prev) =>
prev.toSpliced(
prev.findIndex((item) => item.id === id),
1
)
)
}
}

class CartItem {
id: number
count: number

constructor(id: number) {
this.id = id
this.count = 1
}

increment() {
this.count++
}
decrement() {
if (this.count > 1) {
this.count--
} else {
throw Error(`count is ${this.count}, can't decrement more`)
}
}
}

export const cartContext = createContext(new Cart())

export const Provider: ParentComponent = (props) => {
const cart = new Cart()
createEffect(() => {
console.log(cart.get()) // I want this to update when I update `CartItem`'s count
})
return <cartContext.Provider value={cart}>{props.children}</cartContext.Provider>
}
How do I achieve this (line 62)? Basically I want a reactive field inside objects of an array which update the array itself when they change
14 replies