Back

Version 24

9/11/2024
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { marked } from "https://esm.sh/marked@4.3.0";

function App() {
const [sport, setSport] = useState("");
const [skillLevel, setSkillLevel] = useState("");
const [ageGroup, setAgeGroup] = useState("");
const [regenerateKey, setRegenerateKey] = useState(0);
const [selectedTopics, setSelectedTopics] = useState([]);
const [groupSize, setGroupSize] = useState("");
const [trainingPlan, setTrainingPlan] = useState("");
const [loading, setLoading] = useState(false);
const [showSpinner, setShowSpinner] = useState(false);
const [sharing, setSharing] = useState(false);

useEffect(() => {
let timer;
if (loading) {
timer = setTimeout(() => setShowSpinner(true), 2000);
} else {
setShowSpinner(false);
}
return () => clearTimeout(timer);
}, [loading]);

const handleSubmit = async (e, isRegenerate = false) => {
if (e) e.preventDefault();
setLoading(true);
setTrainingPlan("");
const response = await fetch("/generate-training", {
method: "POST",
headers: { "Content-Type": "application/json", "Regenerate-Key": regenerateKey.toString() },
body: JSON.stringify({ sport, skillLevel, ageGroup, groupSize, selectedTopics }),
});