Update API base URL for local development; implement fetch timeout handling for improved request management

src/components/screens/TeamScreen.js

@@ -1,25 +1,185 @@
-import React from 'react';
-import {StyleSheet, Text} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {ActivityIndicator, ScrollView, StyleSheet, Text, TextInput, View} from 'react-native';
 import Screen from '../layout/Screen';
+import {Button, ButtonTray} from '../UI/Button';
+import useGameHook from '../../hooks/useGameHook';
+import {getSession, setSessionTeam} from '../../hooks/SessionStore';
 
 const TeamScreen = () => {
-//   Initialisation -------------
+//   Initialisation ------------
+
+    const session = getSession();
+    const {getTeam, createTeam, joinTeamByCode, getTeamMembers, leaveTeam, getUser, updateUser} = useGameHook();
+
 //   State ----------------------
+
+    const [activeTid, setActiveTid] = useState(session.currentTid);
+    const [teamCode, setTeamCode] = useState('');
+    const [team, setTeam] = useState(null);
+    const [members, setMembers] = useState([]);
+    const [memberNames, setMemberNames] = useState({});
+    const [loading, setLoading] = useState(true);
+
 //   Handlers -------------------
+
+    useEffect(() => {
+        const load = async () => {
+            if (activeTid) {
+                const t = await getTeam(activeTid);
+                setTeam(t);
+                const ms = await getTeamMembers(activeTid);
+                setMembers(ms || []);
+                const names = {};
+                for (const m of (ms || [])) {
+                    const u = await getUser(m.Uid);
+                    if (u) names[m.Uid] = u.username;
+                }
+                setMemberNames(names);
+            }
+            setLoading(false);
+        };
+        load();
+    }, [activeTid]);
+
+    const handleJoinTeam = async () => {
+        if (!teamCode.trim()) return;
+        const result = await joinTeamByCode({JoinCode: teamCode.trim(), Uid: session.currentUid});
+        if (!result) return;
+        setSessionTeam(result.Tid);
+        setActiveTid(result.Tid);
+    };
+
+    const handleCreateTeam = async () => {
+        if (!session.currentGid) return;
+        const result = await createTeam({Gid: session.currentGid, TeamName: 'My Team'});
+        if (!result) return;
+        const membership = await joinTeamByCode({Tid: result.Tid, Uid: session.currentUid});
+        if (membership) {
+            setSessionTeam(result.Tid);
+            setActiveTid(result.Tid);
+        }
+    };
+
+    const handleLeaveTeam = async () => {
+        const myMembership = members.find((m) => m.Uid === session.currentUid);
+        if (!myMembership) return;
+        await leaveTeam(myMembership.id);
+        await updateUser(session.currentUid, {TGid: null});
+        setSessionTeam(null);
+        setActiveTid(null);
+        setTeam(null);
+        setMembers([]);
+        setMemberNames({});
+    };
+
 //   View -----------------------
 
+    if (loading) {
+        return (
+            <Screen style={styles.center}>
+                <ActivityIndicator size="large"/>
+            </Screen>
+        );
+    }
+
+    // Not in a team
+    if (!activeTid || !team) {
+        return (
+            <Screen style={styles.center}>
+                <View style={styles.row}>
+                    <TextInput
+                        style={styles.codeInput}
+                        placeholder="Enter Team Code"
+                        value={teamCode}
+                        onChangeText={setTeamCode}
+                        autoCapitalize="characters"
+                    />
+                    <Button
+                        label="Join"
+                        onClick={handleJoinTeam}
+                        styleButton={styles.joinButton}
+                        styleLabel={styles.joinLabel}
+                    />
+                </View>
+                <ButtonTray>
+                    <Button
+                        label="Create Team"
+                        onClick={handleCreateTeam}
+                        styleButton={styles.createButton}
+                        styleLabel={styles.createLabel}
+                    />
+                </ButtonTray>
+            </Screen>
+        );
+    }
+
+    // In a team
     return (
         <Screen style={styles.container}>
-            <Text style={styles.title}>Team Management</Text>
-            <Text style={styles.body}>Team management setup goes here.</Text>
+            <View style={styles.teamHeader}>
+                <Text style={styles.teamCodeLabel}>Team Code:</Text>
+                <Text style={styles.teamCodeValue}>{team.JoinCode}</Text>
+            </View>
+            <ScrollView style={styles.memberList}>
+                {members.map((m) => (
+                    <View key={m.id} style={styles.memberItem}>
+                        <Text style={styles.memberName}>{memberNames[m.Uid] || `Player ${m.Uid}`}</Text>
+                    </View>
+                ))}
+                {members.length === 0 && (
+                    <Text style={styles.emptyText}>No members yet.</Text>
+                )}
+            </ScrollView>
+            <View style={styles.leaveWrap}>
+                <Button
+                    label="Leave Team"
+                    onClick={handleLeaveTeam}
+                    styleButton={styles.leaveButton}
+                    styleLabel={styles.leaveLabel}
+                />
+            </View>
         </Screen>
     );
 };
 
 const styles = StyleSheet.create({
-    container: {justifyContent: 'center', alignItems: 'center'},
-    title: {fontSize: 24, fontWeight: 'bold'},
-    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
+    center: {justifyContent: 'center', alignItems: 'center'},
+    container: {padding: 0},
+    row: {flexDirection: 'row', gap: 10, marginBottom: 15, width: '100%', paddingHorizontal: 20},
+    codeInput: {
+        flex: 1,
+        borderWidth: 1,
+        borderColor: '#d1d5db',
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        fontSize: 16,
+    },
+    joinButton: {backgroundColor: '#2563eb', borderColor: '#2563eb', flex: 0, paddingHorizontal: 20},
+    joinLabel: {color: '#ffffff', fontWeight: '600'},
+    createButton: {backgroundColor: '#16a34a', borderColor: '#16a34a'},
+    createLabel: {color: '#ffffff', fontWeight: '600'},
+    teamHeader: {
+        backgroundColor: '#374151',
+        paddingVertical: 14,
+        paddingHorizontal: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    teamCodeLabel: {color: '#d1d5db', fontSize: 15, fontWeight: '600'},
+    teamCodeValue: {color: '#ffffff', fontSize: 17, fontWeight: '700', letterSpacing: 2},
+    memberList: {flex: 1, paddingHorizontal: 15, paddingTop: 10},
+    memberItem: {
+        paddingVertical: 14,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e5e7eb',
+    },
+    memberName: {fontSize: 16, color: '#1f2937'},
+    emptyText: {color: '#9ca3af', textAlign: 'center', marginTop: 30, fontSize: 14},
+    leaveWrap: {padding: 15},
+    leaveButton: {backgroundColor: '#dc2626', borderColor: '#dc2626'},
+    leaveLabel: {color: '#ffffff', fontWeight: '600'},
 });
 
 export default TeamScreen;