fix: remove peer, end room flow (#1849)

* fix: remove peer, end room flow * fix: pr comments * fix: remove roomCode * refactor: move to custom hook
100mslive · Sep 7, 2023 · 2c590a9 · 2c590a9
1 parent a14fee6
commit 2c590a9
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 35 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useMedia } from 'react-use';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import {
@@ -15,18 +14,13 @@ import {
 } from '@100mslive/react-sdk';
 import { config as cssConfig } from '../../../Theme';
 // @ts-ignore: No implicit Any
-import { useHMSPrebuiltContext } from '../../AppContext';
-// @ts-ignore: No implicit Any
-import { PictureInPicture } from '../PIP/PIPManager';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { DesktopLeaveRoom } from './DesktopLeaveRoom';
 import { MwebLeaveRoom } from './MwebLeaveRoom';
-import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useRedirectToLeave } from '../hooks/useRedirectToLeave';
 
 export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
-  const navigate = useNavigate();
-  const params = useParams();
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const isMobile = useMedia(cssConfig.media.md);
@@ -40,8 +34,7 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
   );
   const hlsState = useHMSStore(selectHLSState);
   const hmsActions = useHMSActions();
-  const { onLeave } = useHMSPrebuiltContext();
-  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  const { redirectToLeave } = useRedirectToLeave();
 
   const stopStream = async () => {
     try {
@@ -54,24 +47,12 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
     }
   };
 
-  const redirectToLeavePage = () => {
-    const prefix = isLeaveScreenEnabled ? '/leave/' : '/';
-    if (params.role) {
-      navigate(prefix + params.roomId + '/' + params.role);
-    } else {
-      navigate(prefix + params.roomId);
-    }
-    PictureInPicture.stop().catch(() => console.error('stopping pip'));
-    ToastManager.clearAllToast();
-    onLeave?.();
-  };
-
   const leaveRoom = async () => {
     if (hlsState.running && peersWithStreamingRights.length <= 1) {
       await stopStream();
     }
     hmsActions.leave();
-    redirectToLeavePage();
+    redirectToLeave();
   };
 
   if (!permissions || !isConnected) {

diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-case-declarations */
 import React, { useCallback, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   HMSNotificationTypes,
   HMSRoomState,
@@ -22,16 +22,18 @@ import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
 import { TrackUnmuteModal } from './TrackUnmuteModal';
 import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
+import { useRedirectToLeave } from '../hooks/useRedirectToLeave';
 import { getMetadata } from '../../common/utils';
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';
-
 export function Notifications() {
   const notification = useHMSNotifications();
   const navigate = useNavigate();
+  const params = useParams();
   const subscribedNotifications = useSubscribedNotifications() || {};
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
+  const { redirectToLeave } = useRedirectToLeave();
 
   const handleRoleChangeDenied = useCallback(request => {
     ToastManager.addToast({
@@ -80,7 +82,7 @@ export function Notifications() {
                 <Button
                   onClick={() => {
                     ToastManager.removeToast(toastId);
-                    window.location.reload();
+                    navigate(`/${params.roomId}${params.role ? `/${params.role}` : ''}`);
                   }}
                 >
                   Rejoin
@@ -91,11 +93,7 @@ export function Notifications() {
           }
           // goto leave for terminal if any action is not performed within 2secs
           // if network is still unavailable going to preview will throw an error
-          setTimeout(() => {
-            const previewLocation = window.location.pathname.replace('meeting', 'leave');
-            ToastManager.clearAllToast();
-            navigate(previewLocation);
-          }, 2000);
+          redirectToLeave();
           return;
         }
         // Autoplay error or user denied screen share (cancelled browser pop-up)
@@ -133,11 +131,7 @@ export function Notifications() {
           title: `${notification.message}. 
               ${notification.data.reason && `Reason: ${notification.data.reason}`}`,
         });
-        setTimeout(() => {
-          const leaveLocation = window.location.pathname.replace('meeting', 'leave');
-          navigate(leaveLocation);
-          ToastManager.clearAllToast();
-        }, 2000);
+        redirectToLeave();
         break;
       case HMSNotificationTypes.DEVICE_CHANGE_UPDATE:
         ToastManager.addToast({

diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useRedirectToLeave.tsx b/packages/roomkit-react/src/Prebuilt/components/hooks/useRedirectToLeave.tsx
@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useHMSPrebuiltContext } from '../../AppContext';
+// @ts-ignore: No implicit Any
+import { PictureInPicture } from '../PIP/PIPManager';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+
+export const useRedirectToLeave = () => {
+  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  const { onLeave } = useHMSPrebuiltContext();
+  const params = useParams();
+  const navigate = useNavigate();
+
+  const redirect = useCallback(() => {
+    setTimeout(() => {
+      const prefix = isLeaveScreenEnabled ? '/leave/' : '/';
+      if (params.role) {
+        navigate(prefix + params.roomId + '/' + params.role);
+      } else {
+        navigate(prefix + params.roomId);
+      }
+      PictureInPicture.stop().catch(() => console.error('stopping pip'));
+      ToastManager.clearAllToast();
+      onLeave?.();
+    }, 1000);
+  }, [isLeaveScreenEnabled, navigate, onLeave, params.role, params.roomId]);
+
+  return { redirectToLeave: redirect };
+};