KokoNeot
KokoNeot
PostsComments
SSolidJS
Created by KokoNeot on 6/17/2024 in #support
routing based on subdomain
Hi, I want to show a specific component when there is any subdomain *.example.com and in that component I need to get the subdomain name and when there is no subdomain render different component is that possible?
3 replies
SSolidJS
Created by KokoNeot on 4/6/2024 in #support
order of reactivity
Hi, i have this component 
export default function Orders() {

    const [displayMode, setDisplayMode] = createSignal("customer")
    const [orders] = createResource(displayMode, getOrders)


    const switchDisplayMode = () => {
        setDisplayMode(displayMode() == "customer" ? "product" : "customer")
        console.log(displayMode(), orders.loading)
    }


    return <div class="container mx-auto">
        <div class="h-30 py-4 [&>*]:mx-2">
            <Button variant="contained" color="success" href="/orders/new">New order</Button>
            <Button variant="contained" color="primary" onClick={switchDisplayMode}>{displayMode() == "customer" ? "Display by products" : "Display by customers"}</Button>
        </div>

        <Show when={displayMode() == "customer" && !orders.loading}>
            <ByCustomerTable orders={orders()} />
        </Show>

        <Show when={displayMode() == "product" && !orders.loading}>
            <ByProductTable orders={orders()} />
        </Show>

    </div>
}
export default function Orders() {

    const [displayMode, setDisplayMode] = createSignal("customer")
    const [orders] = createResource(displayMode, getOrders)


    const switchDisplayMode = () => {
        setDisplayMode(displayMode() == "customer" ? "product" : "customer")
        console.log(displayMode(), orders.loading)
    }


    return <div class="container mx-auto">
        <div class="h-30 py-4 [&>*]:mx-2">
            <Button variant="contained" color="success" href="/orders/new">New order</Button>
            <Button variant="contained" color="primary" onClick={switchDisplayMode}>{displayMode() == "customer" ? "Display by products" : "Display by customers"}</Button>
        </div>

        <Show when={displayMode() == "customer" && !orders.loading}>
            <ByCustomerTable orders={orders()} />
        </Show>

        <Show when={displayMode() == "product" && !orders.loading}>
            <ByProductTable orders={orders()} />
        </Show>

    </div>
}
when i click the button i want to change display mode, based on display mode i want to fetch new data and then display it in the show tag the issue is, when the displaymode changes first it triggers the shows and that errors out because each show is anticipating different data structure which is not fetched yet
7 replies
SSolidJS
Created by KokoNeot on 2/15/2024 in #support
remove element from store array createStore([])
hi, i need to move element in store to the front of the array or delete it and add it to the front. i used signals, now switching to store. 
            const rect = board.getBoundingClientRect()
            const card = cards[cardIdx]
            const newCards = cards
            newCards.splice(cardIdx, 1)
            setCards([{...card, position: { x: e.clientX - offsetX - rect.left, y: e.clientY - offsetY - rect.top}}, ...newCards])
//this is how the card object looks like, the store is array of those objects

const card = {
            title: "Card 4",
            body: "This is the body of the second card",
            color: "green",
            position: { x: 10, y: 50 },
            velocity: { x: 0, y: 0 },
            pins: [],
            div: undefined,
            id: 3
        }
            const rect = board.getBoundingClientRect()
            const card = cards[cardIdx]
            const newCards = cards
            newCards.splice(cardIdx, 1)
            setCards([{...card, position: { x: e.clientX - offsetX - rect.left, y: e.clientY - offsetY - rect.top}}, ...newCards])
//this is how the card object looks like, the store is array of those objects

const card = {
            title: "Card 4",
            body: "This is the body of the second card",
            color: "green",
            position: { x: 10, y: 50 },
            velocity: { x: 0, y: 0 },
            pins: [],
            div: undefined,
            id: 3
        }
5 replies
SSolidJS
Created by KokoNeot on 1/4/2023 in #support
Lazy loading routes instead of components
Hi, I'd like to have a separate file for each main route, but I'm not sure how to do that using lazy 
<Routes>
            <Route path='/*' component={MainLayout}>
                <Route path='/' component={Home} />
                <Route path="/privacy" component={Privacy} />
                <Route path="/tos" component={ToS} />
                <Route path="/shards" component={Shards} />
                <Route path="/commands" component={Commands} />

                <Route path="/profile" data={UserRouteData}>
                    //...
                </Route>

                <Route path="/admin" component={AdminLayout}>
                    //...
                </Route>

                <Route path="/admin/updates/new" component={CreateUpdate}/>

                <Route path="/blogs">
                    //...
                </Route>

                <Route path="/dashboard" component={ServerPanel}/>
                <Route path="/dashboard/:guildID" component={DashboardLayout} >
                    //...
                </Route>
            </Route>
        </Routes>
<Routes>
            <Route path='/*' component={MainLayout}>
                <Route path='/' component={Home} />
                <Route path="/privacy" component={Privacy} />
                <Route path="/tos" component={ToS} />
                <Route path="/shards" component={Shards} />
                <Route path="/commands" component={Commands} />

                <Route path="/profile" data={UserRouteData}>
                    //...
                </Route>

                <Route path="/admin" component={AdminLayout}>
                    //...
                </Route>

                <Route path="/admin/updates/new" component={CreateUpdate}/>

                <Route path="/blogs">
                    //...
                </Route>

                <Route path="/dashboard" component={ServerPanel}/>
                <Route path="/dashboard/:guildID" component={DashboardLayout} >
                    //...
                </Route>
            </Route>
        </Routes>
those are my routes. What I'd imagine is a file for homepage. privacy, tos, shards, commands, then profile but that should include also its subroutes, same with admin and blogs and dashboard. How can I lazy load several components at once?
3 replies
SSolidJS
Created by KokoNeot on 1/4/2023 in #support
Fetching resources only when logged in
2 replies
SSolidJS
Created by KokoNeot on 1/3/2023 in #support
Smooth scroll
Hi, in react-router there is a smooth scroll href/link component. I cant find the alternative for solid. Does anybody know about smooth scroll for solid? Like when navigating on the same page to an element with id it shouldsmooth scroll to it. Thanks for any idea
5 replies
SSolidJS
Created by KokoNeot on 1/2/2023 in #support
How to pass classes to custom component
Hi, lets say I have this example component 
function Content(props) {
    return <div class={`timeline-content ${props.classes}`}>
        {props.children}
    </div>
}
function Content(props) {
    return <div class={`timeline-content ${props.classes}`}>
        {props.children}
    </div>
}
I want to create use the component like so 
<Content class="some-class" />
//instead of 
<Content classes="some-class" />
<Content class="some-class" />
//instead of 
<Content classes="some-class" />
is that possible?
5 replies
SSolidJS
Created by KokoNeot on 12/29/2022 in #support
useSearchParams not working
9 replies
SSolidJS
Created by KokoNeot on 12/29/2022 in #support
classList not working on icons svg
import { IoCloseOutline } from 'solid-icons/io'

<li class="text-dark flex items-center border-2 rounded-full w-auto">
            <IoCloseOutline classList={{hidden: props.data.empty}} class={`remove-item text-white bg-dark ml-2 rounded-full`} alt="removeItem" onClick={() => props.remove(props.data)} />
            <span class="mx-2">{props.data.name}</span>
        </li>
import { IoCloseOutline } from 'solid-icons/io'

<li class="text-dark flex items-center border-2 rounded-full w-auto">
            <IoCloseOutline classList={{hidden: props.data.empty}} class={`remove-item text-white bg-dark ml-2 rounded-full`} alt="removeItem" onClick={() => props.remove(props.data)} />
            <span class="mx-2">{props.data.name}</span>
        </li>
I had to use ${props.data.empty ? 'hidden' : ''} any reason why?
12 replies
SSolidJS
Created by KokoNeot on 12/29/2022 in #support
useParams not working
19 replies
SSolidJS
Created by KokoNeot on 12/24/2022 in #support
What is the difference between solidJS and solid start? and which one should I use?
Hey, I'm rewriting my project (discord bot) and now I got to the part where I rewrite my dashboard written in ReactJS. I've heard only good things about solidJS and its still quite similar to the react code so I decided to give it a go. But I'm confused about the difference between solid JS and solid start, can somebody explain that to me? And secondly, which would you recommend to me, the website is basically a dashboard, it will communicate with my discord bot (rest api, possibly grpc) thank you and merry christmas!
7 replies