chahinebrini c4cfd351c4 feat(profile): useDemographics hook + page-reload re-hydration
User-Bug: Demographics werden korrekt gespeichert (DB verified), aber nach
Page-Reload sah User leere Felder → dachte save kaputt. Root: kein GET-endpoint
+ kein server-state-rehydrate nach PATCH.

- hooks/useProfileData.ts: useDemographics() wraps useFetchOnce<DemographicsResponse>
  ('/api/profile/me/demographics'), splittet in fields + meta (consentAt/withdrawnAt)
- app/profile/index.tsx: serverDemographics ?? EMPTY_DEMOGRAPHICS const statt local
  state. Nach PATCH/DELETE: reloadDemographics() pulled fresh server data.

Edge-cases:
- 404 (endpoint nicht live) → fallback EMPTY, kein crash
- loading → EMPTY initial bis fetch resolved, konsistent mit other hooks
- withdrawnAt set → demoComplete=false (Demographics-Hint sichtbar trotz potentiell
  noch befüllter felder durch race-condition)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-08 21:32:39 +02:00

190 lines
4.8 KiB
TypeScript

import { useCallback, useEffect, useState } from 'react';
import { apiFetch } from '../lib/api';
import type { CooldownEntry } from '../components/profile/StreakSection';
import type { ApprovedDomain } from '../components/profile/ApprovedDomainsList';
export type SocialStats = {
postsCount: number;
followersCount: number;
};
export type ApprovedDomainsData = {
count: number;
list: ApprovedDomain[];
};
export type CooldownHistoryData = {
items: CooldownEntry[];
nextCursor: string | null;
};
export type SosInsightsData = {
last30Days: { sessions: number; overcome: number; overcomeRate: number };
helpedBy: { breathing: number; game: number; talk: number; other: number };
topEmotion: string | null;
};
type BackendCooldownEntry = {
id: string;
startedAt: string;
cooldownEndsAt: string;
durationMinutes: number;
status: 'active' | 'resolved' | 'cancelled';
resolvedAt: string | null;
cancelledAt: string | null;
reason: string | null;
};
function formatDuration(minutes: number): string {
if (minutes < 60) return `${minutes}min`;
const h = Math.round(minutes / 60);
return `${h}h`;
}
function formatStartedAt(isoString: string): string {
const d = new Date(isoString);
const day = String(d.getDate()).padStart(2, '0');
const month = String(d.getMonth() + 1).padStart(2, '0');
return `${day}.${month}.`;
}
function mapCooldownEntry(raw: BackendCooldownEntry): CooldownEntry {
return {
id: raw.id,
startedAt: formatStartedAt(raw.startedAt),
durationLabel: formatDuration(raw.durationMinutes),
status: raw.status,
reason: raw.reason,
};
}
function useFetchOnce<T>(
url: string,
): { data: T | null; loading: boolean; error: boolean; reload: () => void } {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const [version, setVersion] = useState(0);
useEffect(() => {
if (!url) {
setLoading(false);
return;
}
let cancelled = false;
setLoading(true);
setError(false);
apiFetch<T>(url)
.then((res) => {
if (cancelled) return;
setData(res);
})
.catch(() => {
if (!cancelled) setError(true);
})
.finally(() => {
if (!cancelled) setLoading(false);
});
return () => {
cancelled = true;
};
}, [url, version]);
const reload = useCallback(() => setVersion((v) => v + 1), []);
return { data, loading, error, reload };
}
export function useSocialStats(userId: string | undefined) {
const url = userId ? `/api/social/profile/${userId}` : '';
const { data, loading, error, reload } = useFetchOnce<{
postsCount: number;
followersCount: number;
}>(url);
return {
stats: data
? ({ postsCount: data.postsCount, followersCount: data.followersCount } as SocialStats)
: null,
loading,
error,
reload,
};
}
export function useApprovedDomains() {
const { data, loading, error, reload } = useFetchOnce<ApprovedDomainsData>(
'/api/profile/me/approved-domains',
);
return { domains: data, loading, error, reload };
}
export function useCooldownHistory() {
const { data, loading, error, reload } = useFetchOnce<{
items: BackendCooldownEntry[];
nextCursor: string | null;
}>('/api/profile/me/cooldown-history?limit=20');
const mapped: CooldownHistoryData | null = data
? {
items: data.items.map(mapCooldownEntry),
nextCursor: data.nextCursor,
}
: null;
return { cooldownHistory: mapped, loading, error, reload };
}
export function useSosInsights() {
const { data, loading, error, reload } = useFetchOnce<SosInsightsData>(
'/api/profile/me/sos-insights',
);
return { sosInsights: data, loading, error, reload };
}
export type Demographics = {
birthYear: number | null;
gender: string | null;
maritalStatus: string | null;
employmentStatus: string | null;
shiftWork: boolean | null;
industry: string | null;
jobTenure: string | null;
bundesland: string | null;
city: string | null;
};
type DemographicsResponse = Demographics & {
consentAt: string | null;
withdrawnAt: string | null;
};
export function useDemographics() {
const { data, loading, error, reload } = useFetchOnce<DemographicsResponse>(
'/api/profile/me/demographics',
);
const demographics: Demographics | null = data
? {
birthYear: data.birthYear,
gender: data.gender,
maritalStatus: data.maritalStatus,
employmentStatus: data.employmentStatus,
shiftWork: data.shiftWork,
industry: data.industry,
jobTenure: data.jobTenure,
bundesland: data.bundesland,
city: data.city,
}
: null;
return {
demographics,
consentAt: data?.consentAt ?? null,
withdrawnAt: data?.withdrawnAt ?? null,
loading,
error,
reload,
};
}