cetirizine

commit 39587caa37ef0ff8e698d2fe500e5366db39351f
parent ec6c714934d3a27b1368ee84db4d9e7d7864c047
Author: MTRNord <mtrnord1@gmail.com>
Date:   Tue,  2 May 2023 23:25:21 +0200

make it possible to actually change rooms

Diffstat:
M
src/App.tsx
 | 
5
+++--
M
src/components/roomList/roomList.tsx
 | 
12
++++++++++--

2 files changed, 13 insertions(+), 4 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,6 +11,7 @@ import Olm from "olm";
 import LoginPage from './pages/LoginPage';
 import MainPage from './pages/MainPage';
 import { ProtectedRoute } from './app/protectedRoute';
+import { memo } from "react";
 
 Olm
     .init({
@@ -44,10 +45,10 @@ Olm
 function App() {
     return <BrowserRouter basename={import.meta.env.BASE_URL}>
         <Routes>
-            <Route path="/" element={<ProtectedRoute><MainPage /></ProtectedRoute>} />
+            <Route path="/:roomIdOrAlias?" element={<ProtectedRoute><MainPage /></ProtectedRoute>} />
             <Route path="/login" element={<LoginPage />} />
         </Routes>
     </BrowserRouter>;
 }
 
-export default App;
+export default memo(App);
diff --git a/src/components/roomList/roomList.tsx b/src/components/roomList/roomList.tsx
@@ -2,6 +2,7 @@ import { FC, memo, useState } from "react";
 import RoomListItem from "./roomListItem/roomListItem";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import './roomList.scss';
+import { useNavigate } from "react-router-dom";
 
 type Room = {
     /**
@@ -136,6 +137,7 @@ const RoomSection: FC<{ section: Section, onRoomClick: (roomID: string) => void,
 
 const RoomList: FC<RoomListProps> = memo(({ sections, rooms }: RoomListProps) => {
     const [activeRoom, setActiveRoom] = useState<string | undefined>(undefined);
+    const navigate = useNavigate();
 
     return (
         <div className="flex flex-col gap-1 flex-1 p-2 min-w-[33ch] h-full overflow-y-auto overflow-x-hidden scrollbarSmall">
@@ -145,7 +147,10 @@ const RoomList: FC<RoomListProps> = memo(({ sections, rooms }: RoomListProps) =>
                         <RoomSection
                             key={section.roomID}
                             section={section}
-                            onRoomClick={(roomID: string) => { setActiveRoom(roomID) }}
+                            onRoomClick={(roomID: string) => {
+                                setActiveRoom(roomID);
+                                navigate(`/${encodeURI(roomID)}`);
+                            }}
                             activeRoom={activeRoom}
                         />
                     );
@@ -158,7 +163,10 @@ const RoomList: FC<RoomListProps> = memo(({ sections, rooms }: RoomListProps) =>
                     subsections: [],
                     rooms: rooms
                 }}
-                onRoomClick={(roomID: string) => { setActiveRoom(roomID) }}
+                onRoomClick={(roomID: string) => {
+                    setActiveRoom(roomID);
+                    navigate(`/${encodeURI(roomID)}`);
+                }}
                 activeRoom={activeRoom}
             />