diff --git a/frontend/src/Router.test.tsx b/frontend/src/Router.test.tsx index 412ee8cad..fdb60f843 100644 --- a/frontend/src/Router.test.tsx +++ b/frontend/src/Router.test.tsx @@ -65,6 +65,14 @@ describe("Router", () => { }); }); + it("returns session detail route correctly", () => { + const segments: string[] = ["session", "device-id"]; + expect(segmentsToRoute(segments)).toEqual({ + type: "session", + id: "device-id", + }); + }); + it("returns unknown for other segments", () => { const segments: string[] = ["just", "testing"]; expect(segmentsToRoute(segments)).toEqual({ type: "unknown", segments }); diff --git a/frontend/src/Router.tsx b/frontend/src/Router.tsx index 7d7e47fee..0931bc872 100644 --- a/frontend/src/Router.tsx +++ b/frontend/src/Router.tsx @@ -27,6 +27,7 @@ type Location = { type ProfileRoute = { type: "profile" }; type SessionOverviewRoute = { type: "sessions-overview" }; +type SessionDetailRoute = { type: "session"; id: string }; type OAuth2ClientRoute = { type: "client"; id: string }; type OAuth2SessionList = { type: "oauth2-session-list" }; type BrowserSessionRoute = { type: "browser-session"; id: string }; @@ -37,6 +38,7 @@ type UnknownRoute = { type: "unknown"; segments: string[] }; export type Route = | SessionOverviewRoute + | SessionDetailRoute | ProfileRoute | OAuth2ClientRoute | OAuth2SessionList @@ -52,6 +54,8 @@ const routeToSegments = (route: Route): string[] => { return []; case "sessions-overview": return ["sessions-overview"]; + case "session": + return ["session", route.id]; case "verify-email": return ["emails", route.id, "verify"]; case "client": @@ -128,6 +132,10 @@ export const segmentsToRoute = (segments: string[]): Route => { return { type: "browser-session", id: segments[1] }; } + if (matches("session", P)) { + return { type: "session", id: segments[1] }; + } + return { type: "unknown", segments }; }; @@ -170,6 +178,7 @@ export const routeAtom = atom( ); const SessionsOverview = lazy(() => import("./pages/SessionsOverview")); +const SessionDetail = lazy(() => import("./pages/SessionDetail")); const Profile = lazy(() => import("./pages/Profile")); const OAuth2Client = lazy(() => import("./pages/OAuth2Client")); const BrowserSession = lazy(() => import("./pages/BrowserSession")); @@ -186,6 +195,8 @@ const InnerRouter: React.FC = () => { return ; case "sessions-overview": return ; + case "session": + return ; case "oauth2-session-list": return ; case "browser-session-list": diff --git a/frontend/src/pages/SessionDetail.tsx b/frontend/src/pages/SessionDetail.tsx new file mode 100644 index 000000000..73027e1c8 --- /dev/null +++ b/frontend/src/pages/SessionDetail.tsx @@ -0,0 +1,23 @@ +// Copyright 2023 The Matrix.org Foundation C.I.C. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +const SessionDetail: React.FC<{ deviceId: string }> = ({ deviceId }) => { + return ( +
+      Session: {deviceId}
+    
+ ); +}; + +export default SessionDetail;