fix(youtube-analytics): fix tab-switch crash and channel selector

- Clear data state on tab switch to prevent stale data type mismatch
- Add defensive null guards in all render functions (?.stats, ?.pipeline)
- Use channel ID instead of slug for API filtering

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Martin Porwoll 2026-02-13 14:00:35 +00:00
parent 06c93ba05c
commit 826e404955

View file

@ -272,7 +272,7 @@ export const YouTubeAnalyticsDashboard: React.FC = () => {
const renderPerformance = () => { const renderPerformance = () => {
const perfData = data as PerformanceData const perfData = data as PerformanceData
if (!perfData) return null if (!perfData?.stats) return null
return ( return (
<> <>
@ -435,7 +435,7 @@ export const YouTubeAnalyticsDashboard: React.FC = () => {
const renderPipeline = () => { const renderPipeline = () => {
const pipeData = data as PipelineData const pipeData = data as PipelineData
if (!pipeData) return null if (!pipeData?.pipeline) return null
// Group statuses for pipeline bar // Group statuses for pipeline bar
const statusGroups: Record<string, { label: string; className: string }> = { const statusGroups: Record<string, { label: string; className: string }> = {
@ -557,7 +557,7 @@ export const YouTubeAnalyticsDashboard: React.FC = () => {
const renderGoals = () => { const renderGoals = () => {
const goalsData = data as GoalsData const goalsData = data as GoalsData
if (!goalsData) return null if (!goalsData?.stats) return null
return ( return (
<> <>
@ -652,7 +652,7 @@ export const YouTubeAnalyticsDashboard: React.FC = () => {
const renderCommunity = () => { const renderCommunity = () => {
const commData = data as CommunityData const commData = data as CommunityData
if (!commData) return null if (!commData?.stats) return null
const sentimentMax = Math.max(...Object.values(commData.sentiment)) const sentimentMax = Math.max(...Object.values(commData.sentiment))
@ -765,7 +765,7 @@ export const YouTubeAnalyticsDashboard: React.FC = () => {
> >
<option value="all">Alle Kanäle</option> <option value="all">Alle Kanäle</option>
{channels.map((ch) => ( {channels.map((ch) => (
<option key={ch.id} value={ch.slug}> <option key={ch.id} value={ch.id}>
{ch.name} {ch.name}
</option> </option>
))} ))}
@ -807,7 +807,12 @@ export const YouTubeAnalyticsDashboard: React.FC = () => {
<button <button
key={tab.key} key={tab.key}
className={`yt-analytics__tab ${activeTab === tab.key ? 'yt-analytics__tab--active' : ''}`} className={`yt-analytics__tab ${activeTab === tab.key ? 'yt-analytics__tab--active' : ''}`}
onClick={() => setActiveTab(tab.key)} onClick={() => {
if (tab.key !== activeTab) {
setData(null)
setActiveTab(tab.key)
}
}}
> >
{tab.icon} {tab.icon}
{tab.label} {tab.label}