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>
190 lines
4.8 KiB
TypeScript
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,
|
|
};
|
|
}
|
|
|