Xzayler Posts - Answer Overflow

Xzayler

Explore posts from servers

•Created by Xzayler on 6/25/2024 in #support

Redirect troubles

It's the classic use-case where I want a page to redirect if a user isn't logged in.

// lib/server.ts
export const getCurrentUser = cache(async (): Promise<User> => {
  const event = await getRequestEvent();
  if (!event || !event.locals.session || !event.locals.user) {
    console.log("should redirect");
    throw redirect("/login"); // also tried with return
  }
  return event.locals.user;
}, "curruser");

// lib/server.ts
export const getCurrentUser = cache(async (): Promise<User> => {
  const event = await getRequestEvent();
  if (!event || !event.locals.session || !event.locals.user) {
    console.log("should redirect");
    throw redirect("/login"); // also tried with return
  }
  return event.locals.user;
}, "curruser");

export default function Page() {
  const user = createAsync(async () => { // also tried with createResource()
    return await getCurrentUser();
  });

export default function Page() {
  const user = createAsync(async () => { // also tried with createResource()
    return await getCurrentUser();
  });

For some reason this doesn't work at all. The page will continue loading and error out because of trying to access properties of undefined. It used to work a long while ago when I created this, and I have no idea when it broke. As far as I can tell, this should work according to docs too. So why is there no redirection happening?

9 replies

SSolidJS

•Created by Xzayler on 4/15/2024 in #support

Dynamically rendering components

My objective in a nutshell is making a small user card appear on an element hover, like on twitter. The way I'm making it is the following: This is a barebones representation

// UserPopup.tsx
export default function UserPopup(props: { userHandle: string }) {
  const [user] = createResource(() => {
    return getUserSummary(props.userHandle);
  });
  // addFollow is a server function doing db stuff
  const follow = useAction(action(addFollow));

  return (
    <Show when={user()} fallback={<div>Loading...</div>}>
      <div>user()!.name</div>
      <button onClick={() => follow(user()!.id)}>
    </Show>
  )}

// UserPopup.tsx
export default function UserPopup(props: { userHandle: string }) {
  const [user] = createResource(() => {
    return getUserSummary(props.userHandle);
  });
  // addFollow is a server function doing db stuff
  const follow = useAction(action(addFollow));

  return (
    <Show when={user()} fallback={<div>Loading...</div>}>
      <div>user()!.name</div>
      <button onClick={() => follow(user()!.id)}>
    </Show>
  )}

And then I have a wrapper for this popup

// UserWrapper.tsx

export default function UserWrapper(props) {
  const [element, setElement] = createSignal<JSX.Element>(null);

  const activate = (handle: string) => {
    setElement(() => UserPopup({ userHandle: handle }));
  };

  const deactivate = () => {
    setElement(null);
  };
  
  return (
    // Additional stuff calling activate onMouseEnter and deactivate onMouseLeave
    <div>{element()}</div>
  )}

// UserWrapper.tsx

export default function UserWrapper(props) {
  const [element, setElement] = createSignal<JSX.Element>(null);

  const activate = (handle: string) => {
    setElement(() => UserPopup({ userHandle: handle }));
  };

  const deactivate = () => {
    setElement(null);
  };
  
  return (
    // Additional stuff calling activate onMouseEnter and deactivate onMouseLeave
    <div>{element()}</div>
  )}

With this method I get the error: 'use' router primitives can be only used inside a Route. which I guess is because I'm trying to create UserPopup just in the air without a parent, but I'm not sure how I should be creating UserPopup within a context, or do I just have to not use useAction and find something else? The other problem with this is I'm getting the warnings computations created outside a createRoot or render will never be disposed. So I tried using both render and mount and attach the UserPopup element I create directly to the element I want it to go in but nothing happened, this was my attempt:

// UserWrapper
let tooltipbox;

const activate = (handle: string) => {
  const dispose = render(
    () => <UserPopup userHandle={props.handle}>,
      tooltipbox! as HTMLDivElement
  );
};
...
...
return <div ref={tooltipbox}></div>

// UserWrapper
let tooltipbox;

const activate = (handle: string) => {
  const dispose = render(
    () => <UserPopup userHandle={props.handle}>,
      tooltipbox! as HTMLDivElement
  );
};
...
...
return <div ref={tooltipbox}></div>

So what is the right way to do this?

22 replies

SSolidJS

•Created by Xzayler on 3/28/2024 in #support

Navigating with A from and to dynamic route doesn't re-render.

I have a dynamic route routes/post/[postid].tsx. Within this route I have (simplified)

const [post, {mutate, refetch}] = createResource(() => {
    return getPost(params.postid);
  });
// I also tried running refetch() here
return 
  <A href={`/post/${item.id}`}>
    // more jsx...
  </A>

const [post, {mutate, refetch}] = createResource(() => {
    return getPost(params.postid);
  });
// I also tried running refetch() here
return 
  <A href={`/post/${item.id}`}>
    // more jsx...
  </A>

In dev, when I click on this a tag, the url updates in my browser but the dom doesn't, unless I force a reload. I'm guessing post doesn't refetch or something. Do I need to force a refetch somehow or am I navigating wrong?

46 replies

Gaming

Programming