Editing Openai/693f3576-eaf4-8011-9c02-8476c83275fd (section)

===== Replace App.js with this: =====

<syntaxhighlight lang="js">import React, { useEffect, useMemo, useState } from "react";
import { SafeAreaView, View, Text, TextInput, Pressable, Switch, StyleSheet, Alert } from "react-native";
import { onAuthStateChanged, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from "firebase/auth";
import { addDoc, collection, serverTimestamp } from "firebase/firestore";
import { auth, db } from "./src/firebase";

function Button({ title, onPress, variant = "primary" }) {
  return (
    <Pressable
      onPress={onPress}
      style={[styles.button, variant === "secondary" && styles.buttonSecondary]}
    >
      <Text style={[styles.buttonText, variant === "secondary" && styles.buttonTextSecondary]}>
        {title}
      </Text>
    </Pressable>
  );
}

function AuthScreen({ mode, onSwitchMode }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const isSignup = mode === "signup";

  const handleSubmit = async () => {
    if (!email.trim() || !password) {
      Alert.alert("Missing info", "Please enter email and password.");
      return;
    }

    try {
      if (isSignup) {
        await createUserWithEmailAndPassword(auth, email.trim(), password);
      } else {
        await signInWithEmailAndPassword(auth, email.trim(), password);
      }
    } catch (e) {
      Alert.alert("Auth error", e?.message ?? "Something went wrong.");
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>PBYSA Umpire Check-In</Text>
      <Text style={styles.subtitle}>{isSignup ? "Create Account" : "Log In"}</Text>

      <View style={styles.card}>
        <Text style={styles.label}>Email</Text>
        <TextInput
          autoCapitalize="none"
          keyboardType="email-address"
          value={email}
          onChangeText={setEmail}
          placeholder="you@example.com"
          style={styles.input}
        />

        <Text style={styles.label}>Password</Text>
        <TextInput
          secureTextEntry
          value={password}
          onChangeText={setPassword}
          placeholder="••••••••"
          style={styles.input}
        />

        <Button title={isSignup ? "Create Account" : "Log In"} onPress={handleSubmit} />

        <View style={{ height: 10 }} />

        <Button
          title={isSignup ? "Already have an account? Log in" : "New here? Create an account"}
          onPress={onSwitchMode}
          variant="secondary"
        />
      </View>

      <Text style={styles.footer}>Umpires can submit a check-in to confirm they worked.</Text>
    </SafeAreaView>
  );
}

function CheckInScreen({ user }) {
  const [division, setDivision] = useState("");
  const [onlyUmpire, setOnlyUmpire] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const now = useMemo(() => new Date(), []);
  const [clock, setClock] = useState(new Date());

  useEffect(() => {
    const t = setInterval(() => setClock(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  const formattedDate = clock.toLocaleDateString();
  const formattedTime = clock.toLocaleTimeString();

  const submit = async () => {
    if (!division.trim()) {
      Alert.alert("Missing division", "Please enter the division.");
      return;
    }

    setSubmitting(true);
    try {
      await addDoc(collection(db, "checkins"), {
        userId: user.uid,
        email: user.email ?? "",
        division: division.trim(),
        onlyUmpire,
        // server timestamp ensures consistency and prevents device clock issues
        createdAt: serverTimestamp(),
        // optional: also store device time for display/debug
        deviceDate: formattedDate,
        deviceTime: formattedTime,
      });

      Alert.alert("Submitted!", "Your check-in has been recorded.");
      setDivision("");
      setOnlyUmpire(false);
    } catch (e) {
      Alert.alert("Submit error", e?.message ?? "Something went wrong submitting your check-in.");
    } finally {
      setSubmitting(false);
    }
  };

  const logout = async () => {
    try {
      await signOut(auth);
    } catch (e) {
      Alert.alert("Logout error", e?.message ?? "Could not log out.");
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>PBYSA Umpire Check-In</Text>
      <Text style={styles.subtitle}>Welcome, {user.email}</Text>

      <View style={styles.card}>
        <Text style={styles.label}>Date</Text>
        <Text style={styles.readonly}>{formattedDate}</Text>

        <Text style={styles.label}>Time</Text>
        <Text style={styles.readonly}>{formattedTime}</Text>

        <Text style={styles.label}>What division?</Text>
        <TextInput
          value={division}
          onChangeText={setDivision}
          placeholder="Example: 8U, 10U, Majors..."
          style={styles.input}
        />

        <View style={styles.row}>
          <View style={{ flex: 1 }}>
            <Text style={styles.label}>Are you the only umpire?</Text>
            <Text style={styles.hint}>{onlyUmpire ? "Yes" : "No"}</Text>
          </View>
          <Switch value={onlyUmpire} onValueChange={setOnlyUmpire} />
        </View>

        <Button title={submitting ? "Submitting..." : "Submit Check-In"} onPress={submit} />
        <View style={{ height: 10 }} />
        <Button title="Log Out" onPress={logout} variant="secondary" />
      </View>

      <Text style={styles.footer}>
        Check-ins automatically include date/time and your account email.
      </Text>
    </SafeAreaView>
  );
}

export default function App() {
  const [user, setUser] = useState(null);
  const [mode, setMode] = useState("login"); // "login" | "signup"
  const [loadingAuth, setLoadingAuth] = useState(true);

  useEffect(() => {
    const unsub = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setLoadingAuth(false);
    });
    return () => unsub();
  }, []);

  if (loadingAuth) {
    return (
      <SafeAreaView style={styles.container}>
        <Text style={styles.title}>PBYSA Umpire Check-In</Text>
        <Text style={styles.subtitle}>Loading…</Text>
      </SafeAreaView>
    );
  }

  if (!user) {
    return (
      <AuthScreen
        mode={mode}
        onSwitchMode={() => setMode((m) => (m === "login" ? "signup" : "login"))}
      />
    );
  }

  return <CheckInScreen user={user} />;
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 18, backgroundColor: "#fff" },
  title: { fontSize: 26, fontWeight: "700", marginTop: 8 },
  subtitle: { fontSize: 16, marginTop: 6, marginBottom: 14, color: "#333" },
  card: {
    borderWidth: 1,
    borderColor: "#eee",
    borderRadius: 14,
    padding: 16,
    backgroundColor: "#fafafa",
  },
  label: { fontSize: 14, fontWeight: "600", marginTop: 10, marginBottom: 6 },
  hint: { fontSize: 12, color: "#666" },
  input: {
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
    backgroundColor: "#fff",
  },
  readonly: { fontSize: 16, paddingVertical: 6 },
  row: { flexDirection: "row", alignItems: "center", marginTop: 10 },
  button: {
    marginTop: 16,
    borderRadius: 12,
    paddingVertical: 12,
    alignItems: "center",
    backgroundColor: "#111",
  },
  buttonSecondary: { backgroundColor: "#fff", borderWidth: 1, borderColor: "#111" },
  buttonText: { color: "#fff", fontWeight: "700" },
  buttonTextSecondary: { color: "#111" },
  footer: { marginTop: 14, color: "#666" },
});

</syntaxhighlight>

===== <syntaxhighlight lang="bash">npx expo start =====

</syntaxhighlight>

Scan the QR code with Expo Go (iOS/Android) to test.