Andre Posts - Answer Overflow

Andre

Explore posts from servers

•Created by Andre on 9/1/2024 in #support

How to handle repeatedly updating a value in a large Store

Here is an example: https://playground.solidjs.com/anonymous/75bea6b0-4eb0-41d0-8f62-6117c969801d I feel like this is not the best approach for this case since searching the array for the ID each time the user types something would be inefficient if the store was large enough. Is there something recomended for this? Maybe some way to pass store setters directly to a component? I know there's a behavior where you can create a store directly from an item of another store, and updates to that item reflect back on the original store (https://playground.solidjs.com/anonymous/1a8fba4f-76c8-4bd6-b8e9-ffaae1922e62). Is this encouraged?

1 replies

SSolidJS

•Created by Andre on 2/20/2024 in #support

Passing "up" signals in Solid

I am trying to understand how can you go by reading values from signals defined in children components in SolidJS. I exemplified my situation in the code bellow (with a solution that I came up with but don’t know if is ideal): I have one component that handles the content being edited (RecordEditor). The submission of the content written by the user is supposed to happens up in the hierarchy, in the AddRecordModal component. That means I need to “access the signals on the children component”.

function AddRecordModal(props: Props) {
    const [title, setTitle] = createSignal<string>("");
    const [amount, setAmount] = createSignal<number>();

    createEffect(() => {
        console.log(title(), amount());
    });

    return (
        <div>
            <RecordEditor class={styles.content} title={[title, setTitle]} amount={[amount, setAmount]} />
            <button onClick={() => console.log(title(), amount())}>Submit record</button>
        </div>
    );
}

function RecordEditor(props: {
    class?: string;
    title: [Accessor<string>, Setter<string>];
    amount: [Accessor<string | number | undefined>, Setter<number | undefined>];
}) {
    const [title, setTitle] = props.title || createSignal<string>();
    const [amount, setAmount] = props.amount || createSignal<number>();

    return (
        <div class={clsx(styles.container, props.class)}>
            <input type="text" placeholder="Title" value={title()} onInput={(e) => setTitle(e.currentTarget.value)} />
            <input
                type="number"
                placeholder="Amount"
                value={amount()}
                onInput={(e) => setAmount(parseFloat(e.currentTarget.value))}
            />
        </div>
    );
}

function AddRecordModal(props: Props) {
    const [title, setTitle] = createSignal<string>("");
    const [amount, setAmount] = createSignal<number>();

    createEffect(() => {
        console.log(title(), amount());
    });

    return (
        <div>
            <RecordEditor class={styles.content} title={[title, setTitle]} amount={[amount, setAmount]} />
            <button onClick={() => console.log(title(), amount())}>Submit record</button>
        </div>
    );
}

function RecordEditor(props: {
    class?: string;
    title: [Accessor<string>, Setter<string>];
    amount: [Accessor<string | number | undefined>, Setter<number | undefined>];
}) {
    const [title, setTitle] = props.title || createSignal<string>();
    const [amount, setAmount] = props.amount || createSignal<number>();

    return (
        <div class={clsx(styles.container, props.class)}>
            <input type="text" placeholder="Title" value={title()} onInput={(e) => setTitle(e.currentTarget.value)} />
            <input
                type="number"
                placeholder="Amount"
                value={amount()}
                onInput={(e) => setAmount(parseFloat(e.currentTarget.value))}
            />
        </div>
    );
}

8 replies

SSolidJS

•Created by Andre on 1/27/2024 in #support

Understanding the deployment of a SolidJS app (with a separate backend)

I hope this doesn’t go too off topic because this is more of a general question but I am trying to understand what are my options for deploying an application made with SolidJS for the frontend and, for example, Golang for the backend. Let’s say I want to deploy my web app to Heroku. From what I understand I have three options: 1. Building the SolidJS app and creating a NodeJS server (e.g. with Express) that serves the static files. With that, I would need to host my backend as one server and my frontend another. The frontend would call the backend from a different domain and to make that work I would need to set up the CORS policy. Maybe for that option it would be better to deploy the frontend to Netlify. 2. Building the SolidJS app and serving it using the Golang backend itself. So both the frontend and backend would live in the same server and domain (e.g. ‘www.myapp.com’ for the frontend and ’www.myapp.com/api' for the backend API routes). 3. Dockerizing the app and deploying it as a “Container Registry” in Heroku. But I suppose this option would require me to do the same of either option one or two (most likely option one where I would have my frontend as one service/container and my backend as another). I suppose the second option would be the best for me considering my backend API is only used by my frontend and I want to prioritize low costs but I wanted to know what is your experience and what do you guys think would be optimal! Also, let me know if you have suggestions for hosting plataforms other than Heroku where I could use a free tier (I am using student credit on Heroku for now).

4 replies

SSolidJS

•Created by Andre on 12/15/2023 in #support

Is there a better way of doing this sub and unsub? I fell like I am just translating React code xD

function AuthProvider({ children }: { children: JSXElement }) {
    const [user, setUser] = createSignal<User | null>(null);
    const [loading, setLoading] = createSignal(true);

    let unsubscribe: () => void;
    onMount(() => {
        unsubscribe = auth.onAuthStateChanged((user) => {
            console.log("User changed");
            if (user) {
                console.log("User is signed in, setting user");
                setUser(user);
            } else setUser(null);
            console.log("Finished loading user");
            setLoading(false);
        });
    });
    onCleanup(() => {
        unsubscribe();
    });

    // Handler object (login, logout, etc)

    return <AuthContext.Provider value={{ user, loading }}>{children}</AuthContext.Provider>;
}

function AuthProvider({ children }: { children: JSXElement }) {
    const [user, setUser] = createSignal<User | null>(null);
    const [loading, setLoading] = createSignal(true);

    let unsubscribe: () => void;
    onMount(() => {
        unsubscribe = auth.onAuthStateChanged((user) => {
            console.log("User changed");
            if (user) {
                console.log("User is signed in, setting user");
                setUser(user);
            } else setUser(null);
            console.log("Finished loading user");
            setLoading(false);
        });
    });
    onCleanup(() => {
        unsubscribe();
    });

    // Handler object (login, logout, etc)

    return <AuthContext.Provider value={{ user, loading }}>{children}</AuthContext.Provider>;
}

Hey! I was wondering id there would be a better way of handling this subscription on mount and unsubscription on unmount that I am not aware off. Overall for this piece of code I feel like I could be using more the Solid tools, maybe using a store instead of signals for the user and loading, but I will take a better looks at the docs/tutorial to see how I could change that part

40 replies

Gaming

Programming