frontend/src/App.js

import React, { useEffect } from "react";
import { Box, Container, CssBaseline } from "@mui/material";
import {
  HashRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import getTheme from "./config/theme";
import { useThemeMode } from "./hooks/useThemeMode";
import { ThemeProvider } from "@mui/material/styles";
import ExternalLinks from "./components/ExternalLinks";
import KeyboardShortcuts from "./components/KeyboardShortcuts";
import HomePage from "./pages/HomePage";
import BenchmarkGenerationPage from "./pages/BenchmarkGenerationPage";
import BenchmarkDisplayPage from "./pages/BenchmarkDisplayPage";
import BenchmarkEvaluationPage from "./pages/BenchmarkEvaluationPage";
import EvaluationDisplayPage from "./pages/EvaluationDisplayPage";

// Fonction pour synchroniser les hash URL avec la page parente Hugging Face
const syncURLWithParent = () => {
  // Cette fonction est nécessaire uniquement dans un environnement Hugging Face Spaces
  if (window.parent !== window) {
    try {
      // On envoie le hash actuel à la page parente (Hugging Face)
      window.parent.postMessage(
        {
          hash: window.location.hash,
        },
        "https://huggingface.co"
      );

      // On log pour débogage
      console.log("Synced hash with parent:", window.location.hash);
    } catch (error) {
      console.error("Error syncing URL with parent:", error);
    }
  }
};

function App() {
  const { mode } = useThemeMode();
  const theme = getTheme(mode);

  // Effet pour surveiller les changements de hash et les synchroniser
  useEffect(() => {
    // Fonction de gestionnaire d'événements pour les changements de hash
    const handleHashChange = () => {
      syncURLWithParent();
    };

    // Fonction pour gérer les messages reçus de la page parente
    const handleParentMessage = (event) => {
      // Vérifier que le message vient bien de Hugging Face
      if (event.origin === "https://huggingface.co") {
        // Si le message contient un hash et qu'il est différent du hash actuel
        if (event.data.hash && event.data.hash !== window.location.hash) {
          console.log("Received hash from parent:", event.data.hash);
          // Mettre à jour le hash de l'URL sans recharger la page
          window.location.hash = event.data.hash;
        }
      }
    };

    // On synchronise au chargement initial
    syncURLWithParent();

    // On écoute les changements de hash
    window.addEventListener("hashchange", handleHashChange);

    // On écoute les messages de la page parente
    window.addEventListener("message", handleParentMessage);

    // Nettoyage
    return () => {
      window.removeEventListener("hashchange", handleHashChange);
      window.removeEventListener("message", handleParentMessage);
    };
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Router>
        <Container maxWidth="md">
          <ExternalLinks />
          <Box sx={{ pt: 12, pb: 4 }}>
            <KeyboardShortcuts />
            <Routes>
              <Route path="/" element={<HomePage />} />
              <Route
                path="/benchmark-generation"
                element={<BenchmarkGenerationPage />}
              />
              <Route
                path="/benchmark-display"
                element={<BenchmarkDisplayPage />}
              />
              <Route
                path="/benchmark-evaluation"
                element={<BenchmarkEvaluationPage />}
              />
              <Route
                path="/evaluation-display"
                element={<EvaluationDisplayPage />}
              />
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </Box>
        </Container>
      </Router>
    </ThemeProvider>
  );
}

export default App;