Repository: supabase/supabase
File: apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx (TypeScript)

Code before:
    if (isPermissionsLoaded && !isSecurityNotificationsEnabled) {
      router.replace(`/project/${ref}/auth/templates/`)
    }
  }, [isPermissionsLoaded, isSecurityNotificationsEnabled, ref, router])

  if (isPermissionsLoaded && !canReadAuthSettings) {
    return <NoPermission isFullPage resourceText="access your project's email settings" />
  }

  if (!isSecurityNotificationsEnabled) {
    return null
  }

  // Convert templateId slug back to template ID for lookup
  const templateIdFromSlug = (slug: string) => {
    const template = TEMPLATES_SCHEMAS.find((template) => {
      const templateSlug = template.title.trim().replace(/\s+/g, '-').toLowerCase()
      return templateSlug === slug
    })
    return template?.id
  }

  const template =
    templateId && typeof templateId === 'string'
      ? TEMPLATES_SCHEMAS.find((template) => template.id === templateIdFromSlug(templateId))
      : null

  // Show error if templateId is invalid or template is not found
  if (!template || !templateId || typeof templateId !== 'string') {
    return (
      <div className="flex h-full w-full items-center justify-center">
        <p className="text-sm text-foreground-light">Template "{templateId}" cannot be found</p>
      </div>
    )
  }

  // Convert templateId slug to one lowercase word to match docs anchor tag
  const templateIdForDocs = templateId.replace(/-/g, '').toLowerCase()

  return (
    <PageLayout
      title={template.title}
      subtitle={template.purpose || 'Configure and customize email templates.'}
      breadcrumbs={[
        {
          label: 'Emails',
          href: `/project/${ref}/auth/templates`,
        },
      ]}
      secondaryActions={[
        <DocsButton

Review comment (refactor):
This seems a bit circular, searching `TEMPLATES_SCHEMAS` twice. Can we not search it once to find the template whose slug matches the page slug? Ideally we would extract out the `slugifyTitle` function so it's guaranteed to be the same everywhere

Code after:

  useEffect(() => {
    if (isPermissionsLoaded && !isSecurityNotificationsEnabled) {
      router.replace(`/project/${ref}/auth/templates/`)
    }
  }, [isPermissionsLoaded, isSecurityNotificationsEnabled, ref, router])

  if (isPermissionsLoaded && !canReadAuthSettings) {
    return <NoPermission isFullPage resourceText="access your project's email settings" />
  }

  if (!isSecurityNotificationsEnabled) {
    return null
  }

  // Find template whose slug matches the URL slug
  const template =
    templateId && typeof templateId === 'string'
      ? TEMPLATES_SCHEMAS.find((template) => slugifyTitle(template.title) === templateId)
      : null

  // Show error if templateId is invalid or template is not found
  if (!template || !templateId || typeof templateId !== 'string') {
    return (
      <div className="flex h-full w-full items-center justify-center">
        <Admonition
          className="max-w-md"
          type="default"
          title="Unable to find template"
          description={`${templateId ? `The template "${templateId}"` : 'This template'} doesn’t seem to exist.`}
        >
          <Button asChild type="default" className="mt-2">
            <Link href={`/project/${ref}/auth/templates`}>Head back</Link>
          </Button>
        </Admonition>
      </div>
    )
  }

  // Convert templateId slug to one lowercase word to match docs anchor tag
  const templateIdForDocs = templateId.replace(/-/g, '').toLowerCase()

  return (
    <PageLayout
      title={template.title}
      subtitle={template.purpose || 'Configure and customize email templates.'}
      breadcrumbs={[
        {
          label: 'Emails',
          href: `/project/${ref}/auth/templates`,
        },