Improve client routing
Change-Id: I15f93ddbb21cee0ba868e163723b136d9e8c665f
diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index c094d71..5f10f6e 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -159,7 +159,7 @@
closeModalDelete();
};
- const uri = conversation.getId() ? `/account/conversation/${conversation.getId()}` : `/account/addContact/${userId}`;
+ const uri = conversation.getId() ? `/conversation/${conversation.getId()}` : `/addContact/${userId}`;
return (
<div onContextMenu={openMenu}>
<div>
@@ -206,7 +206,7 @@
{isSelected && (
<MenuItem
onClick={() => {
- navigate(`/account`);
+ navigate(`/`);
closeModal();
}}
>
diff --git a/client/src/components/ConversationView.tsx b/client/src/components/ConversationView.tsx
index 03f0717..b09d24d 100644
--- a/client/src/components/ConversationView.tsx
+++ b/client/src/components/ConversationView.tsx
@@ -128,7 +128,7 @@
}, [account, members, adminTitle, t]);
const startCall = (withVideo = false) => {
- let url = `/account/call/${conversationId}`;
+ let url = `/call/${conversationId}`;
if (withVideo) {
url += '?video=true';
}
diff --git a/client/src/components/ConversationsOverviewCard.tsx b/client/src/components/ConversationsOverviewCard.tsx
index 4ed0ed4..8a73cc2 100644
--- a/client/src/components/ConversationsOverviewCard.tsx
+++ b/client/src/components/ConversationsOverviewCard.tsx
@@ -48,7 +48,7 @@
}, [token, accountId]);
return (
- <Card onClick={() => navigate(`/account`)}>
+ <Card onClick={() => navigate(`/`)}>
<CardActionArea>
<CardContent>
<Typography color="textSecondary" gutterBottom>
diff --git a/client/src/contexts/AuthProvider.tsx b/client/src/contexts/AuthProvider.tsx
index 3bac10d..ac829dd 100644
--- a/client/src/contexts/AuthProvider.tsx
+++ b/client/src/contexts/AuthProvider.tsx
@@ -39,7 +39,7 @@
const logout = useCallback(() => {
localStorage.removeItem('accessToken');
- navigate('/');
+ navigate('/login');
}, [navigate]);
useEffect(() => {
diff --git a/client/src/index.tsx b/client/src/index.tsx
index c8885ad..7902c9b 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -24,21 +24,13 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
-import { createBrowserRouter, createRoutesFromElements, Outlet, Route, RouterProvider } from 'react-router-dom';
+import { RouterProvider } from 'react-router-dom';
import socketio from 'socket.io-client';
-import App from './App';
-import ContactList from './components/ContactList';
-import AuthProvider from './contexts/AuthProvider';
import { SocketProvider } from './contexts/Socket';
-import WebSocketProvider from './contexts/WebSocketProvider';
-import AccountSettings from './pages/AccountSettings';
-import JamiMessenger from './pages/JamiMessenger';
-import ServerSetup from './pages/ServerSetup';
-import Welcome from './pages/Welcome';
import { store } from './redux/store';
+import { router } from './router';
import defaultTheme from './themes/Default';
-import { ThemeDemonstrator } from './themes/ThemeDemonstrator';
const queryClient = new QueryClient({
defaultOptions: {
@@ -50,29 +42,6 @@
const socket = socketio();
-const router = createBrowserRouter(
- createRoutesFromElements(
- <Route path="/" element={<App />}>
- <Route index element={<Welcome />} />
- <Route path="theme" element={<ThemeDemonstrator />} />
- <Route
- element={
- <AuthProvider>
- <WebSocketProvider>
- <Outlet />
- </WebSocketProvider>
- </AuthProvider>
- }
- >
- <Route path="account/*" element={<JamiMessenger />} />
- <Route path="settings" element={<AccountSettings />} />
- <Route path="contacts" element={<ContactList />} />
- </Route>
- <Route path="setup" element={<ServerSetup />} />
- </Route>
- )
-);
-
const container = document.getElementById('root');
if (!container) {
throw new Error('Failed to get the root element');
diff --git a/client/src/pages/AddContactPage.tsx b/client/src/pages/AddContactPage.tsx
index dd93376..2c2bfb2 100644
--- a/client/src/pages/AddContactPage.tsx
+++ b/client/src/pages/AddContactPage.tsx
@@ -50,7 +50,7 @@
console.log(response);
if (response.conversationId) {
- navigate(`/account/conversation/${response.conversationId}`);
+ navigate(`/conversation/${response.conversationId}`);
}
};
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index b22821c..5759721 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -44,8 +44,8 @@
CallingVolumeButton,
} from '../components/CallButtons';
import WebRTCProvider, { WebRTCContext } from '../contexts/WebRTCProvider';
+import { CallRouteParams } from '../router';
import { useUrlParams } from '../utils/hooks';
-import { CallRouteParams } from './JamiMessenger';
export default () => {
const {
diff --git a/client/src/pages/JamiMessenger.tsx b/client/src/pages/JamiMessenger.tsx
deleted file mode 100644
index b0b0812..0000000
--- a/client/src/pages/JamiMessenger.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright (C) 2022 Savoir-faire Linux Inc.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public
- * License along with this program. If not, see
- * <https://www.gnu.org/licenses/>.
- */
-import { Route, Routes } from 'react-router-dom';
-
-import { RouteParams } from '../utils/hooks';
-import CallInterface from './CallInterface';
-import Messenger from './Messenger';
-
-export type MessengerRouteParams = RouteParams<{ conversationId?: string; contactId?: string }, Record<string, never>>;
-export type CallRouteParams = RouteParams<{ conversationId: string }, { video?: 'true' }>;
-
-export default function JamiMessenger() {
- return (
- <Routes>
- <Route path="addContact/:contactId" element={<Messenger />} />
- <Route path="conversation/:conversationId" element={<Messenger />} />
- <Route path="call/:conversationId" element={<CallInterface />} />
- <Route path="*" element={<Messenger />} />
- </Routes>
- );
-}
diff --git a/client/src/pages/Messenger.tsx b/client/src/pages/Messenger.tsx
index fdbb0f4..83d1352 100644
--- a/client/src/pages/Messenger.tsx
+++ b/client/src/pages/Messenger.tsx
@@ -27,10 +27,10 @@
import NewContactForm from '../components/NewContactForm';
import { useAuthContext } from '../contexts/AuthProvider';
import { useAppSelector } from '../redux/hooks';
+import { MessengerRouteParams } from '../router';
import { apiUrl } from '../utils/constants';
import { useUrlParams } from '../utils/hooks';
import AddContactPage from './AddContactPage';
-import { MessengerRouteParams } from './JamiMessenger';
const Messenger = () => {
const { refresh } = useAppSelector((state) => state.userInfo);
diff --git a/client/src/router.tsx b/client/src/router.tsx
new file mode 100644
index 0000000..442473f
--- /dev/null
+++ b/client/src/router.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program. If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { createBrowserRouter, createRoutesFromElements, Outlet, Route } from 'react-router-dom';
+
+import App from './App';
+import ContactList from './components/ContactList';
+import AuthProvider from './contexts/AuthProvider';
+import WebSocketProvider from './contexts/WebSocketProvider';
+import AccountSettings from './pages/AccountSettings';
+import CallInterface from './pages/CallInterface';
+import Messenger from './pages/Messenger';
+import ServerSetup from './pages/ServerSetup';
+import Welcome from './pages/Welcome';
+import { ThemeDemonstrator } from './themes/ThemeDemonstrator';
+import { RouteParams } from './utils/hooks';
+
+export type MessengerRouteParams = RouteParams<{ conversationId?: string; contactId?: string }, Record<string, never>>;
+export type CallRouteParams = RouteParams<{ conversationId: string }, { video?: 'true' }>;
+
+export const router = createBrowserRouter(
+ createRoutesFromElements(
+ <Route path="/" element={<App />}>
+ <Route path="login" element={<Welcome />} />
+ <Route path="theme" element={<ThemeDemonstrator />} />
+ <Route
+ element={
+ <AuthProvider>
+ <WebSocketProvider>
+ <Outlet />
+ </WebSocketProvider>
+ </AuthProvider>
+ }
+ >
+ <Route path="addContact/:contactId" element={<Messenger />} />
+ <Route path="conversation/:conversationId" element={<Messenger />} />
+ <Route path="call/:conversationId" element={<CallInterface />} />
+ <Route path="settings" element={<AccountSettings />} />
+ <Route path="contacts" element={<ContactList />} />
+ <Route index element={<Messenger />} />
+ </Route>
+ <Route path="setup" element={<ServerSetup />} />
+ </Route>
+ )
+);