Repository: supabase/supabase
File: apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx (TypeScript)

Code before:
    ? 'userLoading'
    : !isLoggedIn
      ? 'loggedOut'
      : !ref
        ? 'loggedIn.noSelectedProject'
        : projectPaused
          ? 'loggedIn.selectedProject.projectPaused'
          : (needsApiQuery ? isApiSettingsPending || isApiKeysPending : isSupavisorPending)
            ? 'loggedIn.selectedProject.dataPending'
            : (
                  needsApiQuery
                    ? isApiSettingsError || isApiKeysError
                    : isSupavisorError || isInvalidSupavisorData(supavisorConfig!)
                )
              ? 'loggedIn.selectedProject.dataError'
              : 'loggedIn.selectedProject.dataSuccess'

  let variableValue: string = ''

  if (stateSummary === 'loggedIn.selectedProject.dataSuccess') {
    switch (variable) {
      case 'url':
        variableValue = `https://${apiSettingsData?.app_config?.endpoint}`
        break
      case 'anon':
        variableValue = apiKeysData?.find((key) => key.type === 'legacy')?.api_key || ''
        break
      case 'publishable':
        variableValue = apiKeysData?.find((key) => key.type === 'publishable')?.api_key || ''
        break
      case 'sessionPooler':
        variableValue = supavisorConfig?.[0]?.connection_string || ''
    }
  }

  const { copied, handleCopy } = useCopy()

  return (
    <>
      <div className={cn('flex items-center gap-2', className)}>
        <Input
          disabled
          type="text"
          className="font-mono"
          value={
            stateSummary === 'userLoading' ||
            stateSummary === 'loggedIn.selectedProject.dataPending'
              ? 'Loading...'
              : stateSummary === 'loggedIn.selectedProject.projectPaused'
                ? 'PROJECT PAUSED'
                : stateSummary === 'loggedIn.selectedProject.dataSuccess'

Review comment (suggestion):
This looks dangerous, the service key also has type `legacy` and I'm not sure they're guaranteed to be returned in order. Maybe:


```suggestion
        variableValue = apiKeysData?.find((key) => key.type === 'legacy' && key.id === 'anon')?.api_key || ''
```

Code after:
    : !isLoggedIn
      ? 'loggedOut'
      : !ref
        ? 'loggedIn.noSelectedProject'
        : projectPaused
          ? 'loggedIn.selectedProject.projectPaused'
          : (needsApiQuery ? isApiSettingsPending || isApiKeysPending : isSupavisorPending)
            ? 'loggedIn.selectedProject.dataPending'
            : (
                  needsApiQuery
                    ? isApiSettingsError || isApiKeysError
                    : isSupavisorError || isInvalidSupavisorData(supavisorConfig!)
                )
              ? 'loggedIn.selectedProject.dataError'
              : 'loggedIn.selectedProject.dataSuccess'

  let variableValue: string = ''

  if (stateSummary === 'loggedIn.selectedProject.dataSuccess') {
    switch (variable) {
      case 'url':
        variableValue = `https://${apiSettingsData?.app_config?.endpoint}`
        break
      case 'anon':
        variableValue =
          apiKeysData?.find((key) => key.type === 'legacy' && key.id === 'anon')?.api_key || ''
        break
      case 'publishable':
        variableValue = apiKeysData?.find((key) => key.type === 'publishable')?.api_key || ''
        break
      case 'sessionPooler':
        variableValue = supavisorConfig?.[0]?.connection_string || ''
    }
  }

  const { copied, handleCopy } = useCopy()

  return (
    <>
      <div className={cn('flex items-center gap-2', className)}>
        <Input
          disabled
          type="text"
          className="font-mono"
          value={
            stateSummary === 'userLoading' ||
            stateSummary === 'loggedIn.selectedProject.dataPending'
              ? 'Loading...'
              : stateSummary === 'loggedIn.selectedProject.projectPaused'
                ? 'PROJECT PAUSED'
                : stateSummary === 'loggedIn.selectedProject.dataSuccess'