54 lines
1.8 KiB
TypeScript
54 lines
1.8 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 };
|