Shorten room urls

www/app/[domain]/[roomName]/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import "@whereby.com/browser-sdk/embed";
-import { useCallback, useEffect, useRef } from "react";
+import { useRef } from "react";
-import useRoomMeeting from "../../rooms/useRoomMeeting";
+import useRoomMeeting from "./useRoomMeeting";
 
 export type RoomDetails = {
   params: {

www/app/[domain]/rooms/page.tsx

@@ -49,6 +49,8 @@ interface SelectOption extends OptionBase {
   value: string;
 }
 
+const RESERVED_PATHS = ["browse", "rooms", "transcripts"];
+
 export default function RoomsList() {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [room, setRoom] = useState({
@@ -63,6 +65,7 @@ export default function RoomsList() {
   const [page, setPage] = useState<number>(1);
   const { loading, response, refetch } = useRoomList(page);
   const [streams, setStreams] = useState<Stream[]>([]);
+  const [error, setError] = useState("");
 
   const { zulip_streams } = useContext(DomainContext);
 
@@ -99,7 +102,11 @@ export default function RoomsList() {
 
   const handleSaveRoom = async () => {
     try {
-      console.log(room);
+      if (RESERVED_PATHS.includes(room.name)) {
+        setError("This room name is reserved. Please choose another name.");
+        return;
+      }
+
       if (isEditing) {
         await api?.v1RoomsUpdate({
           roomId: editRoomId,
@@ -128,8 +135,11 @@ export default function RoomsList() {
       });
       setIsEditing(false);
       setEditRoomId("");
+      setError("");
       refetch();
-    } catch (err) {}
+    } catch (err) {
+      console.error(err);
+    }
     onClose();
   };
 
@@ -151,7 +161,9 @@ export default function RoomsList() {
         roomId,
       });
       refetch();
-    } catch (err) {}
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   const handleRoomChange = (e) => {
@@ -161,6 +173,7 @@ export default function RoomsList() {
         .replace(/[^a-zA-Z0-9\s-]/g, "")
         .replace(/\s+/g, "-")
         .toLowerCase();
+      setError("");
     }
     setRoom({
       ...room,
@@ -197,6 +210,7 @@ export default function RoomsList() {
                 zulipStream: "",
                 zulipTopic: "",
               });
+              setError("");
               onOpen();
             }}
           >
@@ -219,6 +233,7 @@ export default function RoomsList() {
                   <FormHelperText>
                     No spaces or special characters allowed
                   </FormHelperText>
+                  {error && <Text color="red.500">{error}</Text>}
                 </FormControl>
 
                 <FormControl mt={8}>
@@ -291,9 +306,7 @@ export default function RoomsList() {
                 <CardBody>
                   <Flex align={"center"}>
                     <Heading size="md">
-                      <Link href={`/rooms/${roomData.name}`}>
+                      <Link href={`/${roomData.name}`}>{roomData.name}</Link>
-                        {roomData.name}
-                      </Link>
                     </Heading>
                     <Spacer />
                     <Menu closeOnSelect={true}>

www/middleware.ts

@@ -9,7 +9,7 @@ export async function middleware(request: NextRequest) {
 
   if (
     request.nextUrl.pathname.match(
-      "/((?!api|_next/static|_next/image|favicon.ico).*)",
+      "^/((?!api|_next/static|_next/image|favicon.ico).*)",
     )
   ) {
     // Feature-flag protedted paths
@@ -24,19 +24,11 @@ export async function middleware(request: NextRequest) {
     if (config.features.requireLogin) {
       const fiefMiddleware = await getFiefAuthMiddleware(request.nextUrl);
       const fiefResponse = await fiefMiddleware(request);
-
+      if (!fiefResponse.headers.get("x-middleware-rewrite")) {
-      if (
+        fiefResponse.headers.set(
-        request.nextUrl.pathname == "/" ||
+          "x-middleware-rewrite",
-        request.nextUrl.pathname.startsWith("/transcripts") ||
+          request.nextUrl.origin + "/" + domain + request.nextUrl.pathname,
-        request.nextUrl.pathname.startsWith("/browse") ||
+        );
-        request.nextUrl.pathname.startsWith("/rooms")
-      ) {
-        if (!fiefResponse.headers.get("x-middleware-rewrite")) {
-          fiefResponse.headers.set(
-            "x-middleware-rewrite",
-            request.nextUrl.origin + "/" + domain + request.nextUrl.pathname,
-          );
-        }
       }
       return fiefResponse;
     }