Fix issue with room link throwing error when authenticated (#5450)

app/javascript/RootBoundary.jsx

@@ -18,6 +18,7 @@ import React from 'react';
 import { useRouteError } from 'react-router-dom';
 import DefaultErrorPage from './components/errors/DefaultErrorPage';
 import NotFoundPage from './components/errors/NotFoundPage';
+import ForbiddenRouter from './routes/ForbiddenRouter';
 
 export default function RootBoundary() {
   const error = useRouteError();
@@ -26,6 +27,8 @@ export default function RootBoundary() {
   switch (status) {
     case 404:
       return <NotFoundPage />;
+    case 403:
+      return <ForbiddenRouter />;
     default:
       return <DefaultErrorPage />;
   }

app/javascript/components/rooms/room/Room.jsx

@@ -18,9 +18,7 @@ import React from 'react';
 import {
   Stack, Button, Col, Row,
 } from 'react-bootstrap';
-import {
-  Link, Navigate, useLocation, useParams,
-} from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import { HomeIcon, Square2StackIcon } from '@heroicons/react/24/outline';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
@@ -39,11 +37,10 @@ export default function Room() {
   const { t } = useTranslation();
   const { friendlyId } = useParams();
   const {
-    isLoading: isRoomLoading, isError, data: room, error,
+    isLoading: isRoomLoading, data: room,
   } = useRoom(friendlyId);
   const startMeeting = useStartMeeting(friendlyId);
   const currentUser = useAuth();
-  const location = useLocation();
   const localizedTime = localizeDayDateTimeString(room?.last_session, currentUser?.language);
 
   function copyInvite() {
@@ -51,11 +48,6 @@ export default function Room() {
     toast.success(t('toast.success.room.copied_meeting_url'));
   }
 
-  // Custom logic to redirect from Rooms page to join page if this isnt the users room and they're not allowed to view it
-  if (isError && error.response.status === 403) {
-    return <Navigate to={`${location.pathname}/join`} />;
-  }
-
   return (
     <>
       <Title>{room?.name}</Title>

app/javascript/routes/ForbiddenRouter.jsx

+// BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
+//
+// Copyright (c) 2022 BigBlueButton Inc. and by respective authors (see below).
+//
+// This program is free software; you can redistribute it and/or modify it under the
+// terms of the GNU Lesser General Public License as published by the Free Software
+// Foundation; either version 3.0 of the License, or (at your option) any later
+// version.
+//
+// Greenlight 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 Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License along
+// with Greenlight; if not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import DefaultErrorPage from '../components/errors/DefaultErrorPage';
+
+export default function ForbiddenRouter() {
+  const regex = /rooms\/(\w{3}-\w{3}-\w{3})(-\w{3})?/;
+  const match = window.location.pathname.match(regex);
+
+  if (match) {
+    return <Navigate to={`${match[0]}/join`} />;
+  }
+
+  return <DefaultErrorPage />;
+}