backstory/frontend/src/BackstoryApp.tsx
2025-06-18 14:26:07 -07:00

68 lines
2.3 KiB
TypeScript

import React, { useEffect, useState, useRef, JSX } from "react";
import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import { backstoryTheme } from "./BackstoryTheme";
import { ConversationHandle } from "components/Conversation";
import { CandidateRoute } from "routes/CandidateRoute";
import { BackstoryLayout } from "components/layout/BackstoryLayout";
import { ChatQuery } from "types/types";
import { AuthProvider } from "hooks/AuthContext";
import { AppStateProvider } from "hooks/GlobalContext";
import "./BackstoryApp.css";
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
const BackstoryApp = (): JSX.Element => {
const navigate = useNavigate();
const location = useLocation();
const chatRef = useRef<ConversationHandle>(null);
const submitQuery = (query: ChatQuery): void => {
console.log(
`handleSubmitChatQuery:`,
query,
chatRef.current ? " sending" : "no handler"
);
chatRef.current?.submitQuery(query);
navigate("/chat");
};
const [page, setPage] = useState<string>("");
useEffect(() => {
const currentRoute = location.pathname.split("/")[1]
? `/${location.pathname.split("/")[1]}`
: "/";
setPage(currentRoute);
}, [location.pathname]);
// Render appropriate routes based on user type
return (
<ThemeProvider theme={backstoryTheme}>
<AuthProvider>
<AppStateProvider>
<Routes>
<Route
path="/u/:username"
element={<CandidateRoute />}
/>
{/* Static/shared routes */}
<Route
path="/*"
element={
<BackstoryLayout
{...{ page, chatRef, submitQuery }}
/>
}
/>
</Routes>
</AppStateProvider>
</AuthProvider>
</ThemeProvider>
);
};
export { BackstoryApp };