Repository: supabase/supabase
File: apps/studio/components/interfaces/Database/Indexes/Indexes.tsx (TypeScript)

Code before:
  const {
    data: allIndexes,
    error: indexesError,
    isPending: isLoadingIndexes,
    isSuccess: isSuccessIndexes,
    isError: isErrorIndexes,
  } = useIndexesQuery({
    schema: selectedSchema,
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })

  const [showCreateIndex, setShowCreateIndex] = useQueryState(
    'new',
    parseAsBoolean.withDefault(false).withOptions({ history: 'push', clearOnDefault: true })
  )

  const [editIndexId, setEditIndexId] = useQueryState(
    'edit',
    parseAsString.withOptions({ history: 'push', clearOnDefault: true })
  )
  const selectedIndex = allIndexes?.find((idx) => idx.name === editIndexId)

  const [deleteIndexId, setDeleteIndexId] = useQueryState(
    'delete',
    parseAsString.withOptions({ history: 'push', clearOnDefault: true })
  )
  const selectedIndexToDelete = allIndexes?.find((idx) => idx.name === deleteIndexId)

  const {
    data: schemas,
    isPending: isLoadingSchemas,
    isSuccess: isSuccessSchemas,
    isError: isErrorSchemas,
  } = useSchemasQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })

  const {
    mutate: deleteIndex,
    isPending: isExecuting,
    isSuccess: isSuccessDelete,
  } = useDatabaseIndexDeleteMutation({
    onSuccess: async () => {
      setDeleteIndexId(null)
      toast.success('Successfully deleted index')
    },
  })

  const { isSchemaLocked } = useIsProtectedSchema({ schema: selectedSchema })

Review comment (suggestion):
Is `push` the right choice for all of these? It seems a little strange to me that the back button would open and close modals

Code after:
  const {
    data: allIndexes,
    error: indexesError,
    isPending: isLoadingIndexes,
    isSuccess: isSuccessIndexes,
    isError: isErrorIndexes,
  } = useIndexesQuery({
    schema: selectedSchema,
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })

  const [showCreateIndex, setShowCreateIndex] = useQueryState(
    'new',
    parseAsBoolean.withDefault(false)
  )

  const [editIndexId, setEditIndexId] = useQueryState('edit', parseAsString)
  const selectedIndex = allIndexes?.find((idx) => idx.name === editIndexId)

  const [deleteIndexId, setDeleteIndexId] = useQueryState('delete', parseAsString)
  const selectedIndexToDelete = allIndexes?.find((idx) => idx.name === deleteIndexId)

  const {
    data: schemas,
    isPending: isLoadingSchemas,
    isSuccess: isSuccessSchemas,
    isError: isErrorSchemas,
  } = useSchemasQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })

  const {
    mutate: deleteIndex,
    isPending: isExecuting,
    isSuccess: isSuccessDelete,
  } = useDatabaseIndexDeleteMutation({
    onSuccess: async () => {
      setDeleteIndexId(null)
      toast.success('Successfully deleted index')
    },
  })

  const { isSchemaLocked } = useIsProtectedSchema({ schema: selectedSchema })

  const sortedIndexes = sortBy(allIndexes ?? [], (index) => index.name.toLocaleLowerCase())
  const indexes =
    search.length > 0
      ? sortedIndexes.filter((index) => index.name.includes(search) || index.table.includes(search))
      : sortedIndexes