Bravi Posts - Answer Overflow

Bravi

•Created by Bravi on 12/8/2024 in #support

How to handle reactivity in this example?

Hello. I have a Project type I have a context provider that provides the store of Project. So in my components I grab it like so - const { project, setProject } = useProject(). I have a separate components that is supposed to render project.nodes and it uses SortableJS. This component grabs project store from context and then renders items inside a custom Sortable component. It all works fine, until I try to update the state on reorder. This is how I update my store:

  const handleOrderUpdate = (ids: string[]) => {
    const updated = ids.map((id) => {
      return project.nodes.find((node) => String(node.id) === id)!;
    });

    setProject('nodes', reconcile(updated, { key: 'id' }));
  };

  const handleOrderUpdate = (ids: string[]) => {
    const updated = ids.map((id) => {
      return project.nodes.find((node) => String(node.id) === id)!;
    });

    setProject('nodes', reconcile(updated, { key: 'id' }));
  };

When I do this, there is a visual glitch where the new order is being set, but it is reverted straight away. On the subsequent reorder, the correct order is set. But the 3rd one is also a glitch and etc. To solve this, I have to do the following:

const { project, setProject } = useProject();
const [nodes] = createSignal(nodes);

const { project, setProject } = useProject();
const [nodes] = createSignal(nodes);

Am I doing something wrong or this is the way to go?

3 replies

SSolidJS

•Created by Bravi on 12/4/2024 in #support

How to prevent re-creation of a component inside <For>?

Hi everyone. To illustrate my issue, I created a very minimal version of the application that I have. To see the problem I am facing, just click on any of the links in the rendered page and then click on the button that appears. You will notice that the button will disappear (because the component gets re-created and the state is reset). What would be the best approach to prevent this from happening? https://codesandbox.io/p/devbox/r5k78c

7 replies

SSolidJS

•Created by Bravi on 3/30/2023 in #support

How to use <Show> in ssr?

Hi everyone. I have this simple code:

export default function Home() {
  const [error, setShowError] = createSignal(false);
  const [_, { Form }] = createRouteAction(async (formData: FormData) => {
    const username = formData.get('username');

    if (username !== 'admin') {
      setShowError(true);
    }
  });

  return (
    <div>
      <Form>
        <label>Username</label>
        <input type="text" name="username" />
      </Form>

      <Show when={error()} keyed>
        oops, you failed
      </Show>
    </div>
  );
}

export default function Home() {
  const [error, setShowError] = createSignal(false);
  const [_, { Form }] = createRouteAction(async (formData: FormData) => {
    const username = formData.get('username');

    if (username !== 'admin') {
      setShowError(true);
    }
  });

  return (
    <div>
      <Form>
        <label>Username</label>
        <input type="text" name="username" />
      </Form>

      <Show when={error()} keyed>
        oops, you failed
      </Show>
    </div>
  );
}

Is it possible to somehow hide Show part from the downloaded js files? What I mean is, if I land on this page and have a look at the network tab, I can see that string inside one of the JS files.

27 replies

SSolidJS

•Created by Bravi on 3/1/2023 in #support

ProtectedRoute with a redirect using @solidjs/router

Hi everyone. Is there a way to implement a ProtectedRoute, but with a redirect using @solidjs/router? All the examples I have seen, do something like user ? <Component /> : <Login />, but the url remains the same..

4 replies

Gaming

Programming