data-primals-engine 1.0.11 → 1.1.0

package/client/src/hooks/useTutorials.jsx

@@ -0,0 +1,227 @@
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useAuthContext } from '../contexts/AuthContext.jsx';
+import { useUI } from '../contexts/UIContext.jsx';
+import { useNotificationContext } from '../NotificationProvider.jsx';
+import { tutorialsConfig } from '../tutorials.js';
+import { useTranslation } from 'react-i18next';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import useLocalStorage from "./useLocalStorage.js";
+import { event_off, event_on } from "data-primals-engine/core";
+
+/**
+ * Hook pour gérer la logique des tutoriels multi-étapes.
+ * Il interagit avec l'état de l'utilisateur, lance les tours guidés (TourSpotlight)
+ * et communique avec le backend pour vérifier la progression et attribuer les récompenses.
+ */
+export const useTutorials = () => {
+    const { t } = useTranslation();
+    const queryClient = useQueryClient();
+    const { me, setMe } = useAuthContext();
+    const { allTourSteps, setCurrentTourSteps, setIsTourOpen } = useUI();
+    const { addNotification } = useNotificationContext();
+
+    // Refs pour gérer la file d'attente des vérifications
+    const isCheckingRef = useRef(false);
+    const isCheckQueuedRef = useRef(false);
+
+    const { data: tutorials, isLoading: isLoadingTutorials } = useQuery('tutorials', async () => {
+        return tutorialsConfig.map(t => ({ ...t, _id: t.id }));
+    }, { staleTime: Infinity });
+
+    const activeTutorialState = me?.activeTutorial;
+
+    const activeTutorialDetails = useMemo(() => {
+        if (!activeTutorialState || !tutorials) return null;
+        const tutorial = tutorials.find(t => t._id === activeTutorialState.id);
+        if (!tutorial) return null;
+        const currentStage = tutorial.stages.find(s => s.stage === activeTutorialState.stage);
+        if (!currentStage) return null;
+        return {
+            totalStages: tutorial.stages.length,
+            currentStage: currentStage,
+        };
+    }, [activeTutorialState, tutorials]);
+
+    // --- MUTATIONS VERS LE BACKEND ---
+
+    const [activeTuto, setActiveTuto] = useLocalStorage('activeTuto', null);
+
+    const { mutate: updateActiveTutorial } = useMutation(
+        (tutorialState) => fetch('/api/tutorials/set-active', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ tutorialState }),
+        }).then(res => res.json()),
+        {
+            onSuccess: (data) => {
+                if (/^demo[0-9]{1,2}$/.test(me?.username)) {
+                    setActiveTuto(data.updatedData.activeTutorial);
+                    gtag("event", "signed_in (demo)");
+                }
+                setMe(prevMe => ({ ...prevMe, activeTutorial: data.updatedData.activeTutorial }));
+                queryClient.invalidateQueries('me');
+            },
+            onError: () => addNotification({
+                title: t('tutorial.error.update_state_message', 'Impossible de sauvegarder votre progression.'),
+                status: 'error',
+            })
+        }
+    );
+
+    const { mutateAsync: checkCompletionCondition } = useMutation(
+        (condition) => fetch('/api/tutorials/check-completion', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(condition),
+        }).then(res => res.json())
+    );
+
+    const { mutate: claimRewards } = useMutation(
+        (tutorialId) => fetch(`/api/tutorials/${tutorialId}/claim-rewards`, { method: 'POST' }).then(res => res.json()),
+        {
+            onSuccess: (data) => {
+                const newMe = {...me, ...data.userUpdate};
+                setMe(newMe);
+                queryClient.setQueryData('me', newMe);
+                if (data.notification) {
+                    addNotification({
+                        title: data.notification.title,
+                        id: 'claim-'+(new Date().getMilliseconds()),
+                        message: data.notification.message,
+                        status: 'success',
+                        timeout: 8000
+                    });
+                }
+            },
+            onError: () => addNotification({
+                title: t('tutorial.error.claim_rewards_message', 'Un problème est survenu lors de l\'attribution de vos récompenses.'),
+                status: 'error',
+            })
+        }
+    );
+
+    const launchTour = (tourName) => {
+        const tourSteps = allTourSteps[tourName];
+        if (tourSteps && tourSteps.length > 0) {
+            setCurrentTourSteps(tourSteps);
+            setIsTourOpen(true);
+        } else {
+            console.warn(`[Tutoriels] Tour guidé non trouvé pour le nom : ${tourName}`);
+        }
+    };
+
+    const startTutorial = (tutorialId) => {
+        const tutorial = tutorials?.find(t => t._id === tutorialId);
+        if (!tutorial) return;
+        const firstStage = tutorial.stages?.[0];
+        if (!firstStage) return;
+        const newActiveState = { id: tutorialId, stage: 1 };
+        updateActiveTutorial(newActiveState);
+        launchTour(firstStage.tourName);
+    };
+
+    const triggerTutorialCheck = useCallback(async () => {
+        if (isCheckingRef.current) {
+            console.log('[Tutoriels] Vérification déjà en cours, mise en file d\'attente.');
+            isCheckQueuedRef.current = true; // Mettre en attente
+            return;
+        }
+        if (!me?.activeTutorial || !tutorials) return;
+
+        isCheckingRef.current = true;
+        console.log('[Tutoriels] Démarrage de la vérification en chaîne...');
+
+        try {
+            let currentActiveState = me.activeTutorial;
+
+            while (true) {
+                const tutorial = tutorials.find(t => t._id === currentActiveState.id);
+                if (!tutorial) break;
+
+                console.log({currentActiveState})
+                const stageConfig = tutorial.stages.find(s => s.stage === currentActiveState.stage);
+                if (!stageConfig) {
+                    console.log('[Tutoriels] Fin du tutoriel, attribution des récompenses.');
+                    claimRewards(tutorial._id);
+                    updateActiveTutorial(null);
+                    setIsTourOpen(false);
+                    break;
+                }
+
+                const { isCompleted } = await checkCompletionCondition(stageConfig.completionCondition);
+
+                if (isCompleted) {
+                    console.log(`[Tutoriels] Étape ${currentActiveState.stage} complétée, passage à la suivante.`);
+
+                    // Clés de traduction structurées et robustes
+                    const titleKey = `tutorial.${tutorial.id}.stage.${currentActiveState.stage}.name`;
+                    const descriptionKey = `tutorial.${tutorial.id}.stage.${currentActiveState.stage}.description`;
+
+                    addNotification({
+                        title: t(titleKey, stageConfig.name),
+                        message: t(descriptionKey, stageConfig.description),
+                        status: 'success'
+                    });
+                    currentActiveState = { id: currentActiveState.id, stage: currentActiveState.stage + 1 };
+                } else {
+                    console.log(`[Tutoriels] Arrêt à l'étape ${currentActiveState.stage} (non complétée).`);
+                    if (currentActiveState.stage !== me.activeTutorial.stage) {
+                        updateActiveTutorial(currentActiveState);
+                        launchTour(stageConfig.tourName);
+                    }
+                    break;
+                }
+            }
+        } catch (error) {
+            console.error("[Tutoriels] Erreur lors de la vérification en chaîne :", error);
+        } finally {
+            isCheckingRef.current = false;
+            console.log('[Tutoriels] Vérification en chaîne terminée, verrou libéré.');
+
+            // Si une vérification a été mise en attente, on la lance maintenant.
+            if (isCheckQueuedRef.current) {
+                console.log('[Tutoriels] Lancement de la vérification mise en file d\'attente.');
+                isCheckQueuedRef.current = false;
+                triggerTutorialCheck();
+            }
+        }
+    }, [
+        tutorials, checkCompletionCondition, claimRewards, updateActiveTutorial,
+        addNotification, launchTour, t, setIsTourOpen, me
+    ]);
+
+    useEffect(() => {
+        setMe(prevMe => ({ ...prevMe, activeTutorial: activeTuto }));
+    }, [activeTuto]);
+
+    // Écoute les événements de modification de données pour vérifier la progression en arrière-plan.
+    useEffect(() => {
+        const handleDataChange = (payload) => {
+            console.log(`[Tutoriels] Événement de données reçu.`, payload);
+            if (me?.activeTutorial) {
+                triggerTutorialCheck();
+            }
+        };
+
+        console.log(me.activeTutorial + new Date().getMilliseconds());
+        const eventTypes = ['API_ADD_DATA', 'API_EDIT_DATA', 'API_DELETE_DATA'];
+        eventTypes.forEach(type => event_on(type, handleDataChange));
+
+        return () => {
+            eventTypes.forEach(type => event_off(type, handleDataChange));
+        };
+    }, [me?.activeTutorial]);
+
+    // Vérifie la progression lorsqu'un tutoriel devient actif ou que son étape change.
+    useEffect(() => {
+        triggerTutorialCheck();
+    },[]);
+    return {
+        tutorials,
+        isLoadingTutorials,
+        startTutorial,
+        activeTutorialState,
+        activeTutorialDetails,
+        triggerTutorialCheck,
+    };
+};

package/client/src/hooks/useWindowSize.js

@@ -0,0 +1,24 @@
+// src/hooks/useWindowSize.js
+import { useState, useEffect } from 'react';
+
+function useWindowSize() {
+    const [windowSize, setWindowSize] = useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return windowSize;
+}
+
+export default useWindowSize;

package/client/src/i18n.js

@@ -0,0 +1,47 @@
+import i18n from "i18next";
+import {initReactI18next, Trans} from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import {websiteTranslations} from "./translations.js";
+
+const options = {
+    // order and from where user language should be detected
+    order: [
+        "querystring",
+        "cookie",
+        "localStorage",
+        "sessionStorage",
+        "navigator",
+        "htmlTag",
+        "path",
+        "subdomain"
+    ],
+
+    // keys or params to lookup language from
+    lookupQuerystring: "lang"
+};
+
+i18n
+    // detect user language
+    // learn more: https://github.com/i18next/i18next-browser-languageDetector
+    .use(LanguageDetector)
+    // pass the i18n instance to react-i18next.
+    .use(initReactI18next)
+    // init i18next
+    // for all options read: https://www.i18next.com/overview/configuration-options
+    .init({
+        debug: false,
+        detection: options,
+        fallbackLng: "fr",
+        keySeparator: false,
+        interpolation: {
+            escapeValue: false // not needed for react as it escapes by default
+        },
+        resources: websiteTranslations,
+        react: {
+            bindI18n: 'loaded languageChanged',
+            bindI18nStore: 'added',
+            useSuspense: true
+        }
+    });
+
+export default i18n;

package/client/src/index.css

@@ -0,0 +1,90 @@
+/* index.css */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+#root {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+
+body {
+  margin: 0;
+  display: flex;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 2em; /* Slightly reduced for better balance */
+  line-height: 1.2;
+  margin-bottom: 0.5em; /* Added margin for spacing */
+}
+
+h2 {
+  font-size: 1.5em;
+  line-height: 1.3;
+  margin-bottom: 0.5em;
+}
+
+h3 {
+  font-size: 1.4em;
+  line-height: 1.3;
+  margin-bottom: 0.5em;
+}
+
+h4 {
+  font-size: 1.2em;
+  line-height: 1.3;
+  margin-bottom: 0.5em;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.15em 0.25em;
+  font-size: 0.9em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #4767FF;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #4767FF;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/client/src/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);

package/client/src/main.jsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+import {BrowserRouter} from "react-router-dom";
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+      <App />
+  </StrictMode>,
+)