typed-function-final.ts

import React from "react";

import { useSearchParams } from "next/navigation";
import type { PropsWithChildren } from "react";
import { z } from "zod";

const MAIN_PAGE = "main";
const VIDEOS_PAGE = "videos";

const pageDefinitions = {
  [MAIN_PAGE]: {
    searchParams: z.object({
      lang: z.string().default("en"),
    }),
  },
  [VIDEOS_PAGE]: {
    searchParams: z.object({
      lang: z.string().default("en"),
      page: z.number().default(1),
    }),
  },
};

type PageKeys = keyof typeof pageDefinitions;

const usePageSearchParams = <T extends PageKeys>(page: T): z.infer<(typeof pageDefinitions[T]["searchParams"])> => {
  const searchParams = Object.fromEntries(useSearchParams().entries());
  return pageDefinitions[page].searchParams.parse(searchParams);
};

const generateUrl = <T extends PageKeys>(page: T, searchParams?: Partial<z.infer<(typeof pageDefinitions[T]["searchParams"])>>): string => {
  return `/${page}?${searchParams ? Object.keys(searchParams).join("&") : ""}`;
}

interface LinkParams<T extends PageKeys> {
  page: T,
  searchParams: Partial<z.infer<(typeof pageDefinitions[T]["searchParams"])>>
}

const PageLink = <T extends PageKeys>({ page, searchParams }: LinkParams<T> & PropsWithChildren) => {
  return <div>{generateUrl(page, searchParams)}</div>;
}

const Page = () => {
  return (
    <PageLink page={MAIN_PAGE} searchParams={{ lang: "en" }}></PageLink>
  );
}

const result = usePageSearchParams(MAIN_PAGE);

console.log(generateUrl(MAIN_PAGE, { lang: "en" }))