Liquido Posts - Answer Overflow

Liquido

•Created by Liquido on 6/27/2024 in #support

How to use useSubmission with server action passed to form?

I have a server action that returns data:

const createItemAction = action(async function (formData) {
  "use server";
  try {
    validateInput(formData)
    return { status: 'ok' };
  } catch {
    return { status: 'error' }
  }
});

function CreateItem() {
  const status = useSubmission(createItemAction);

  console.log('status', status.result, status.pending, status.error);
  return (
    <form method="post" action={createItemAction}>
      <input type="text" name="name" />
      <button type="submit">Create</button>
    </form>
  )
}

const createItemAction = action(async function (formData) {
  "use server";
  try {
    validateInput(formData)
    return { status: 'ok' };
  } catch {
    return { status: 'error' }
  }
});

function CreateItem() {
  const status = useSubmission(createItemAction);

  console.log('status', status.result, status.pending, status.error);
  return (
    <form method="post" action={createItemAction}>
      <input type="text" name="name" />
      <button type="submit">Create</button>
    </form>
  )
}

When I submit the form, I get no status data back. How am I supposed to use the useSubmission hook with server action and Form?

3 replies

SSolidJS

•Created by Liquido on 6/22/2024 in #support

With Solid Auth template, I get "UnknownAction: cannot parse action at /api/auth/session"

I am using the Solid Start with Auth template and created a server action form form submission

import { getSession } from "@solid-mediakit/auth";
import { action } from "@solidjs/router";
import { getRequestEvent } from "solid-js/web";

const submitCreateAction = action(async function createAction(
  formData: FormData
) {
  "use server";

  const event = getRequestEvent();
  if (!event) throw new Error("No request event");

  const session = await getSession(event.request, authOptions); // <-- This line causes the error
  if (!session?.user?.id) throw new Error("Not logged in");

  const userId = session.user.id;
  const name = formData.get("name");

  if (!name) throw new Error("Input is empty");

  console.log("Name", name);
  console.log("User ID", userId);
});


function CreatePage() {
  return (
    <form method="post" action={submitCreateAction}>
      <label for="name">Name</label>
      <input
        type="text"
        name="name"
        id="name"
        placeholder="Enter name"
      />
      <button type="submit">Create</button>
    </form>
  );
}

export default requireAuth(CreatePage);

import { getSession } from "@solid-mediakit/auth";
import { action } from "@solidjs/router";
import { getRequestEvent } from "solid-js/web";

const submitCreateAction = action(async function createAction(
  formData: FormData
) {
  "use server";

  const event = getRequestEvent();
  if (!event) throw new Error("No request event");

  const session = await getSession(event.request, authOptions); // <-- This line causes the error
  if (!session?.user?.id) throw new Error("Not logged in");

  const userId = session.user.id;
  const name = formData.get("name");

  if (!name) throw new Error("Input is empty");

  console.log("Name", name);
  console.log("User ID", userId);
});


function CreatePage() {
  return (
    <form method="post" action={submitCreateAction}>
      <label for="name">Name</label>
      <input
        type="text"
        name="name"
        id="name"
        placeholder="Enter name"
      />
      <button type="submit">Create</button>
    </form>
  );
}

export default requireAuth(CreatePage);

This is the error keep getting on the server side:

[auth][error] UnknownAction: Cannot parse action at /api/auth/session. Read more at https://errors.authjs.dev#unknownaction

My goal is to get the userId from the session object. What am I doing wrong here?

10 replies

SSolidJS

•Created by Liquido on 12/11/2023 in #support

How can I set a style based on reactive state with fallback to props?

I want to change color of a button when active and return back to default value when not active:

const Internal = (props) => {
  const [clicked, setClicked] = createSignal(false);

  const style = mergeProps(props.style, { color: clicked() ? 'orange' : 'red' });

  return <button onClick={() => setClicked(c => !c)} style={style}>
    {props.children}
  </button>
}

function Counter() {
  return (
    <Internal style={{ color: 'blue', fontWeight: 'bold' }}>Click me</Internal>
  );
}

const Internal = (props) => {
  const [clicked, setClicked] = createSignal(false);

  const style = mergeProps(props.style, { color: clicked() ? 'orange' : 'red' });

  return <button onClick={() => setClicked(c => !c)} style={style}>
    {props.children}
  </button>
}

function Counter() {
  return (
    <Internal style={{ color: 'blue', fontWeight: 'bold' }}>Click me</Internal>
  );
}

https://playground.solidjs.com/anonymous/c98af79a-5755-4edd-a7a4-f91d60c3ae02 How can I make the style value inside the Internal component reactive?

6 replies

SSolidJS

•Created by Liquido on 12/1/2023 in #support

How to make SolidJS tags not return HTML elements for a custom renderer?

12 replies

SSolidJS

•Created by Liquido on 11/25/2023 in #support

How can I use SolidJS ref with typescript?

I want to create a ref to a canvas element:

export const Canvas = () => {
  let ref: HTMLCanvasElement;

  return <canvas ref={ref} width={500} height={500}></canvas>;
};

export const Canvas = () => {
  let ref: HTMLCanvasElement;

  return <canvas ref={ref} width={500} height={500}></canvas>;
};

But I keep getting TS error that "Variable ref is being used without being assigned." What's the correct way to use refs with Typescript?

2 replies

Gaming

Programming