Function App

frontend/src/App.tsx:168–308

()

}

export function App() {
  const [config, setConfig] = useState<AppConfig | null>(null);
  const [participant, setParticipant] = useState<Participant | null>(null);
  const [challenges, setChallenges] = useState<Challenge[]>([]);
  const [activeChallengeId, setActiveChallengeId] = useState<string>("");
  const [view, setView] = useState<View>("home");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const challengeId = params.get("challenge");
    if (challengeId) {
      setActiveChallengeId(challengeId);
      setView("challenge");
    }
    Promise.all([api.config(), api.me(), api.listChallenges()])
      .then(([cfg, me, list]) => {
        setConfig(cfg);
        setParticipant(me.participant);
        setChallenges(list.challenges);
        if (!challengeId && list.challenges[0]) {
          setActiveChallengeId(list.challenges[0].id);
        }
      })
      .catch((err) => setError(String(err)))
      .finally(() => setLoading(false));
  }, []);

  async function refreshChallenges() {
    const list = await api.listChallenges();
    setChallenges(list.challenges);
    if (!activeChallengeId && list.challenges[0]) {
      setActiveChallengeId(list.challenges[0].id);
    }
  }

  const activeChallenge = challenges.find((item) => item.id === activeChallengeId);
  const challengePage = view === "challenge";

  return (
    <main className={`appShell ${challengePage ? "challengeShell" : ""}`}>
      {!challengePage ? (
        <header className="topBar">
          <button className="brand" onClick={() => setView("home")}>
            <span className="brandMark">
              <Compass size={19} />
            </span>
            <span>
              <strong>点亮挑战 (MapGoGoGo)</strong>
              <small>勾选地图区域，一起点亮</small>
            </span>
          </button>
          <nav>
            <button className={view === "home" ? "active" : ""} onClick={() => setView("home")}>
              挑战
            </button>
            <button className={view === "create" ? "active" : ""} onClick={() => setView("create")}>