useQueryParam.ts

/**
 * useQueryParam
 * https://gist.github.com/erikpukinskis/ffc080bbd087df7ee4567421c186ae13
 *
 * Copyright 2023 Erik Pukinskis
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the “Software”), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

import { compact } from "lodash";
import { useRouter } from "next/router";

type ParamFormat = "string" | "string[]" | "number" | "number[]";

type Required = {
  required: true;
};

/**
 * Equivalent to `useState`, except it reads and writes the state from the Next.js query params.
 */
export function useQueryParam(
  key: string,
  format: "string"
): [string | undefined, (value: string | undefined) => void];
export function useQueryParam(
  key: string,
  format: "string",
  options: Required
): [string, (value: string) => void];
export function useQueryParam(key: string, format: "string[]"): [string[], (value: string[]) => void];
export function useQueryParam(
  key: string,
  format: "number"
): [number | undefined, (value: number | undefined) => void];
export function useQueryParam(
  key: string,
  format: "number",
  options: Required
): [number, (value: number) => void];
export function useQueryParam(key: string, format: "number[]"): number[];
export function useQueryParam(
  key: string,
  format: ParamFormat,
  options?: Required
): [unknown, (value: unknown) => void] {
  const { query } = useRouter();

  const value = query[key];
  const first = Array.isArray(value) ? value[0] : value;

  function checkRequired<T>(value: T) {
    if (value === undefined && options?.required) {
      throw new Error(
        `Query param ${key} is required, but was ${JSON.stringify(value)}`
      );
    }
  }

  function toNumber(string: string | undefined) {
    const number = parseFloat(string ?? "");
    return Number.isNaN(number) ? undefined : number;
  }

  switch (format) {
    case "string":
      const string = (first === undefined) ? checkRequired(undefined) : first;
      const setString = (value: string) => {
        
      }
      return [str]
    case "number": {
      const number = (first === undefined) ? checkRequired(undefined) : checkRequired(toNumber(first));
      return [num]
    }
    case "string[]":
      const stringArray = (Array.isArray(value)) ? value : value !== undefined ? [value] : [];
      return [strarr]

    case "number[]":
      const numberArr = Array.isArray(value) ? compact(value.map(toNumber)) : checkRequired(toNumber(value))
      return [numarr]
  }
}