fascinating-indigo

Is there a way to get proper search params in navigate without a specific route

In my circumstance my /dashboard route has a modal engine that's basically just a discriminated union of different modal types. Using that I am rendering different types of modals

// def
export const modalSchema = z.discriminatedUnion("modalType", [
  deleteEntityModalSchema,
  publishVersionModalSchema,
  uploadImageModalSchema,
  deletePhotoModalSchema,
  buildEntityFromPhotoSchema,
  createFontFamilyModalSchema,
  createFontModalSchema,
  deleteTagModalSchema,
]);

// in dashboard.tsx
  validateSearch: validateWithZod(
    z
      .object({
        modal: modalSchema.optional(),
      })
      .optional()
  )

// def
export const modalSchema = z.discriminatedUnion("modalType", [
  deleteEntityModalSchema,
  publishVersionModalSchema,
  uploadImageModalSchema,
  deletePhotoModalSchema,
  buildEntityFromPhotoSchema,
  createFontFamilyModalSchema,
  createFontModalSchema,
  deleteTagModalSchema,
]);

// in dashboard.tsx
  validateSearch: validateWithZod(
    z
      .object({
        modal: modalSchema.optional(),
      })
      .optional()
  )

I need to be able to pop open these modals from a slew of different routes, and I want my code not to care about the specific route, but still be aware of the typesignature coming from "/dashboard", the problem is that when I specify the from as dashboard, it affects the route navigation in such a way where I'm not only just either clearing or adding the modal data, I'm also navigating to the /dashboard/ route. Is there a way to make this work?

6 Replies

fascinating-indigoOP•11mo ago

~~Oh wait I think I got it~~ NVM, do not have it It would be fantastic if I could do something like this...

    navigate({
      from: "/dashboard/*",
      to: ".",
      search: {
        modal: {
          modalType: "deleteEntity",
          entityId: entity.id,
          entityName: entity.entityType,
          entityType: entity.entityType,
          parentEntityId: getParentEntityId(entity),
        },
      },
    });

    navigate({
      from: "/dashboard/*",
      to: ".",
      search: {
        modal: {
          modalType: "deleteEntity",
          entityId: entity.id,
          entityName: entity.entityType,
          entityType: entity.entityType,
          parentEntityId: getParentEntityId(entity),
        },
      },
    });

and then it just ignores the from basically As a quick hack, this works, will use this for now , if there's a better way would love to know.

    navigate({
      from: undefined as any as "/dashboard",
      search: {
        modal: {
          modalType: "deleteEntity",
          entityId: entity.id,
          entityName: entity.entityType,
          entityType: entity.entityType,
          parentEntityId: getParentEntityId(entity),
        },
      },
    });

    navigate({
      from: undefined as any as "/dashboard",
      search: {
        modal: {
          modalType: "deleteEntity",
          entityId: entity.id,
          entityName: entity.entityType,
          entityType: entity.entityType,
          parentEntityId: getParentEntityId(entity),
        },
      },
    });

The primitives for this framework are beautiful, even if some of the edges need to be smoothed out, just saved a few hundred lines of code I think haha

adverse-sapphire•11mo ago

I was seeking this precise solution. I have numerous dialogs that can be opened, and I aim to manage their state via the URL. This approach allows for sharing links and refreshing the page without losing the user’s current position. Here it my solution @Jon Higger (He / Him) https://discord.com/channels/719702312431386674/1007702008448426065/1326664614070456321

fascinating-indigoOP•11mo ago

I believe @Tanner Linsley said that some future version of the api will have an option to make this work without a hacky typecast.

adverse-sapphire•11mo ago

Lovely, can't wait!

broad-brown•11mo ago

@Maintainer - Router Essentially, we need a way to strict: false navigations and allow a big fat union

correct-apricot•10mo ago

This works for me. Put pathname in the to field. The search will be a big fat union of all your search params.

Gaming

Programming

Is there a way to get proper search params in navigate without a specific route

Did you find this page helpful?