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
              component="footer"
              sx={{
                mt: 4,
                textAlign: "center",
                fontSize: "0.875rem",
                color: "text.secondary",
                opacity: 0.7,
                maxWidth: { xs: "100%", md: "70%" },
                mx: "auto",
              }}
            >
              We may retain processed documents processed in this space for safety purposes for up to 30 days. For maximum privacy with zero data retention, you are encouraged to duplicate the space to your own huggingface organization.
            </Box>
          </Box>
        </Container>
      </Router>
    </ThemeProvider>
  );
}

export default App;