@wasto/cms-components 1.5.10 → 1.5.11

package/src/components/challenge/QuizModal.tsx

@@ -1,381 +1,381 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import {
-    ActivityIndicator,
-    Dimensions,
-    Pressable,
-    ScrollView,
-    StyleSheet,
-    Text,
-    View,
-} from "react-native";
-import { Image } from "expo-image";
-import { ChallengeSeriesWithProgress, useChallenges } from "../../hooks/useChallenges";
-import { useNextCollection } from "../../hooks/useNextCollection";
-import { useTheme } from "../../contexts/ThemeContext";
-import { useLocal } from "../../contexts/LocalContext";
-import { useWastoClient } from "../../hooks/useWastoClient";
-import { Theme } from "../../types/Theme";
-import { Title } from "../title/Title";
-import { NavButton } from "../nav-button/NavButton";
-import { Button } from "../button/Button";
-import { ChevronLeftIcon } from "lucide-react-native";
-import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
-import {
-    generateQuizQuestions,
-    type QuizAnswerOption,
-} from "../../helpers/generateQuizQuestions";
-import { ResultModal } from "./ResultModal";
-
-export interface QuizModalProps {
-    serie: ChallengeSeriesWithProgress;
-    challengeId: string;
-    onClose: () => void;
-}
-
-export function QuizModal({
-    serie,
-    challengeId,
-    onClose,
-}: QuizModalProps): ReactNode {
-    const { theme } = useTheme();
-    const themedStyles = createThemedStyles(theme);
-    const topInset = useSafeAreaPadding(["top"]);
-    const { deviceId } = useLocal();
-    const { refetch } = useChallenges();
-    const { city, wasteTypes, isLoading } = useNextCollection();
-
-    const client = useWastoClient();
-
-    const questions = useMemo(
-        () => generateQuizQuestions(wasteTypes, serie),
-        [wasteTypes, serie]
-    );
-
-    const [index, setIndex] = useState(0);
-    const [selected, setSelected] = useState<QuizAnswerOption | null>(null);
-    const [correct, setCorrect] = useState(0);
-    const [incorrect, setIncorrect] = useState(0);
-    const [showResults, setShowResults] = useState(false);
-    const completedRef = useRef(false);
-
-    const question = questions[index];
-
-    useEffect(() => {
-        setIndex(0);
-        setSelected(null);
-        setCorrect(0);
-        setIncorrect(0);
-        setShowResults(false);
-        completedRef.current = false;
-    }, [serie.id]);
-
-    const persistScore = async (nextCorrect: number, total: number) => {
-        if (completedRef.current || !deviceId || !challengeId || !serie.id || total === 0) return;
-        completedRef.current = true;
-        const score = Math.round((nextCorrect / total) * 100);
-        try {
-            await client.public.challenges.complete(challengeId, {
-                deviceId,
-                score,
-                seriesId: serie.id,
-            });
-            await refetch();
-        } catch (err) {
-            console.error("QuizModal: complete challenge", err);
-        }
-    };
-
-    const handleAnswer = (answer: QuizAnswerOption) => {
-        if (selected || !question) return;
-        setSelected(answer);
-        if (answer.id === question.correctOptionId) {
-            setCorrect((n) => n + 1);
-        } else {
-            setIncorrect((n) => n + 1);
-        }
-    };
-
-    const handleNext = () => {
-        if (index < questions.length - 1) {
-            setIndex((n) => n + 1);
-            setSelected(null);
-            return;
-        }
-        // Last question: `correct`/`incorrect` may still be stale if setState has not flushed.
-        let finalCorrect = correct;
-        let finalIncorrect = incorrect;
-        if (selected && question && correct + incorrect < questions.length) {
-            if (selected.id === question.correctOptionId) {
-                finalCorrect = correct + 1;
-            } else {
-                finalIncorrect = incorrect + 1;
-            }
-        }
-        setCorrect(finalCorrect);
-        setIncorrect(finalIncorrect);
-        void persistScore(finalCorrect, questions.length);
-        setShowResults(true);
-    };
-
-    const handleFinish = () => {
-        setShowResults(false);
-        onClose();
-    };
-
-    return (
-        <View style={[styles.modal, themedStyles.modal]}>
-            <View style={topInset}>
-                <View style={styles.header}>
-                    <NavButton icon={ChevronLeftIcon} onPress={onClose} />
-                    <Title text={serie.name} level="2" numberOfLines={1} />
-                    <Text style={[styles.progress, themedStyles.muted]}>
-                        {questions.length ? `${index + 1}/${questions.length}` : "0/0"}
-                    </Text>
-                </View>
-            </View>
-
-            {isLoading && questions.length === 0 ? (
-                <View style={styles.center}>
-                    <ActivityIndicator color={theme.colors.primary} />
-                    <Text style={themedStyles.muted}>Chargement du quiz…</Text>
-                </View>
-            ) : !city ? (
-                <View style={styles.center}>
-                    <Text style={themedStyles.muted}>Aucune ville sélectionnée</Text>
-                    <Button onPress={onClose} variant="ghost">Fermer</Button>
-                </View>
-            ) : questions.length === 0 ? (
-                <View style={styles.center}>
-                    <Text style={styles.emoji}>🐸</Text>
-                    <Text style={[styles.emptyText, themedStyles.text]}>
-                        Aucun quiz disponible pour cette série
-                    </Text>
-                    <Button onPress={onClose} variant="ghost">Fermer</Button>
-                </View>
-            ) : question ? (
-                <ScrollView bounces={false} contentContainerStyle={styles.body}>
-                    {question.kind !== "ab_image" && question.imageUrl ? (
-                        <Image
-                            source={question.imageUrl}
-                            style={[styles.questionImage, themedStyles.questionImage]}
-                            contentFit="contain"
-                        />
-                    ) : question.kind !== "ab_image" ? (
-                        <View style={[styles.mascot, themedStyles.mascot]}>
-                            <Text style={styles.emoji}>{question.material ? "♻️" : "🐸"}</Text>
-                        </View>
-                    ) : null}
-
-                    {question.material ? (
-                        <Text style={[styles.material, themedStyles.muted]}>{question.material}</Text>
-                    ) : null}
-
-                    <Title text={question.question} level="3" />
-
-                    <View
-                        style={
-                            question.kind === "ab_image" ? styles.abAnswers : styles.answers
-                        }
-                    >
-                        {question.answers.map((answer) => {
-                            const isSelected = selected?.id === answer.id;
-                            const isCorrect = answer.id === question.correctOptionId;
-                            const showState = !!selected;
-                            const stateStyle = !showState
-                                ? themedStyles.answer
-                                : isCorrect
-                                    ? themedStyles.answerCorrect
-                                    : isSelected
-                                        ? themedStyles.answerWrong
-                                        : themedStyles.answer;
-
-                            if (question.kind === "ab_image" && answer.imageUrl) {
-                                return (
-                                    <Pressable
-                                        key={answer.id}
-                                        style={[styles.abAnswer, stateStyle]}
-                                        onPress={() => handleAnswer(answer)}
-                                        disabled={!!selected}
-                                    >
-                                        <Image
-                                            source={answer.imageUrl}
-                                            style={styles.abAnswerImage}
-                                            contentFit="contain"
-                                        />
-                                        <Text style={[styles.answerText, themedStyles.answerText]}>
-                                            {answer.text}
-                                        </Text>
-                                    </Pressable>
-                                );
-                            }
-
-                            return (
-                                <Pressable
-                                    key={`${answer.id}-${answer.text}`}
-                                    style={[styles.answer, stateStyle]}
-                                    onPress={() => handleAnswer(answer)}
-                                    disabled={!!selected}
-                                >
-                                    <Text style={[styles.answerText, themedStyles.answerText]}>
-                                        {answer.text}
-                                    </Text>
-                                </Pressable>
-                            );
-                        })}
-                    </View>
-
-                    {selected ? (
-                        <View style={styles.feedbackBlock}>
-                            {question.explanation ? (
-                                <Text style={[styles.explanation, themedStyles.muted]}>
-                                    {question.explanation}
-                                </Text>
-                            ) : null}
-                            <Button onPress={handleNext}>
-                                {index < questions.length - 1 ? "Suivant" : "Voir les résultats"}
-                            </Button>
-                        </View>
-                    ) : null}
-                </ScrollView>
-            ) : null}
-
-            <ResultModal
-                visible={showResults}
-                correct={correct}
-                incorrect={incorrect}
-                total={questions.length}
-                onClose={handleFinish}
-            />
-        </View>
-    );
-}
-
-const createThemedStyles = (theme: Theme) =>
-    StyleSheet.create({
-        modal: {
-            backgroundColor: theme.colors.background,
-        },
-        muted: {
-            color: theme.colors.onBackground,
-            opacity: 0.7,
-        },
-        text: {
-            color: theme.colors.onBackground,
-        },
-        questionImage: {
-            backgroundColor: theme.colors.surface,
-            borderRadius: theme.radius,
-        },
-        mascot: {
-            backgroundColor: theme.colors.surface,
-            borderRadius: theme.radius,
-        },
-        answer: {
-            backgroundColor: theme.colors.surface,
-            borderColor: theme.colors.border,
-        },
-        answerCorrect: {
-            backgroundColor: `${theme.colors.success}22`,
-            borderColor: theme.colors.success,
-        },
-        answerWrong: {
-            backgroundColor: `${theme.colors.error}22`,
-            borderColor: theme.colors.error,
-        },
-        answerText: {
-            color: theme.colors.onSurface,
-        },
-    });
-
-const styles = StyleSheet.create({
-    modal: {
-        height: Dimensions.get("screen").height,
-    },
-    header: {
-        padding: 20,
-        width: "100%",
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: 12,
-    },
-    progress: {
-        fontSize: 15,
-        fontWeight: "600",
-        minWidth: 48,
-        textAlign: "right",
-    },
-    center: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        padding: 24,
-        gap: 16,
-    },
-    body: {
-        padding: 20,
-        gap: 16,
-        paddingBottom: 40,
-    },
-    questionImage: {
-        width: "100%",
-        height: 180,
-    },
-    mascot: {
-        width: "100%",
-        height: 140,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    emoji: {
-        fontSize: 48,
-    },
-    material: {
-        fontSize: 13,
-        fontWeight: "600",
-        textTransform: "uppercase",
-        letterSpacing: 0.4,
-    },
-    emptyText: {
-        textAlign: "center",
-        fontSize: 16,
-    },
-    answers: {
-        gap: 10,
-    },
-    abAnswers: {
-        flexDirection: "row",
-        gap: 12,
-    },
-    feedbackBlock: {
-        gap: 12,
-    },
-    explanation: {
-        fontSize: 14,
-        lineHeight: 20,
-        fontWeight: "500",
-    },
-    answer: {
-        padding: 16,
-        borderWidth: 1,
-        borderRadius: 16,
-    },
-    abAnswer: {
-        flex: 1,
-        padding: 10,
-        borderWidth: 1,
-        borderRadius: 16,
-        alignItems: "center",
-        gap: 8,
-    },
-    abAnswerImage: {
-        width: "100%",
-        aspectRatio: 1,
-        borderRadius: 12,
-    },
-    answerText: {
-        fontSize: 16,
-        fontWeight: "600",
-        textAlign: "center",
-    },
-});
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import {
+    ActivityIndicator,
+    Dimensions,
+    Pressable,
+    ScrollView,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import { Image } from "expo-image";
+import { ChallengeSeriesWithProgress, useChallenges } from "../../hooks/useChallenges";
+import { useNextCollection } from "../../hooks/useNextCollection";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useLocal } from "../../contexts/LocalContext";
+import { useWastoClient } from "../../hooks/useWastoClient";
+import { Theme } from "../../types/Theme";
+import { Title } from "../title/Title";
+import { NavButton } from "../nav-button/NavButton";
+import { Button } from "../button/Button";
+import { ChevronLeftIcon } from "lucide-react-native";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import {
+    generateQuizQuestions,
+    type QuizAnswerOption,
+} from "../../helpers/generateQuizQuestions";
+import { ResultModal } from "./ResultModal";
+
+export interface QuizModalProps {
+    serie: ChallengeSeriesWithProgress;
+    challengeId: string;
+    onClose: () => void;
+}
+
+export function QuizModal({
+    serie,
+    challengeId,
+    onClose,
+}: QuizModalProps): ReactNode {
+    const { theme } = useTheme();
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const { deviceId } = useLocal();
+    const { refetch } = useChallenges();
+    const { city, wasteTypes, isLoading } = useNextCollection();
+
+    const client = useWastoClient();
+
+    const questions = useMemo(
+        () => generateQuizQuestions(wasteTypes, serie),
+        [wasteTypes, serie]
+    );
+
+    const [index, setIndex] = useState(0);
+    const [selected, setSelected] = useState<QuizAnswerOption | null>(null);
+    const [correct, setCorrect] = useState(0);
+    const [incorrect, setIncorrect] = useState(0);
+    const [showResults, setShowResults] = useState(false);
+    const completedRef = useRef(false);
+
+    const question = questions[index];
+
+    useEffect(() => {
+        setIndex(0);
+        setSelected(null);
+        setCorrect(0);
+        setIncorrect(0);
+        setShowResults(false);
+        completedRef.current = false;
+    }, [serie.id]);
+
+    const persistScore = async (nextCorrect: number, total: number) => {
+        if (completedRef.current || !deviceId || !challengeId || !serie.id || total === 0) return;
+        completedRef.current = true;
+        const score = Math.round((nextCorrect / total) * 100);
+        try {
+            await client.public.challenges.complete(challengeId, {
+                deviceId,
+                score,
+                seriesId: serie.id,
+            });
+            await refetch();
+        } catch (err) {
+            console.error("QuizModal: complete challenge", err);
+        }
+    };
+
+    const handleAnswer = (answer: QuizAnswerOption) => {
+        if (selected || !question) return;
+        setSelected(answer);
+        if (answer.id === question.correctOptionId) {
+            setCorrect((n) => n + 1);
+        } else {
+            setIncorrect((n) => n + 1);
+        }
+    };
+
+    const handleNext = () => {
+        if (index < questions.length - 1) {
+            setIndex((n) => n + 1);
+            setSelected(null);
+            return;
+        }
+        // Last question: `correct`/`incorrect` may still be stale if setState has not flushed.
+        let finalCorrect = correct;
+        let finalIncorrect = incorrect;
+        if (selected && question && correct + incorrect < questions.length) {
+            if (selected.id === question.correctOptionId) {
+                finalCorrect = correct + 1;
+            } else {
+                finalIncorrect = incorrect + 1;
+            }
+        }
+        setCorrect(finalCorrect);
+        setIncorrect(finalIncorrect);
+        void persistScore(finalCorrect, questions.length);
+        setShowResults(true);
+    };
+
+    const handleFinish = () => {
+        setShowResults(false);
+        onClose();
+    };
+
+    return (
+        <View style={[styles.modal, themedStyles.modal]}>
+            <View style={topInset}>
+                <View style={styles.header}>
+                    <NavButton icon={ChevronLeftIcon} onPress={onClose} />
+                    <Title text={serie.name} level="2" numberOfLines={1} />
+                    <Text style={[styles.progress, themedStyles.muted]}>
+                        {questions.length ? `${index + 1}/${questions.length}` : "0/0"}
+                    </Text>
+                </View>
+            </View>
+
+            {isLoading && questions.length === 0 ? (
+                <View style={styles.center}>
+                    <ActivityIndicator color={theme.colors.primary} />
+                    <Text style={themedStyles.muted}>Chargement du quiz…</Text>
+                </View>
+            ) : !city ? (
+                <View style={styles.center}>
+                    <Text style={themedStyles.muted}>Aucune ville sélectionnée</Text>
+                    <Button onPress={onClose} variant="ghost">Fermer</Button>
+                </View>
+            ) : questions.length === 0 ? (
+                <View style={styles.center}>
+                    <Text style={styles.emoji}>🐸</Text>
+                    <Text style={[styles.emptyText, themedStyles.text]}>
+                        Aucun quiz disponible pour cette série
+                    </Text>
+                    <Button onPress={onClose} variant="ghost">Fermer</Button>
+                </View>
+            ) : question ? (
+                <ScrollView bounces={false} contentContainerStyle={styles.body}>
+                    {question.kind !== "ab_image" && question.imageUrl ? (
+                        <Image
+                            source={question.imageUrl}
+                            style={[styles.questionImage, themedStyles.questionImage]}
+                            contentFit="contain"
+                        />
+                    ) : question.kind !== "ab_image" ? (
+                        <View style={[styles.mascot, themedStyles.mascot]}>
+                            <Text style={styles.emoji}>{question.material ? "♻️" : "🐸"}</Text>
+                        </View>
+                    ) : null}
+
+                    {question.material ? (
+                        <Text style={[styles.material, themedStyles.muted]}>{question.material}</Text>
+                    ) : null}
+
+                    <Title text={question.question} level="3" />
+
+                    <View
+                        style={
+                            question.kind === "ab_image" ? styles.abAnswers : styles.answers
+                        }
+                    >
+                        {question.answers.map((answer) => {
+                            const isSelected = selected?.id === answer.id;
+                            const isCorrect = answer.id === question.correctOptionId;
+                            const showState = !!selected;
+                            const stateStyle = !showState
+                                ? themedStyles.answer
+                                : isCorrect
+                                    ? themedStyles.answerCorrect
+                                    : isSelected
+                                        ? themedStyles.answerWrong
+                                        : themedStyles.answer;
+
+                            if (question.kind === "ab_image" && answer.imageUrl) {
+                                return (
+                                    <Pressable
+                                        key={answer.id}
+                                        style={[styles.abAnswer, stateStyle]}
+                                        onPress={() => handleAnswer(answer)}
+                                        disabled={!!selected}
+                                    >
+                                        <Image
+                                            source={answer.imageUrl}
+                                            style={styles.abAnswerImage}
+                                            contentFit="contain"
+                                        />
+                                        <Text style={[styles.answerText, themedStyles.answerText]}>
+                                            {answer.text}
+                                        </Text>
+                                    </Pressable>
+                                );
+                            }
+
+                            return (
+                                <Pressable
+                                    key={`${answer.id}-${answer.text}`}
+                                    style={[styles.answer, stateStyle]}
+                                    onPress={() => handleAnswer(answer)}
+                                    disabled={!!selected}
+                                >
+                                    <Text style={[styles.answerText, themedStyles.answerText]}>
+                                        {answer.text}
+                                    </Text>
+                                </Pressable>
+                            );
+                        })}
+                    </View>
+
+                    {selected ? (
+                        <View style={styles.feedbackBlock}>
+                            {question.explanation ? (
+                                <Text style={[styles.explanation, themedStyles.muted]}>
+                                    {question.explanation}
+                                </Text>
+                            ) : null}
+                            <Button onPress={handleNext}>
+                                {index < questions.length - 1 ? "Suivant" : "Voir les résultats"}
+                            </Button>
+                        </View>
+                    ) : null}
+                </ScrollView>
+            ) : null}
+
+            <ResultModal
+                visible={showResults}
+                correct={correct}
+                incorrect={incorrect}
+                total={questions.length}
+                onClose={handleFinish}
+            />
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        modal: {
+            backgroundColor: theme.colors.background,
+        },
+        muted: {
+            color: theme.colors.onBackground,
+            opacity: 0.7,
+        },
+        text: {
+            color: theme.colors.onBackground,
+        },
+        questionImage: {
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.radius,
+        },
+        mascot: {
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.radius,
+        },
+        answer: {
+            backgroundColor: theme.colors.surface,
+            borderColor: theme.colors.border,
+        },
+        answerCorrect: {
+            backgroundColor: `${theme.colors.success}22`,
+            borderColor: theme.colors.success,
+        },
+        answerWrong: {
+            backgroundColor: `${theme.colors.error}22`,
+            borderColor: theme.colors.error,
+        },
+        answerText: {
+            color: theme.colors.onSurface,
+        },
+    });
+
+const styles = StyleSheet.create({
+    modal: {
+        height: Dimensions.get("screen").height,
+    },
+    header: {
+        padding: 20,
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+    },
+    progress: {
+        fontSize: 15,
+        fontWeight: "600",
+        minWidth: 48,
+        textAlign: "right",
+    },
+    center: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 24,
+        gap: 16,
+    },
+    body: {
+        padding: 20,
+        gap: 16,
+        paddingBottom: 40,
+    },
+    questionImage: {
+        width: "100%",
+        height: 180,
+    },
+    mascot: {
+        width: "100%",
+        height: 140,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    emoji: {
+        fontSize: 48,
+    },
+    material: {
+        fontSize: 13,
+        fontWeight: "600",
+        textTransform: "uppercase",
+        letterSpacing: 0.4,
+    },
+    emptyText: {
+        textAlign: "center",
+        fontSize: 16,
+    },
+    answers: {
+        gap: 10,
+    },
+    abAnswers: {
+        flexDirection: "row",
+        gap: 12,
+    },
+    feedbackBlock: {
+        gap: 12,
+    },
+    explanation: {
+        fontSize: 14,
+        lineHeight: 20,
+        fontWeight: "500",
+    },
+    answer: {
+        padding: 16,
+        borderWidth: 1,
+        borderRadius: 16,
+    },
+    abAnswer: {
+        flex: 1,
+        padding: 10,
+        borderWidth: 1,
+        borderRadius: 16,
+        alignItems: "center",
+        gap: 8,
+    },
+    abAnswerImage: {
+        width: "100%",
+        aspectRatio: 1,
+        borderRadius: 12,
+    },
+    answerText: {
+        fontSize: 16,
+        fontWeight: "600",
+        textAlign: "center",
+    },
+});