Repository: supabase/supabase
File: apps/studio/pages/project/[ref]/functions/index.tsx (TypeScript)

Code before:
      x.name.toLowerCase().includes(searchString.toLowerCase())
    )
    const [sortCol, sortOrder] = sort.split(':') as [
      EdgeFunctionsSortColumn,
      EdgeFunctionsSortOrder,
    ]
    const orderMultiplier = sortOrder === 'asc' ? 1 : -1

    return temp.sort((a, b) => {
      if (sortCol === 'name') {
        return a.name.localeCompare(b.name) * orderMultiplier
      }
      if (sortCol === 'created_at') {
        return (a.created_at - b.created_at) * orderMultiplier
      }
      if (sortCol === 'updated_at') {
        return (a.updated_at - b.updated_at) * orderMultiplier
      }
      return 0
    })
  }, [functions, searchString, sort])

  const hasFunctions = (functions ?? []).length > 0

  return (
    <PageContainer size="large">
      <PageSection>
        <PageSectionContent>
          {IS_PLATFORM ? (
            <>
              {isLoading && <GenericSkeletonLoader />}
              {isError && <AlertError error={error} subject="Failed to retrieve edge functions" />}
              {isSuccess && (
                <>
                  {hasFunctions ? (
                    <div className="space-y-4">
                      <div className="flex items-center gap-2">
                        <div className="flex items-center gap-2">
                          <Input
                            placeholder="Search function names"
                            size="tiny"
                            icon={<Search size={14} />}
                            value={searchString}
                            className="w-52"
                            onChange={(e) => setSearchString(e.target.value)}
                          />
                        </div>
                        <div className="flex items-center gap-2">
                          <EdgeFunctionsSortDropdown value={sort} onChange={setSort} />
                        </div>
                      </div>

Review comment (suggestion):
this is a bit better when using strings, makes the types harder to mess up and make the implementation easier

Code after:
    'sort',
    parseAsStringLiteral<EdgeFunctionsSort>(EDGE_FUNCTIONS_SORT_VALUES).withDefault('name:asc')
  )

  const filteredFunctions = useMemo(() => {
    const temp = (functions ?? []).filter((x) =>
      x.name.toLowerCase().includes(search.toLowerCase())
    )
    const [sortCol, sortOrder] = sort.split(':') as [
      EdgeFunctionsSortColumn,
      EdgeFunctionsSortOrder,
    ]
    const orderMultiplier = sortOrder === 'asc' ? 1 : -1

    return temp.sort((a, b) => {
      if (sortCol === 'name') {
        return a.name.localeCompare(b.name) * orderMultiplier
      }
      if (sortCol === 'created_at') {
        return (a.created_at - b.created_at) * orderMultiplier
      }
      if (sortCol === 'updated_at') {
        return (a.updated_at - b.updated_at) * orderMultiplier
      }
      return 0
    })
  }, [functions, search, sort])

  const hasFunctions = (functions ?? []).length > 0

  return (
    <PageContainer size="large">
      <PageSection>
        <PageSectionContent>
          {IS_PLATFORM ? (
            <>
              {isLoading && <GenericSkeletonLoader />}
              {isError && <AlertError error={error} subject="Failed to retrieve edge functions" />}
              {isSuccess && (
                <>
                  {hasFunctions ? (
                    <div className="space-y-4">
                      <div className="flex items-center gap-2">
                        <div className="flex items-center gap-2">
                          <div className="relative">
                            <Input
                              placeholder="Search function names"
                              icon={<Search size={12} />}
                              size="tiny"
                              className="w-32 md:w-64 pl-8 [&>div>div>div>input]:!pl-7 [&>div>div>div>div]:!pl-2"
                              value={search}