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";

// Function to synchronize URL hash with parent Hugging Face page
const syncURLWithParent = () => {
  // This function is only necessary in a Hugging Face Spaces environment
  if (window.parent !== window) {
    try {
      // Send the current hash to the parent page (Hugging Face)
      window.parent.postMessage(
        {
          hash: window.location.hash,
        },
        "https://huggingface.co"
      );

      // Log for debugging
      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);

  // Effect to monitor hash changes and synchronize them
  useEffect(() => {
    // Event handler function for hash changes
    const handleHashChange = () => {
      syncURLWithParent();
    };

    // Function to handle messages received from the parent page
    const handleParentMessage = (event) => {
      // Verify that the message comes from Hugging Face
      if (event.origin === "https://huggingface.co") {
        // If the message contains a hash and it's different from the current hash
        if (event.data.hash && event.data.hash !== window.location.hash) {
          console.log("Received hash from parent:", event.data.hash);
          // Update the URL hash without reloading the page
          window.location.hash = event.data.hash;
        }
      }
    };

    // Synchronize on initial load
    syncURLWithParent();

    // Listen for hash changes
    window.addEventListener("hashchange", handleHashChange);

    // Listen for messages from the parent page
    window.addEventListener("message", handleParentMessage);

    // Cleanup
    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;