TripleSmile Posts - Answer Overflow

TripleSmile

•Created by TripleSmile on 7/23/2024 in #support

How to use a resource in a structure field as a reactive signal?

I am having serious skill issues and starting to lose my mind a bit. Maybe someone has ideas how to make price reactive? For now as far as I understand price field is created with NaN values because in the beginning of a page load I suppose the fetch is not yet executed because everything is async.

    const [productTitlePrice] = createResource("productTitle", fetchItemPrice);
    const [testRubberPrice] = createResource("testRubber", fetchItemPrice);

    const [productDataList, setProductDataList] = createSignal([
        {
            title: "productTitle",
            price: productTitlePrice(), //is not reactive
            photos: ["ash_001.JPG", "ash_002.JPG", "Placeholder.png"],
        },
        {
            title: "testRubber",
            price: testRubberPrice(), //is not reactive
            photos: ["example_003.JPG", "example_004.JPG", "Placeholder2.png"],
        },
    ]);

    const [productTitlePrice] = createResource("productTitle", fetchItemPrice);
    const [testRubberPrice] = createResource("testRubber", fetchItemPrice);

    const [productDataList, setProductDataList] = createSignal([
        {
            title: "productTitle",
            price: productTitlePrice(), //is not reactive
            photos: ["ash_001.JPG", "ash_002.JPG", "Placeholder.png"],
        },
        {
            title: "testRubber",
            price: testRubberPrice(), //is not reactive
            photos: ["example_003.JPG", "example_004.JPG", "Placeholder2.png"],
        },
    ]);

10 replies

SSolidJS

•Created by TripleSmile on 2/3/2024 in #support

How to use ref both inside and outside(parent) component?

I have parent component with this code:

return (
        <div>
            <div class="grid grid-cols-2 border gap-2 mx-auto min-w-[420px] max-w-[840px] px-4">
                {totalPrice()}
                <button onClick={() => myDialog?.showModal()}>Terms!</button>
            </div>

            <Dialog
                text="This is terms of service text text text, do you agree? 12354123135
            5645343 231E"
                ref={myDialog}
            />
        </div>
    );

return (
        <div>
            <div class="grid grid-cols-2 border gap-2 mx-auto min-w-[420px] max-w-[840px] px-4">
                {totalPrice()}
                <button onClick={() => myDialog?.showModal()}>Terms!</button>
            </div>

            <Dialog
                text="This is terms of service text text text, do you agree? 12354123135
            5645343 231E"
                ref={myDialog}
            />
        </div>
    );

And this is Dialog component:

  function Dialog(props) {
    return (
        <dialog
            onClick={() => {
                props.ref?.close();
            }}
            ref={props.ref}
            class="fixed inset-0 items-center justify-cente p-4"
        >
            <div
                onClick={(e) => e.stopPropagation()}
                class="border min-w-[420px] max-w-xl mx-auto bg-white p-1"
            >
                {props.text}
                <button
                    onClick={() => {
                        props.ref?.close();
                    }}
                >
                    Press me
                </button>
            </div>
        </dialog>
    );
}
export default Dialog;

  function Dialog(props) {
    return (
        <dialog
            onClick={() => {
                props.ref?.close();
            }}
            ref={props.ref}
            class="fixed inset-0 items-center justify-cente p-4"
        >
            <div
                onClick={(e) => e.stopPropagation()}
                class="border min-w-[420px] max-w-xl mx-auto bg-white p-1"
            >
                {props.text}
                <button
                    onClick={() => {
                        props.ref?.close();
                    }}
                >
                    Press me
                </button>
            </div>
        </dialog>
    );
}
export default Dialog;

So, I can open dialog from parent component because ref of dialog works as it should in the parent scope, but I can't use close() of ref of dialog element inside my Dialog component. What am I doing wrong? If I don't split this in two components then it works. But I would prefer to have this Dialog component separate and just be able to open it from a parent component.

14 replies

SSolidJS

•Created by TripleSmile on 9/19/2023 in #support

What are the differences? Produce vs regular setStore

2 replies

SSolidJS

•Created by TripleSmile on 9/3/2023 in #support

Good practices in SolidJS

Are there any tutorials which go in depth of what are good and bad practices when building apps with SolidJS? As someone who has no prior experience with reactive libraries I sometimes have hard time understanding if what I'm doing is good or bad practice and maybe sometimes I might be reinventing the wheel or not using SolidJS as intended. So, if there are any tutorials you could recommend on how to properly use SolidJS please let me know. Or just share general recommendations, really want to learn how to use this tool properly. Thanks!

7 replies

SSolidJS

•Created by TripleSmile on 8/28/2023 in #support

Proper implementation of a timer/stopwatch

I am struggling to understand how to properly implement a timer in a reactive library/framework like SolidJS. What I want is 3 buttons: - start - reset - stop I need to represent time in minutes| seconds | 100ms(1/10 of a second) So, what would be a good way to implement a timer like this? Thank you!

10 replies

Gaming

Programming