App.tsx

import { useState, useEffect } from "react";
import "./App.css";
import "../contents/example.css"
import "./App.scss";
import "bootstrap/dist/css/bootstrap.min.css";
import { Route, Routes } from "react-router-dom";
import { Footer } from "../components/Footer.tsx";
import { NotFound } from "../components/NotFound.tsx";
import { Navbar } from "../components/Navbar.tsx";
import { getPathMapping } from "../utils/getPathMapping.ts";
import { stringToSlug } from "../utils/stringToSlug.ts";
import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/highlight.js";
import LoadingScreen from "../components/LoadingScreen.tsx";
import "../components/LoadingScreen.css";

const App = () => {
  const [isLoading, setIsLoading] = useState(true);

  const pathMapping = getPathMapping();
  const currentPath =
    location.pathname
      .split(`${stringToSlug(import.meta.env.VITE_TEAM_NAME)}`)
      .pop() || "/";

  // Set Page Title
  const title =
    currentPath in pathMapping ? pathMapping[currentPath].title : "Not Found";

  useEffect(() => {
    document.title = `${title || ""} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
  }, [title]);

  useEffect(() => {
    const timer = setTimeout(() => {
      console.log("Hiding loading screen");
      setIsLoading(false);
    }, 4000); // Adjust the delay as needed, Update the loading state after 3 seconds

    return () => {
      console.log("Cleaning up timer");
      clearTimeout(timer);  // Clear the timer on component unmount
    };
  }, []);

  return (
    <>
      {isLoading ? (
        <LoadingScreen />
      ) : (
        <>
          {/* Navigation */}
          <Navbar/>

          {/* Header and PageContent */}
          <Routes>
            {Object.entries(pathMapping).map(([path, {title, header: Header, component: Component}]) => (
              <Route
                key={path}
                path={path}
                element={
                  <>
                    <Header/>
                    {/* Page content */}
                    <div className="container-fluid">
                      <div className="row">
                        <div className="col-1 d-none d-lg-block">
                          {/* <!-- empty so far --> */}
                        </div>
                        <div className="col">
                          <Component />
                          <Villbuttonrow/>
                        </div>
                        <div className="col-1 d-none d-lg-block">
                          {/* <!-- empty so far --> */}
                        </div>
                      </div>
                    </div>
                    {/* End page content */}
                  </>
                }
              />
            ))}
            <Route
              path="*"
              element={
                <>
                
                  <NotFound />
                </>
              }
            />
          </Routes>

          {/* Footer */}
          <Footer />
        </>
      )}
    </>
  );
};

export default App;