open-notebook/frontend/src/lib/hooks/use-podcasts.ts
MisonL 67dd85c928
Feat/localization tests docker (#371)
* feat(i18n): complete 100% internationalization and fix Next.js 15 compatibility

* feat(i18n): complete 100% internationalization coverage

* chore(test): finalize component tests and project cleanup

* test(logic): add unit tests for useModalManager hook

* fix(test): resolve timeout in AppSidebar tests by mocking TooltipProvider

* feat(i18n): comprehensive i18n audit, fixes for hardcoded strings, and complete zh-TW support

* fix(i18n): resolve TypeScript warnings and improve translation hook stability

- Remove unused useTranslation import from ConnectionGuard
- Add ref-based checking state to prevent dependency cycles
- Fix useTranslation hook to return empty string for undefined translations
- Add comment for backward compatibility on ExtractedReference interface
- Ensure .replace() string methods work safely with nested translation keys

* feat(i18n): complete internationalization implementation with Docker deployment

- Add LanguageLoadingOverlay component for smooth language transitions
- Update all translation files (en-US, zh-CN, zh-TW) with improved terminology
- Optimize Docker configuration for better performance
- Update version check and config handling for i18n support
- Fix route handling for language-specific content
- Add comprehensive task documentation

* fix(i18n): resolve localization errors, duplicates, and type issues

* chore(i18n): finalize 100% internationalization coverage

* chore(test): supplement i18n test cases and cleanup redundant files

* fix(test): resolve lint type errors and finalize delivery documents

* feat(i18n): finalize full internationalization and zh-TW localization

* fix(frontend): add missing devDependency and fix build tsconfig

* feat(ui): enhance sidebar hover effects with better visual feedback

* fix(frontend): resolve accessibility, i18n, and lint issues

- fix: add missing id, name, autocomplete attributes to dialog inputs
- fix: add aria labels and DialogDescription for accessibility
- fix: resolve uncontrolled component warning in SettingsForm
- fix: correct duplicate 'Traditional Chinese' label in zh-TW locale
- feat: add i18n support for podcast template names
- chore: fix lint errors in Dialogs

* fix: address all 21 PR feedback items from cubic-dev-ai bot

Configuration:
- Remove ignoreDuringBuilds flags from next.config.ts

Testing:
- Fix AppSidebar.test.tsx regex pattern and add missing assertion

Logic:
- Fix ConnectionGuard.tsx re-entry prevention logic

Internationalization (I18n) - Translations:
- Add missing keys: notebooks.archived, common.note/insight, accessibility keys
- Add specific keys: sources.allSourcesDescShort, transformations.selectModel
- Add singular/plural keys: podcasts.usedByCount_one/other, common.note/notes
- Add common.created/updated with {time} placeholder

Internationalization (I18n) - Usage:
- SourcesPage: use allSourcesDescShort instead of string splitting
- TransformationPlayground: use navigation.transformation and selectModel
- CommandPalette: use dedicated keys instead of string concatenation
- GeneratePodcastDialog: fix zh-TW date locale handling
- NotebookHeader: correctly interpolate {time} placeholder
- TransformationCard: use common.description instead of undefined key
- ChatPanel/SpeakerProfilesPanel: implement proper pluralization
- SystemInfo: correctly interpolate {version} placeholder
- LanguageLoadingOverlay: use t.common.loading instead of hardcoded string
- MessageActions: use specific error key cannotSaveNoteNoNotebook

Other:
- Fix SessionManager.tsx exhaustive-deps warning

* fix: remove duplicate locale keys and add missing zh-CN translations

- en-US: remove duplicate loading key (line 59) and addNew key (sources)
- zh-CN: remove duplicate common keys (loading, note, insight, newSource, newNotebook, newPodcast)
- zh-CN: remove duplicate accessibility.searchNotebooks key
- zh-CN: remove duplicate sources.addNew key
- zh-CN: remove duplicate navigation.transformation key
- zh-CN: add missing usedByCount_one and usedByCount_other keys in podcasts
- zh-TW: remove duplicate common keys (loading, note, insight, newSource, newNotebook, newPodcast)
- zh-TW: remove duplicate accessibility.searchNotebooks key
- zh-TW: remove duplicate sources.addNew key

* docs: remove info.md

* fix: remove duplicate notebook keys and unused ts-expect-error

- zh-CN: remove duplicate notebooks keys (archived, archive, unarchive, deleteNotebook, deleteNotebookDesc)
- zh-TW: remove duplicate notebooks keys (archived, archive, unarchive, deleteNotebook, deleteNotebookDesc)
- GeneratePodcastDialog: remove unused @ts-expect-error directive

* fix(a11y): fix unassociated labels in search page

- Replace <Label> with role='group' + aria-labelledby for search type section
- Replace <Label> with role='group' + aria-labelledby for search in section
- Follows WAI-ARIA best practices for labeling form field groups

* fix(a11y): fix unassociated labels across multiple components

- search/page.tsx: use role='group' + aria-labelledby for search type and search in sections
- RebuildEmbeddings.tsx: use role='group' + aria-labelledby for include checkboxes
- TransformationPlayground.tsx: replace Label with span for non-form output label

* chore: revert to npm stack and ensure i18n compatibility

* chore: polish zh-TW translations for better idiomatic usage

* fix: resolve linter errors (ruff import sort, mypy config duplicate)

* style: apply ruff formatting

* fix: finalize upstream compliance (Dockerfile.single, i18n hooks, docker-compose)

* style: polish strings, fix timeout cleanup, and improve test mocks

* fix: use relative imports in test setup to resolve IDE path errors

* perf(docker): optimize build speed by removing apt-get upgrade and build tools

- Remove apt-get upgrade from both builder and runtime stages (saves 10-15 min each)
- Remove gcc/g++/make/git from builder (uv downloads pre-built wheels)
- Add --no-install-recommends to minimize package footprint
- Keep npm mirror (npmmirror.com) for faster frontend deps
- Add npm registry config for reliable China network access

Also includes:
- fix(a11y): add missing labels and aria attributes to form fields
- fix(i18n): add 2s safety timeout to LanguageLoadingOverlay
- fix(i18n): add robustness checks to use-translation proxy

Build time reduced from 2+ hours to ~34 minutes (~70% improvement)

* fix(a11y): resolve 16 form field accessibility warnings in notebook and podcast pages

* fix(a11y): resolve 4 button and 1 select field accessibility warnings in models page

* fix(a11y): resolve redundant attributes and residual warnings in transformations and podcast forms

* fix(i18n): deep fix for language switch hang using proxy protection and safer access

* fix(a11y): add name attributes to ModelSelector, TransformationPlayground, and SourceDetailContent

* fix: add missing Label import to SourceDetailContent

* fix(i18n): use native react-i18next in LanguageLoadingOverlay to prevent hang during language switch

* fix(i18n): rewrite use-translation Proxy with strict depth limit and expanded blocked props to prevent language switch hang

* fix: add type assertion to fix TypeScript comparison error

* fix(i18n): disable useSuspense to prevent thread hang during language resource loading

* fix(i18n): add infinite loop detection circuit breaker to useTranslation hook

* fix(i18n): update traditional chinese label to native script in en-US

* feat: add new localization strings for notebook and note management.

* fix: resolve config priority, docker build deps, and ui glitches

* refactor: improve ui details and test coverage based on feedback

* refactor: improve ui details (version check/lang toggle) and test coverage

* fix: polish language matching and test cleanup

* fix(test): update mocks to resolve timeouts and proxy errors

* fix(frontend): restore tsconfig.json structure and enable IDE support for tests

* fix: address PR review findings and resolve CI OIDC failure

* fix: merge exception headers in custom handler

* fix: comprehensive PR review remediations and async performance fixes

* refactor: address all PR #371 review feedback

- Docker: consolidate SURREAL_URL to docker.env, add single-container override
- Security: restore apt-get upgrade in Dockerfile and Dockerfile.single
- Create centralized getDateLocale helper (lib/utils/date-locale.ts)
- Refactor 7 files to use getDateLocale helper
- Revert config/route.ts to origin/main version
- Move test files to co-located pattern (3 files)
- Remove local useTranslation mock from ConfirmDialog.test.tsx
- Simplify use-version-check to single useEffect pattern
- Fix test import paths after moving to co-located pattern

* fix: add jest-dom types for test files

* fix: address remaining review issues

- Add apt-get upgrade -y to Dockerfile.single backend-builder stage
- Refactor ChatColumn.test.tsx: use 'as unknown as ReturnType<typeof hook>' instead of 'as any'
- Use toBeInTheDocument() assertions instead of toBeDefined()
2026-01-15 13:51:05 -03:00

381 lines
11 KiB
TypeScript

import { useMemo } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { podcastsApi, EpisodeProfileInput, SpeakerProfileInput } from '@/lib/api/podcasts'
import { QUERY_KEYS } from '@/lib/api/query-client'
import { useToast } from '@/lib/hooks/use-toast'
import { useTranslation } from '@/lib/hooks/use-translation'
import { getApiErrorKey } from '@/lib/utils/error-handler'
import {
ACTIVE_EPISODE_STATUSES,
EpisodeProfile,
EpisodeStatusGroups,
PodcastEpisode,
PodcastGenerationRequest,
groupEpisodesByStatus,
speakerUsageMap,
} from '@/lib/types/podcasts'
interface EpisodeStatusCounts {
total: number
running: number
completed: number
failed: number
pending: number
}
function hasActiveEpisodes(episodes: PodcastEpisode[]) {
return episodes.some((episode) => {
const status = episode.job_status ?? 'unknown'
return ACTIVE_EPISODE_STATUSES.includes(status)
})
}
export function usePodcastEpisodes(options?: { autoRefresh?: boolean }) {
const { autoRefresh = true } = options ?? {}
const query = useQuery({
queryKey: QUERY_KEYS.podcastEpisodes,
queryFn: podcastsApi.listEpisodes,
refetchInterval: (current) => {
if (!autoRefresh) {
return false
}
const data = current.state.data as PodcastEpisode[] | undefined
if (!data || data.length === 0) {
return false
}
return hasActiveEpisodes(data) ? 15_000 : false
},
})
const episodes = useMemo(() => query.data ?? [], [query.data])
const statusGroups = useMemo<EpisodeStatusGroups>(
() => groupEpisodesByStatus(episodes),
[episodes]
)
const statusCounts = useMemo<EpisodeStatusCounts>(
() => ({
total: episodes.length,
running: statusGroups.running.length,
completed: statusGroups.completed.length,
failed: statusGroups.failed.length,
pending: statusGroups.pending.length,
}),
[episodes.length, statusGroups]
)
const active = useMemo(() => hasActiveEpisodes(episodes), [episodes])
return {
...query,
episodes,
statusGroups,
statusCounts,
hasActiveEpisodes: active,
}
}
export function useDeletePodcastEpisode() {
const queryClient = useQueryClient()
const { toast } = useToast()
const { t } = useTranslation()
return useMutation({
mutationFn: (episodeId: string) => podcastsApi.deleteEpisode(episodeId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
toast({
title: t.podcasts.episodeDeleted,
description: t.podcasts.episodeDeletedDesc,
})
},
onError: (error: unknown) => {
toast({
title: t.podcasts.failedToDeleteEpisode,
description: getApiErrorKey(error, t.common.error),
variant: 'destructive',
})
},
})
}
export function useEpisodeProfiles() {
const query = useQuery({
queryKey: QUERY_KEYS.episodeProfiles,
queryFn: podcastsApi.listEpisodeProfiles,
})
return {
...query,
episodeProfiles: query.data ?? [],
}
}
export function useCreateEpisodeProfile() {
const queryClient = useQueryClient()
const { toast } = useToast()
const { t } = useTranslation()
return useMutation({
mutationFn: (payload: EpisodeProfileInput) =>
podcastsApi.createEpisodeProfile(payload),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
toast({
title: t.podcasts.profileCreated,
description: t.podcasts.profileCreatedDesc,
})
},
onError: (error: unknown) => {
toast({
title: t.podcasts.failedToCreateProfile,
description: getApiErrorKey(error, t.common.error),
variant: 'destructive',
})
},
})
}
export function useUpdateEpisodeProfile() {
const queryClient = useQueryClient()
const { toast } = useToast()
const { t } = useTranslation()
return useMutation({
mutationFn: ({
profileId,
payload,
}: {
profileId: string
payload: EpisodeProfileInput
}) => podcastsApi.updateEpisodeProfile(profileId, payload),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
toast({
title: t.podcasts.profileUpdated,
description: t.podcasts.profileUpdatedDesc,
})
},
onError: (error: unknown) => {
toast({
title: t.podcasts.failedToUpdateProfile,
description: getApiErrorKey(error, t.common.error),
variant: 'destructive',
})
},
})
}
export function useDeleteEpisodeProfile() {
const queryClient = useQueryClient()
const { toast } = useToast()
const { t } = useTranslation()
return useMutation({
mutationFn: (profileId: string) => podcastsApi.deleteEpisodeProfile(profileId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
toast({
title: t.podcasts.profileDeleted,
description: t.podcasts.profileDeletedDesc,
})
},
onError: (error: unknown) => {
toast({
title: t.podcasts.failedToDeleteProfile,
description: getApiErrorKey(error, t.podcasts.failedToDeleteProfileDesc),
variant: 'destructive',
})
},
})
}
export function useDuplicateEpisodeProfile() {
const queryClient = useQueryClient()
const { toast } = useToast()
const { t } = useTranslation()
return useMutation({
mutationFn: (profileId: string) =>
podcastsApi.duplicateEpisodeProfile(profileId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
toast({
title: t.podcasts.profileDuplicated,
description: t.podcasts.profileDuplicatedDesc,
})
},
onError: (error: unknown) => {
toast({
title: t.podcasts.failedToDuplicateProfile,
description: getApiErrorKey(error, t.common.error),
variant: 'destructive',
})
},
})
}
export function useSpeakerProfiles(episodeProfiles?: EpisodeProfile[]) {
const query = useQuery({
queryKey: QUERY_KEYS.speakerProfiles,
queryFn: podcastsApi.listSpeakerProfiles,
})
const speakerProfiles = useMemo(() => query.data ?? [], [query.data])
const usage = useMemo(
() => speakerUsageMap(speakerProfiles, episodeProfiles),
[speakerProfiles, episodeProfiles]
)
return {
...query,
speakerProfiles,
usage,
}
}
export function useCreateSpeakerProfile() {
const queryClient = useQueryClient()
const { toast } = useToast()
const { t } = useTranslation()
return useMutation({
mutationFn: (payload: SpeakerProfileInput) =>
podcastsApi.createSpeakerProfile(payload),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.speakerProfiles })
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
toast({
title: t.podcasts.speakerCreated,
description: t.podcasts.speakerCreatedDesc,
})
},
onError: (error: unknown) => {
toast({
title: t.podcasts.failedToCreateSpeaker,
description: getApiErrorKey(error, t.common.error),
variant: 'destructive',
})
},
})
}
export function useUpdateSpeakerProfile() {
const queryClient = useQueryClient()
const { toast } = useToast()
const { t } = useTranslation()
return useMutation({
mutationFn: ({
profileId,
payload,
}: {
profileId: string
payload: SpeakerProfileInput
}) => podcastsApi.updateSpeakerProfile(profileId, payload),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.speakerProfiles })
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
toast({
title: t.podcasts.speakerUpdated,
description: t.podcasts.speakerUpdatedDesc,
})
},
onError: (error: unknown) => {
toast({
title: t.podcasts.failedToUpdateSpeaker,
description: getApiErrorKey(error, t.common.error),
variant: 'destructive',
})
},
})
}
export function useDeleteSpeakerProfile() {
const queryClient = useQueryClient()
const { toast } = useToast()
const { t } = useTranslation()
return useMutation({
mutationFn: (profileId: string) => podcastsApi.deleteSpeakerProfile(profileId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.speakerProfiles })
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.episodeProfiles })
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
toast({
title: t.podcasts.speakerDeleted,
description: t.podcasts.speakerDeletedDesc,
})
},
onError: (error: unknown) => {
toast({
title: t.podcasts.failedToDeleteSpeaker,
description: getApiErrorKey(error, t.podcasts.failedToDeleteSpeakerDesc),
variant: 'destructive',
})
},
})
}
export function useDuplicateSpeakerProfile() {
const queryClient = useQueryClient()
const { toast } = useToast()
const { t } = useTranslation()
return useMutation({
mutationFn: (profileId: string) =>
podcastsApi.duplicateSpeakerProfile(profileId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: QUERY_KEYS.speakerProfiles })
toast({
title: t.podcasts.speakerDuplicated,
description: t.podcasts.speakerDuplicatedDesc,
})
},
onError: (error: unknown) => {
toast({
title: t.podcasts.failedToDuplicateSpeaker,
description: getApiErrorKey(error, t.common.error),
variant: 'destructive',
})
},
})
}
export function useGeneratePodcast() {
const queryClient = useQueryClient()
const { toast } = useToast()
const { t } = useTranslation()
return useMutation({
mutationFn: (payload: PodcastGenerationRequest) =>
podcastsApi.generatePodcast(payload),
onSuccess: async (response) => {
// Immediately refetch to show the new episode
await queryClient.refetchQueries({ queryKey: QUERY_KEYS.podcastEpisodes })
toast({
title: t.podcasts.generationStarted,
description: t.podcasts.generationStartedDesc.replace('{name}', response.episode_name),
})
},
onError: (error: unknown) => {
toast({
title: t.podcasts.failedToStartGeneration,
description: getApiErrorKey(error, t.podcasts.tryAgainMoment),
variant: 'destructive',
})
},
})
}