@oxyhq/services 22.11.1 → 22.12.1

package/src/ui/screens/ProfileScreen.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { View, StyleSheet, ActivityIndicator } from 'react-native';
+import { useQuery } from '@tanstack/react-query';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
@@ -11,9 +12,9 @@ import FollowButton from '../components/FollowButton';
 import { useFollow } from '../hooks/useFollow';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 import { getAccountDisplayName, logger, normalizeProfileLinks } from '@oxyhq/core';
-import type { User, ProfileLink } from '@oxyhq/core';
 import { extractErrorMessage } from '../utils/errorHandlers';
 
 interface ProfileScreenProps extends BaseScreenProps {
@@ -32,13 +33,6 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
     // into), so previewing my profile while switched into an org/project/bot
     // resolves "this is mine" against that account, not the session owner.
     const { oxyServices, user: currentUser } = useOxy();
-    const [profile, setProfile] = useState<User | null>(null);
-    const [reputationTotal, setReputationTotal] = useState<number | null>(null);
-    const [postsCount, setPostsCount] = useState<number | null>(null);
-    const [commentsCount, setCommentsCount] = useState<number | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-    const [links, setLinks] = useState<ProfileLink[]>([]);
 
     // Use the follow hook for real follower data
     const {
@@ -59,86 +53,92 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
 
     const currentUserId = normalizeId(currentUser?.id);
     const targetUserId = normalizeId(userId);
-    const isOwnProfile = currentUserId && targetUserId && currentUserId === targetUserId;
+    const isOwnProfile = !!(currentUserId && targetUserId && currentUserId === targetUserId);
 
-    useEffect(() => {
-        if (!userId) {
-            setError('No user ID provided');
-            setIsLoading(false);
-            return;
-        }
-
-        setIsLoading(true);
-        setError(null);
-
-        // Load user profile, reputation total, and stats
-        Promise.all([
-            oxyServices.getUserById(userId).catch((err: unknown) => {
-                // If this is the current user and the API call fails, use current user data as fallback
-                const normalizedCurrentId = normalizeId(currentUser?.id);
-                const normalizedTargetId = normalizeId(userId);
-                if (normalizedCurrentId && normalizedTargetId && normalizedCurrentId === normalizedTargetId) {
-                    return currentUser;
-                }
-                throw err;
-            }),
-            oxyServices.getReputationBalance(userId)
-                .then((balance): { total: number | undefined } => ({ total: balance.total }))
-                .catch((): { total: number | undefined } => ({ total: undefined })),
-            oxyServices.getUserStats ?
-                oxyServices.getUserStats(userId).catch(() => {
-                    return { postCount: 0, commentCount: 0 };
-                }) :
-                Promise.resolve({ postCount: 0, commentCount: 0 })
-        ])
-            .then(([profileRes, reputationRes, statsRes]) => {
-                if (!profileRes) {
-                    setError('Profile data is not available');
-                    setIsLoading(false);
-                    return;
-                }
-
-                setProfile(profileRes);
-                setReputationTotal(typeof reputationRes.total === 'number' ? reputationRes.total : null);
-
-                // Normalize profile links via the shared @oxyhq/core helper.
-                setLinks(normalizeProfileLinks(profileRes.linksMetadata, profileRes.links));
+    // Profile + reputation + stats in ONE React Query (no data-fetch effect). The
+    // reputation/stats reads swallow their own failures; only `getUserById` can
+    // reject the query, and for MY OWN profile a failed fetch falls back to the
+    // active-account snapshot instead of erroring. The key includes both ids so a
+    // switch/own-profile change refetches.
+    const profileQuery = useQuery({
+        queryKey: ['profileScreen', targetUserId, currentUserId],
+        enabled: !!userId,
+        retry: false,
+        queryFn: async () => {
+            // Follower/following counts come from the `useFollow` hook; the stats
+            // read is kept for parity (it warms server-side counters) but its
+            // result is not surfaced in this view, so it is not bound.
+            const [profileRes, reputationRes] = await Promise.all([
+                oxyServices.getUserById(userId).catch((err: unknown) => {
+                    if (isOwnProfile) return currentUser;
+                    logger.error(
+                        'Profile loading error',
+                        err instanceof Error ? err : new Error(String(err)),
+                        { component: 'ProfileScreen' },
+                    );
+                    throw err;
+                }),
+                oxyServices.getReputationBalance(userId)
+                    .then((balance): { total: number | undefined } => ({ total: balance.total }))
+                    .catch((): { total: number | undefined } => ({ total: undefined })),
+                oxyServices.getUserStats
+                    ? oxyServices.getUserStats(userId).catch(() => ({ postCount: 0, commentCount: 0 }))
+                    : Promise.resolve({ postCount: 0, commentCount: 0 }),
+            ]);
+            if (!profileRes) {
+                throw new Error('Profile data is not available');
+            }
+            return {
+                profile: profileRes,
+                reputationTotal: typeof reputationRes.total === 'number' ? reputationRes.total : null,
+                links: normalizeProfileLinks(profileRes.linksMetadata, profileRes.links),
+            };
+        },
+    });
 
-                // Follower/following counts are managed by the `useFollow` hook.
+    const profile = profileQuery.data?.profile ?? null;
+    const reputationTotal = profileQuery.data?.reputationTotal ?? null;
+    const links = profileQuery.data?.links ?? [];
+    const isLoading = !!userId && profileQuery.isLoading;
 
-                // User stats from API
-                setPostsCount(statsRes?.postCount ?? 0);
-                setCommentsCount(statsRes?.commentCount ?? 0);
-            })
-            .catch((err: unknown) => {
-                logger.error('Profile loading error', err instanceof Error ? err : new Error(String(err)), { component: 'ProfileScreen' });
-                // Provide user-friendly error messages based on the error type
-                let errorMessage = 'Failed to load profile';
-
-                // Type guard for error with status property
-                const errorWithStatus = err && typeof err === 'object' && 'status' in err ? err as { status?: number; message?: string } : null;
-                const errorMessageText = extractErrorMessage(err, '');
-
-                if (errorWithStatus?.status === 404 || errorMessageText.includes('not found') || errorMessageText.includes('Resource not found')) {
-                    const normalizedCurrentId = normalizeId(currentUser?.id);
-                    const normalizedTargetId = normalizeId(userId);
-                    if (normalizedCurrentId && normalizedTargetId && normalizedCurrentId === normalizedTargetId) {
-                        errorMessage = 'Unable to load your profile from the server. This may be due to a temporary service issue.';
-                    } else {
-                        errorMessage = 'This user profile could not be found or may have been removed.';
-                    }
-                } else if (errorWithStatus?.status === 403) {
-                    errorMessage = 'You do not have permission to view this profile.';
-                } else if (errorWithStatus?.status === 500) {
-                    errorMessage = 'Server error occurred while loading the profile. Please try again later.';
-                } else if (errorMessageText) {
-                    errorMessage = errorMessageText;
-                }
+    // Friendly, status-aware error copy derived from the query error (no effect).
+    const error = useMemo<string | null>(() => {
+        if (!userId) return 'No user ID provided';
+        if (!profileQuery.isError) return null;
+        const err = profileQuery.error;
+        const errorWithStatus =
+            err && typeof err === 'object' && 'status' in err
+                ? (err as { status?: number; message?: string })
+                : null;
+        const errorMessageText = extractErrorMessage(err, '');
+        if (
+            errorWithStatus?.status === 404 ||
+            errorMessageText.includes('not found') ||
+            errorMessageText.includes('Resource not found')
+        ) {
+            return isOwnProfile
+                ? 'Unable to load your profile from the server. This may be due to a temporary service issue.'
+                : 'This user profile could not be found or may have been removed.';
+        }
+        if (errorWithStatus?.status === 403) {
+            return 'You do not have permission to view this profile.';
+        }
+        if (errorWithStatus?.status === 500) {
+            return 'Server error occurred while loading the profile. Please try again later.';
+        }
+        return errorMessageText || 'Failed to load profile';
+    }, [userId, profileQuery.isError, profileQuery.error, isOwnProfile]);
 
-                setError(errorMessage);
-            })
-            .finally(() => setIsLoading(false));
-    }, [userId, currentUser?.id, oxyServices]);
+    // Display name: the loaded profile's, else the passed handle. Also the nav-bar
+    // title (a stable "Profile" fallback before it resolves), so the banner +
+    // overlapping avatar scroll as content UNDER the shared gradient nav bar.
+    // `onImage` tone keeps the title + close legible over the colored banner.
+    const displayName = profile ? getAccountDisplayName(profile, locale) : username || '';
+    useSurfaceHeader({
+        title: displayName || t('profile.title'),
+        largeTitle: false,
+        tone: 'onImage',
+    });
 
     if (isLoading) {
         return (
@@ -149,35 +149,21 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
     }
 
     if (error) {
+        // The shared nav header owns back/close; the error body is just the alert.
         return (
-            <>
-                <View style={styles.errorHeader} className="px-screen-margin py-space-12 border-b border-border">
-                    {goBack && (
-                        <Button
-                            variant="icon"
-                            size="icon"
-                            onPress={goBack}
-                            accessibilityLabel={t('common.back') || 'Back'}
-                            icon={<Ionicons name="arrow-back" size={22} color={bloomTheme.colors.text} />}
-                        />
-                    )}
-                    <H2 style={styles.errorTitle} className="text-text">
-                        {t('profile.errorTitle') || 'Profile Error'}
-                    </H2>
-                </View>
-                <View style={styles.errorContent} className="px-space-32 gap-space-12 py-space-40">
-                    <Ionicons name="alert-circle" size={48} color={bloomTheme.colors.error} />
-                    <Text style={styles.errorText} className="text-text">{error}</Text>
-                    <Text style={styles.errorSubtext} className="text-text-secondary">
-                        {t('profile.errorSubtext') || "This could happen if the user doesn't exist or the profile service is unavailable."}
-                    </Text>
-                </View>
-            </>
+            <View style={styles.errorContent} className="px-space-32 gap-space-12 py-space-40">
+                <Ionicons name="alert-circle" size={48} color={bloomTheme.colors.error} />
+                <H2 style={styles.errorTitle} className="text-text text-center">
+                    {t('profile.errorTitle') || 'Profile Error'}
+                </H2>
+                <Text style={styles.errorText} className="text-text">{error}</Text>
+                <Text style={styles.errorSubtext} className="text-text-secondary">
+                    {t('profile.errorSubtext') || "This could happen if the user doesn't exist or the profile service is unavailable."}
+                </Text>
+            </View>
         );
     }
 
-    const displayName = profile ? getAccountDisplayName(profile, locale) : username || '';
-
     // The singular `location` field was removed from the User contract; derive
     // the primary place from the `locations` list instead. `locations` is only
     // reachable through the User index signature (typed `unknown`), so narrow it
@@ -362,7 +348,6 @@ const styles = StyleSheet.create({
     statLabel: { fontSize: 14, marginBottom: 2, textAlign: 'center' },
     statAmount: { fontSize: 24, fontWeight: 'bold', textAlign: 'center', letterSpacing: 0.2 },
     // Error state layout
-    errorHeader: { flexDirection: 'row', alignItems: 'center', gap: 16 },
     errorTitle: { fontSize: 20 },
     errorContent: { justifyContent: 'center', alignItems: 'center' },
     errorText: { fontSize: 18, fontWeight: '600', textAlign: 'center' },

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -1,63 +1,30 @@
 import type React from 'react';
-import { useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, Platform, Animated } from 'react-native';
-import AnimatedReanimated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import type { BaseScreenProps } from '../types/navigation';
 import { Avatar } from '@oxyhq/bloom/avatar';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '@oxyhq/bloom';
-import { useAuthStore } from '../stores/authStore';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
 import { H1, Text } from '@oxyhq/bloom/typography';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 import { useUpdateProfile } from '../hooks/mutations/useAccountMutations';
-import { getAccountDisplayName } from '@oxyhq/core';
+import { getAccountDisplayName, type User } from '@oxyhq/core';
 
 const GAP = 12;
 const INNER_GAP = 8;
 
-// Individual animated progress dot
-const AnimatedProgressDot: React.FC<{
-    isActive: boolean;
-    colors: any;
-    styles: any;
-}> = ({ isActive, colors, styles }) => {
-    const width = useSharedValue(isActive ? 12 : 6);
-    const backgroundColor = useSharedValue(isActive ? colors.primary : colors.border);
-
-    useEffect(() => {
-        width.value = withTiming(isActive ? 12 : 6, { duration: 300 });
-        backgroundColor.value = withTiming(
-            isActive ? colors.primary : colors.border,
-            { duration: 300 }
-        );
-    }, [isActive, colors.primary, colors.border, width, backgroundColor]);
-
-    const animatedStyle = useAnimatedStyle(() => ({
-        width: width.value,
-        backgroundColor: backgroundColor.value,
-    }));
-
-    return (
-        <AnimatedReanimated.View
-            style={[
-                styles.progressDot,
-                animatedStyle,
-            ]}
-        />
-    );
-};
-
 /**
  * Post-signup welcome & onboarding screen.
  * - Greets the newly registered user
  * - Lets them immediately set / change their avatar using existing FileManagement picker
  * - Only when the user presses "Continue" do we invoke onAuthenticated to finish flow & close sheet
  */
-const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
+const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
     onAuthenticated,
     theme,
     newUser,
@@ -76,7 +43,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
         border: bloomTheme.colors.border,
         text: bloomTheme.colors.text,
     };
-    const styles = useMemo(() => createStyles(bloomTheme.colors), [bloomTheme.colors]);
+    const styles = useMemo(() => createStyles(), []);
 
     // Animation state
     const fadeAnim = useRef(new Animated.Value(1)).current;
@@ -194,6 +161,22 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
         openChangeAvatarSurface();
     }, [openChangeAvatarSurface, currentStep, avatarStepIndex, animateToStepCallback]);
 
+    // Shared Dialog nav header: a stable "Welcome" title, the wizard `progress`
+    // bar (replacing the old in-content dots), and a back affordance that steps the
+    // wizard back once past the intro (the step CTAs keep their own
+    // Back/Skip/Next/Enter buttons as content; the header's close dismisses,
+    // matching the pre-existing backdrop-dismiss).
+    const progress = useMemo(
+        () => ({ step: currentStep + 1, total: totalSteps }),
+        [currentStep, totalSteps],
+    );
+    useSurfaceHeader({
+        title: t('welcomeNew.navTitle'),
+        largeTitle: false,
+        onBack: currentStep > 0 ? prevStep : undefined,
+        progress,
+    });
+
     const step = steps[currentStep];
     const renderActionButtons = useCallback(() => {
         if (currentStep === totalSteps - 1) {
@@ -260,16 +243,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
 
     return (
         <View style={styles.container}>
-            <View style={styles.progressContainer}>
-                {steps.map((s, i) => (
-                    <AnimatedProgressDot
-                        key={s.key}
-                        isActive={i === currentStep}
-                        colors={colors}
-                        styles={styles}
-                    />
-                ))}
-            </View>
+            {/* Step progress now lives in the shared Dialog header (`progress`). */}
             <Animated.View style={{ opacity: fadeAnim, transform: [{ translateX: slideAnim }] }}>
                 <View style={[styles.scrollInner, styles.contentContainer]}>
                     <View style={[styles.header, styles.sectionSpacing]}>
@@ -337,7 +311,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
 
 };
 
-const createStyles = (colors: ReturnType<typeof useTheme>['colors']) => {
+const createStyles = () => {
     return StyleSheet.create({
         container: {
             width: '100%',
@@ -400,20 +374,6 @@ const createStyles = (colors: ReturnType<typeof useTheme>['colors']) => {
         avatar: {
             marginBottom: INNER_GAP,
         },
-        progressContainer: {
-            flexDirection: 'row',
-            width: '100%',
-            justifyContent: 'center',
-            marginTop: 24, // Space for bottom sheet handle (~20px) + small buffer
-            marginBottom: 24, // Equal spacing below dots
-        },
-        progressDot: {
-            height: 6,
-            width: 6,
-            borderRadius: 3,
-            marginHorizontal: 3,
-            backgroundColor: colors.border,
-        },
     });
 };