Refactor registration and login and improve routing
Changes:
- Improve registration and login pages
- Extract Home component from App.tsx file into its own
- Make Home component display registration or login
- Extract routes from App component and refactor routing
GitLab: #12
Change-Id: I68b01890781308282072b6dcf5e6df0d54837b4a
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 83c2ada..90aa841 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -19,17 +19,24 @@
import './index.scss';
import './i18n';
-// import config from "../sentry-client.config.json"
+import { ThemeProvider } from '@mui/material/styles';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
import socketio from 'socket.io-client';
import App from './App';
+import ContactList from './components/ContactList';
import { SocketProvider } from './contexts/Socket';
+import AccountSettings from './pages/AccountSettings';
+import Home from './pages/Home';
+import JamiMessenger from './pages/JamiMessenger';
+import ServerSetup from './pages/ServerSetup';
import { store } from './redux/store';
+import defaultTheme from './themes/Default';
+import { ThemeDemonstrator } from './themes/ThemeDemonstrator';
const queryClient = new QueryClient({
defaultOptions: {
@@ -41,6 +48,19 @@
const socket = socketio();
+const router = createBrowserRouter(
+ createRoutesFromElements(
+ <Route path="/" element={<App />}>
+ <Route index element={<Home />} />
+ <Route path="theme" element={<ThemeDemonstrator />} />
+ <Route path="account" element={<JamiMessenger />} />
+ <Route path="settings" element={<AccountSettings />} />
+ <Route path="contacts" element={<ContactList />} />
+ <Route path="setup" element={<ServerSetup />} />
+ </Route>
+ )
+);
+
const container = document.getElementById('root');
if (!container) {
throw new Error('Failed to get the root element');
@@ -51,9 +71,9 @@
<StrictMode>
<QueryClientProvider client={queryClient}>
<SocketProvider socket={socket}>
- <Router>
- <App />
- </Router>
+ <ThemeProvider theme={defaultTheme}>
+ <RouterProvider router={router} />
+ </ThemeProvider>
</SocketProvider>
</QueryClientProvider>
</StrictMode>