Theo's Typesafe Cult•2y ago

Search URL structuring

Hi guys, I have a dynamic URL in Next: search/[word]/[[...rest]] and I was wondering how would I parse this best? I don't want to build the URL out directly, I want to keep it somewhat dynamic so I can do something like this: /search/Hello T3/tags/typescript|next/length/1-10 and structure it any way I like and leave stuff out I don't need. My code currently is this, but I feel like this is super stupid:

// Find Index where tags Param is in URL
const tagsIndex = params.rest.findIndex((r) => r === 'tags');
// Get the next param where the values for it are
const tagsPosition = tagsIndex !== -1 ? tagsIndex + 1 : -1;
// Read out the values
const searchTags = tagsPosition !== -1 ? params.rest[tagsPosition]?.split('%7C') ?? [] : [];

const temporaryTokensIndex = params.rest.findIndex((r) => r === 'temporary');
const temporaryTokensPosition = temporaryTokensIndex !== -1 ? temporaryTokensIndex + 1 : -1;
const temporaryTokens =
  temporaryTokensPosition !== -1
    ? params.rest[temporaryTokensPosition]?.split('-').map((t) => parseInt(t)) ?? [0, 0]
    : [0, 0];
// Swap if in X-Y X is greater than Y
if (
  temporaryTokens[0] &&
  temporaryTokens[1] &&
  (temporaryTokens[0] ?? 0 > temporaryTokens[1] ?? 0)
) {
  const temp = temporaryTokens[1];
   temporaryTokens[1] = temporaryTokens[0];
   temporaryTokens[0] = temp;
  }

const permanentTokensIndex = params.rest.findIndex((r) => r === 'permanent');
const permanentTokensPosition = permanentTokensIndex !== -1 ? permanentTokensIndex + 1 : -1;
const permanentTokens =
  permanentTokensPosition !== -1
    ? params.rest[permanentTokensPosition]?.split('-').map((t) => parseInt(t)) ?? [0, 0]
    : [0, 0];
if (
  permanentTokens[0] &&
  permanentTokens[1] &&
  (permanentTokens[0] ?? 0 > permanentTokens[1] ?? 0)
) {
  const temp = permanentTokens[1];
  permanentTokens[1] = permanentTokens[0];
  permanentTokens[0] = temp;
}

// Find Index where tags Param is in URL
const tagsIndex = params.rest.findIndex((r) => r === 'tags');
// Get the next param where the values for it are
const tagsPosition = tagsIndex !== -1 ? tagsIndex + 1 : -1;
// Read out the values
const searchTags = tagsPosition !== -1 ? params.rest[tagsPosition]?.split('%7C') ?? [] : [];

const temporaryTokensIndex = params.rest.findIndex((r) => r === 'temporary');
const temporaryTokensPosition = temporaryTokensIndex !== -1 ? temporaryTokensIndex + 1 : -1;
const temporaryTokens =
  temporaryTokensPosition !== -1
    ? params.rest[temporaryTokensPosition]?.split('-').map((t) => parseInt(t)) ?? [0, 0]
    : [0, 0];
// Swap if in X-Y X is greater than Y
if (
  temporaryTokens[0] &&
  temporaryTokens[1] &&
  (temporaryTokens[0] ?? 0 > temporaryTokens[1] ?? 0)
) {
  const temp = temporaryTokens[1];
   temporaryTokens[1] = temporaryTokens[0];
   temporaryTokens[0] = temp;
  }

const permanentTokensIndex = params.rest.findIndex((r) => r === 'permanent');
const permanentTokensPosition = permanentTokensIndex !== -1 ? permanentTokensIndex + 1 : -1;
const permanentTokens =
  permanentTokensPosition !== -1
    ? params.rest[permanentTokensPosition]?.split('-').map((t) => parseInt(t)) ?? [0, 0]
    : [0, 0];
if (
  permanentTokens[0] &&
  permanentTokens[1] &&
  (permanentTokens[0] ?? 0 > permanentTokens[1] ?? 0)
) {
  const temp = permanentTokens[1];
  permanentTokens[1] = permanentTokens[0];
  permanentTokens[0] = temp;
}

1 Reply

whatplan•2y ago

https://github.com/ethanniser/next-typesafe-url/tree/appdir this is my own package for working with search + route params in next im shipping version 2.0 later today, but the docs are up right now does this look like it would solve your issue?

GitHub

GitHub - ethanniser/next-typesafe-url at appdir

JSON serializable, fully typesafe, and zod validated URL search params, dynamic route params, and routing for NextJS pages directory - GitHub - ethanniser/next-typesafe-url at appdir

Gaming

Programming

Search URL structuring