supabase/packages/common/hooks/useParams.ts

/*
 * next/compat/router is used so that this doesn't cause an error on App
 * Router builds. However, no replacement for the functionality is provided if
 * the router is missing (it just silently fails).
 *
 * This is fine because docs (the only site moving to App Router right now)
 * doesn't use this hook. Skipping it silently is less troublesome than trying
 * to make it work across both routers -- making search params work seamlessly
 * is a giant pain, and too much critical studio functionality depends on this
 * to mess with it lightly.
 */
import { useRouter } from 'next/compat/router'
import { useMemo } from 'react'

/**
 * Helper to convert kebab case to camel case
 */
function convertToCamelCase(key: string): string {
  if (!key.includes('-')) {
    return key
  }

  const parts = key.split('-')
  const capitalizedParts = parts.map((part, index) => {
    if (index === 0) {
      return part
    }
    return part.charAt(0).toUpperCase() + part.slice(1)
  })
  return capitalizedParts.join('')
}

export function useParams(): {
  [k: string]: string | undefined
} {
  const router = useRouter()
  const query = router?.query

  const modifiedQuery = {
    ...query,
  }

  // Convert kebab case keys to camel case
  Object.keys(modifiedQuery).forEach((key) => {
    const modifiedKey = convertToCamelCase(key)
    if (modifiedKey !== key) {
      modifiedQuery[modifiedKey] = modifiedQuery[key]
      delete modifiedQuery[key]
    }
  })

  return useMemo(
    () =>
      Object.fromEntries(
        Object.entries(modifiedQuery).map(([key, value]) => {
          if (Array.isArray(value)) {
            return [key, value[0]]
          } else {
            return [key, value]
          }
        })
      ),
    [query]
  )
}