@squad-sports/react-native 1.3.1

package/src/screens/polls/PollResponseScreen.tsx

@@ -0,0 +1,229 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  Pressable,
+} from 'react-native';
+import { useRoute, useNavigation } from '@react-navigation/native';
+import type { RouteProp } from '@react-navigation/native';
+
+import type { RootStackParamList } from '../../navigation/SquadNavigator';
+import { useApiClient } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import Button from '../../components/ux/buttons/Button';
+import { TitleMedium, BodyRegular, BodySmall } from '../../components/ux/text/Typography';
+
+type Route = RouteProp<RootStackParamList, 'PollResponse'>;
+
+interface PollOption {
+  id: string;
+  text: string;
+  voteCount: number;
+  percentage: number;
+}
+
+export function PollResponseScreen() {
+  const route = useRoute<Route>();
+  const navigation = useNavigation();
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+
+  const { pollId } = route.params;
+  const [question, setQuestion] = useState('');
+  const [options, setOptions] = useState<PollOption[]>([]);
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+  const [hasVoted, setHasVoted] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    const loadPoll = async () => {
+      try {
+        const polls = await apiClient.getActivePolls();
+        const poll = polls?.polls?.find((p: any) => p.id === pollId);
+        if (poll) {
+          setQuestion((poll as any).question ?? '');
+          setOptions(
+            (poll.options ?? []).map((o: any, i: number) => ({
+              id: o.id ?? String(i),
+              text: o.text ?? '',
+              voteCount: o.voteCount ?? 0,
+              percentage: o.percentage ?? 0,
+            })),
+          );
+        }
+      } catch (err) {
+        console.error('[PollResponse] Error loading poll:', err);
+      }
+    };
+    loadPoll();
+  }, [pollId, apiClient]);
+
+  const handleVote = useCallback(async () => {
+    if (!selectedOption || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      const { PollResponse } = await import('@squad-sports/core');
+      const response = new PollResponse({
+        optionId: selectedOption,
+      } as any);
+      await apiClient.createOrUpdatePollResponse(pollId, response);
+      setHasVoted(true);
+    } catch (err) {
+      console.error('[PollResponse] Error voting:', err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [selectedOption, pollId, apiClient, isSubmitting]);
+
+  const renderOption = useCallback(
+    ({ item }: { item: PollOption }) => {
+      const isSelected = selectedOption === item.id;
+
+      return (
+        <Pressable
+          style={[
+            styles.option,
+            isSelected && [styles.optionSelected, { borderColor: theme.buttonColor }],
+          ]}
+          onPress={() => !hasVoted && setSelectedOption(item.id)}
+          disabled={hasVoted}
+        >
+          <View style={styles.optionContent}>
+            <BodyRegular style={styles.optionText}>{item.text}</BodyRegular>
+            {hasVoted && (
+              <BodySmall style={styles.optionPercent}>
+                {Math.round(item.percentage)}%
+              </BodySmall>
+            )}
+          </View>
+          {hasVoted && (
+            <View style={styles.progressBarBg}>
+              <View
+                style={[
+                  styles.progressBarFill,
+                  {
+                    width: `${item.percentage}%`,
+                    backgroundColor: isSelected ? theme.buttonColor : Colors.gray5,
+                  },
+                ]}
+              />
+            </View>
+          )}
+        </Pressable>
+      );
+    },
+    [selectedOption, hasVoted, theme.buttonColor],
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Poll" />
+
+      <View style={styles.content}>
+        <TitleMedium style={styles.question}>{question}</TitleMedium>
+
+        <FlatList
+          data={options}
+          keyExtractor={item => item.id}
+          renderItem={renderOption}
+          contentContainerStyle={styles.optionsList}
+          scrollEnabled={false}
+        />
+      </View>
+
+      {!hasVoted && (
+        <View style={styles.footer}>
+          <Button
+            style={[
+              styles.voteButton,
+              { backgroundColor: selectedOption ? theme.buttonColor : Colors.gray2 },
+            ]}
+            onPress={handleVote}
+            disabled={!selectedOption || isSubmitting}
+          >
+            <Text
+              style={[
+                styles.voteButtonText,
+                { color: selectedOption ? theme.buttonText : Colors.gray6 },
+              ]}
+            >
+              {isSubmitting ? 'Submitting...' : 'Vote'}
+            </Text>
+          </Button>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 24,
+    paddingTop: 16,
+  },
+  question: {
+    color: Colors.white,
+    marginBottom: 24,
+  },
+  optionsList: {
+    gap: 8,
+  },
+  option: {
+    backgroundColor: Colors.gray2,
+    borderRadius: 12,
+    padding: 16,
+    borderWidth: 2,
+    borderColor: 'transparent',
+    overflow: 'hidden',
+  },
+  optionSelected: {
+    backgroundColor: 'rgba(110, 130, 231, 0.1)',
+  },
+  optionContent: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  optionText: {
+    color: Colors.white,
+    flex: 1,
+  },
+  optionPercent: {
+    color: Colors.gray6,
+    marginLeft: 8,
+    fontWeight: '600',
+  },
+  progressBarBg: {
+    height: 4,
+    backgroundColor: Colors.gray3,
+    borderRadius: 2,
+    marginTop: 8,
+    overflow: 'hidden',
+  },
+  progressBarFill: {
+    height: '100%',
+    borderRadius: 2,
+  },
+  footer: {
+    paddingHorizontal: 24,
+    paddingBottom: 32,
+  },
+  voteButton: {
+    height: 56,
+    borderRadius: 28,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  voteButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/screens/polls/PollSummationScreen.tsx

@@ -0,0 +1,78 @@
+/**
+ * Poll summation/results screen.
+ * Ported from squad-demo/src/screens/PollSummation.tsx.
+ */
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet, FlatList } from 'react-native';
+import { useRoute } from '@react-navigation/native';
+import { useApiClient } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import { PollUserReaction, PollSummationSelector } from '../../components/poll/PollComponents';
+import { TitleSmall, BodyRegular, BodySmall } from '../../components/ux/text/Typography';
+
+export function PollSummationScreen() {
+  const route = useRoute<any>();
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+
+  const pollId = route.params?.pollId;
+  const [question, setQuestion] = useState('');
+  const [options, setOptions] = useState<any[]>([]);
+  const [responses, setResponses] = useState<any[]>([]);
+  const [totalVotes, setTotalVotes] = useState(0);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const polls = await apiClient.getActivePolls();
+        const poll = polls?.polls?.find((p: any) => p.id === pollId);
+        if (poll) {
+          setQuestion((poll as any).question ?? '');
+          setOptions((poll as any).options ?? []);
+          setTotalVotes((poll as any).totalVotes ?? 0);
+        }
+      } catch {}
+    };
+    load();
+  }, [pollId, apiClient]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Poll Results" />
+
+      <View style={styles.content}>
+        <TitleSmall style={styles.question}>{question}</TitleSmall>
+        <BodySmall style={styles.totalVotes}>{totalVotes} total votes</BodySmall>
+
+        {options.map((opt: any) => (
+          <View key={opt.id} style={styles.optionRow}>
+            <View style={styles.optionHeader}>
+              <BodyRegular style={styles.optionText}>{opt.text}</BodyRegular>
+              <BodySmall style={styles.optionPercent}>{Math.round(opt.percentage ?? 0)}%</BodySmall>
+            </View>
+            <View style={styles.progressBg}>
+              <View style={[styles.progressFill, {
+                width: `${opt.percentage ?? 0}%`,
+                backgroundColor: theme.buttonColor,
+              }]} />
+            </View>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: { padding: 24 },
+  question: { color: Colors.white, marginBottom: 8 },
+  totalVotes: { color: Colors.gray6, marginBottom: 24 },
+  optionRow: { marginBottom: 16 },
+  optionHeader: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 },
+  optionText: { color: Colors.white },
+  optionPercent: { color: Colors.gray6, fontWeight: '600' },
+  progressBg: { height: 6, backgroundColor: Colors.gray3, borderRadius: 3, overflow: 'hidden' },
+  progressFill: { height: '100%', borderRadius: 3 },
+});

package/src/screens/profile/ProfileScreen.tsx

@@ -0,0 +1,234 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  RefreshControl,
+  Pressable,
+} from 'react-native';
+import { useRoute, useNavigation } from '@react-navigation/native';
+import type { RouteProp } from '@react-navigation/native';
+
+import type { RootStackParamList } from '../../navigation/SquadNavigator';
+import { useApiClient } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import UserImage from '../../components/ux/user-image/UserImage';
+import Button from '../../components/ux/buttons/Button';
+import {
+  TitleMedium,
+  TitleSmall,
+  BodyRegular,
+  BodyMedium,
+  BodySmall,
+} from '../../components/ux/text/Typography';
+import type { User, UserActivity } from '@squad-sports/core';
+
+type Route = RouteProp<RootStackParamList, 'Profile'>;
+
+export function ProfileScreen() {
+  const route = useRoute<Route>();
+  const navigation = useNavigation();
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+
+  const { userId } = route.params;
+  const [user, setUser] = useState<User | null>(null);
+  const [activity, setActivity] = useState<UserActivity | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const [isOwnProfile, setIsOwnProfile] = useState(false);
+
+  const loadProfile = useCallback(async () => {
+    try {
+      const [userData, activityData, loggedInUser] = await Promise.all([
+        apiClient.getUser(userId),
+        apiClient.getUserActivity(userId),
+        apiClient.getLoggedInUser(),
+      ]);
+      setUser(userData);
+      setActivity(activityData);
+      setIsOwnProfile(loggedInUser?.id === userId);
+    } catch (err) {
+      console.error('[Profile] Error loading profile:', err);
+    }
+  }, [userId, apiClient]);
+
+  useEffect(() => {
+    loadProfile();
+  }, [loadProfile]);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await loadProfile();
+    setRefreshing(false);
+  }, [loadProfile]);
+
+  if (!user) return null;
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader
+        title={isOwnProfile ? 'My Profile' : user.displayName ?? ''}
+        right={
+          isOwnProfile ? (
+            <Pressable onPress={() => (navigation as any).navigate('Settings')}>
+              <Text style={styles.settingsIcon}>{'...'}</Text>
+            </Pressable>
+          ) : undefined
+        }
+      />
+
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={Colors.white} />
+        }
+      >
+        <View style={styles.profileHeader}>
+          <UserImage
+            imageUrl={user.imageUrl}
+            displayName={user.displayName}
+            size={96}
+          />
+          <TitleMedium style={styles.displayName}>
+            {user.displayName}
+          </TitleMedium>
+          {user.community && (
+            <BodyMedium style={styles.community}>{user.community}</BodyMedium>
+          )}
+        </View>
+
+        {activity && (
+          <View style={styles.statsRow}>
+            <View style={styles.stat}>
+              <TitleSmall style={styles.statValue}>
+                {(activity as any).freestyleCount ?? activity.freestylesSent ?? 0}
+              </TitleSmall>
+              <BodySmall style={styles.statLabel}>Freestyles</BodySmall>
+            </View>
+            <View style={styles.statDivider} />
+            <View style={styles.stat}>
+              <TitleSmall style={styles.statValue}>
+                {(activity as any).messageCount ?? activity.messagesSent ?? 0}
+              </TitleSmall>
+              <BodySmall style={styles.statLabel}>Messages</BodySmall>
+            </View>
+            <View style={styles.statDivider} />
+            <View style={styles.stat}>
+              <TitleSmall style={styles.statValue}>
+                {(activity as any).callCount ?? activity.callsMade ?? 0}
+              </TitleSmall>
+              <BodySmall style={styles.statLabel}>Calls</BodySmall>
+            </View>
+          </View>
+        )}
+
+        {!isOwnProfile && (
+          <View style={styles.actions}>
+            <Button
+              style={[styles.actionButton, { backgroundColor: theme.buttonColor }]}
+              onPress={() =>
+                (navigation as any).navigate('Messaging', { connectionId: userId })
+              }
+            >
+              <Text style={[styles.actionButtonText, { color: theme.buttonText }]}>
+                Message
+              </Text>
+            </Button>
+            <Button
+              style={styles.actionButtonOutline}
+              onPress={() =>
+                (navigation as any).navigate('AddCallTitle', { connectionId: userId })
+              }
+            >
+              <Text style={styles.actionButtonOutlineText}>Call</Text>
+            </Button>
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingHorizontal: 24,
+    paddingBottom: 48,
+  },
+  profileHeader: {
+    alignItems: 'center',
+    paddingTop: 16,
+    paddingBottom: 24,
+  },
+  displayName: {
+    color: Colors.white,
+    marginTop: 12,
+  },
+  community: {
+    color: Colors.gray6,
+    marginTop: 4,
+  },
+  statsRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 20,
+    backgroundColor: Colors.gray2,
+    borderRadius: 12,
+    marginBottom: 24,
+  },
+  stat: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  statValue: {
+    color: Colors.white,
+  },
+  statLabel: {
+    color: Colors.gray6,
+    marginTop: 4,
+  },
+  statDivider: {
+    width: 1,
+    height: 32,
+    backgroundColor: Colors.gray5,
+  },
+  actions: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  actionButton: {
+    flex: 1,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  actionButtonText: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  actionButtonOutline: {
+    flex: 1,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Colors.gray5,
+  },
+  actionButtonOutlineText: {
+    color: Colors.white,
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  settingsIcon: {
+    color: Colors.white,
+    fontSize: 20,
+    fontWeight: '700',
+  },
+});

package/src/screens/settings/BlockedUsersScreen.tsx

@@ -0,0 +1,139 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  Alert,
+} from 'react-native';
+
+import { useApiClient } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import Button from '../../components/ux/buttons/Button';
+import UserImage from '../../components/ux/user-image/UserImage';
+import { BodyRegular, BodyMedium } from '../../components/ux/text/Typography';
+import type { User } from '@squad-sports/core';
+
+interface BlockedUserItem {
+  id: string;
+  displayName: string;
+  imageUrl?: string;
+}
+
+export function BlockedUsersScreen() {
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+  const [blockedUsers, setBlockedUsers] = useState<BlockedUserItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadBlocked = async () => {
+      try {
+        // Get connections and filter for blocked status
+        const squad = await apiClient.getUserConnections(true);
+        if (squad?.connections) {
+          const blocked = squad.connections
+            .filter((c: any) => c.status === 6) // CONNECTION_STATUS_BLOCKED
+            .map((c: any) => {
+              const other = c.recipient ?? c.creator;
+              return {
+                id: other?.id ?? c.id,
+                displayName: other?.displayName ?? 'Unknown',
+                imageUrl: other?.imageUrl,
+              };
+            });
+          setBlockedUsers(blocked);
+        }
+      } catch (err) {
+        console.error('[BlockedUsers] Error loading:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadBlocked();
+  }, [apiClient]);
+
+  const handleUnblock = useCallback(
+    async (userId: string, displayName: string) => {
+      Alert.alert(
+        'Unblock User',
+        `Are you sure you want to unblock ${displayName}?`,
+        [
+          { text: 'Cancel', style: 'cancel' },
+          {
+            text: 'Unblock',
+            onPress: async () => {
+              try {
+                const { User } = await import('@squad-sports/core');
+                const user = new User({ id: userId });
+                await apiClient.unblockUser(user);
+                setBlockedUsers(prev => prev.filter(u => u.id !== userId));
+              } catch {
+                Alert.alert('Error', 'Failed to unblock user.');
+              }
+            },
+          },
+        ],
+      );
+    },
+    [apiClient],
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Blocked Users" />
+
+      {blockedUsers.length === 0 && !loading ? (
+        <View style={styles.emptyState}>
+          <BodyRegular style={styles.emptyText}>
+            No blocked users
+          </BodyRegular>
+          <BodyMedium style={styles.emptySubtext}>
+            Users you block will appear here
+          </BodyMedium>
+        </View>
+      ) : (
+        <FlatList
+          data={blockedUsers}
+          keyExtractor={item => item.id}
+          contentContainerStyle={styles.list}
+          renderItem={({ item }) => (
+            <View style={styles.row}>
+              <UserImage
+                imageUrl={item.imageUrl}
+                displayName={item.displayName}
+                size={44}
+              />
+              <BodyRegular style={styles.name}>{item.displayName}</BodyRegular>
+              <Button
+                style={styles.unblockButton}
+                onPress={() => handleUnblock(item.id, item.displayName)}
+              >
+                <Text style={styles.unblockText}>Unblock</Text>
+              </Button>
+            </View>
+          )}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  list: { paddingHorizontal: 24 },
+  row: {
+    flexDirection: 'row', alignItems: 'center', paddingVertical: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: Colors.gray3,
+  },
+  name: { color: Colors.white, flex: 1, marginLeft: 12 },
+  unblockButton: {
+    paddingVertical: 6, paddingHorizontal: 16,
+    borderRadius: 16, borderWidth: 1, borderColor: Colors.gray5,
+  },
+  unblockText: { color: Colors.white, fontSize: 13 },
+  emptyState: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  emptyText: { color: Colors.white, marginBottom: 4 },
+  emptySubtext: { color: Colors.gray6 },
+});