refactor: use ts-pattern to simplify conditions

packages/roomkit-react/src/Prebuilt/App.tsx

@@ -1,6 +1,7 @@
 import React, { MutableRefObject, useEffect, useRef } from 'react';
 import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store';
 import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import {
   HMSActions,
   HMSReactiveStore,
@@ -251,12 +252,10 @@ const AppStates = ({ activeState }: { activeState: PrebuiltStates }) => {
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
   useAutoStartStreaming();
 
-  if (activeState === PrebuiltStates.PREVIEW && isPreviewScreenEnabled) {
-    return <PreviewScreen />;
-  } else if (activeState === PrebuiltStates.LEAVE && isLeaveScreenEnabled) {
-    return <LeaveScreen />;
-  }
-  return <ConferenceScreen />;
+  return match({ activeState, isPreviewScreenEnabled, isLeaveScreenEnabled })
+    .with({ activeState: PrebuiltStates.PREVIEW, isPreviewScreenEnabled: true }, () => <PreviewScreen />)
+    .with({ activeState: PrebuiltStates.LEAVE, isLeaveScreenEnabled: true }, () => <LeaveScreen />)
+    .otherwise(() => <ConferenceScreen />);
 };
 
 const BackSwipe = () => {

packages/roomkit-react/src/Prebuilt/AppStateContext.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import { usePreviousDistinct } from 'react-use';
+import { match, P } from 'ts-pattern';
 import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
 import { VBHandler } from './components/VirtualBackground/VBHandler';
 import { useRoomLayout } from './provider/roomLayoutProvider';
@@ -52,20 +53,32 @@ export const useAppStateManager = () => {
     if (!roomLayout) {
       return;
     }
-    if (roomState === HMSRoomState.Connected) {
-      setActiveState(PrebuiltStates.MEETING);
-    } else if (
-      prevRoomState &&
-      [HMSRoomState.Reconnecting, HMSRoomState.Connected, HMSRoomState.Connecting].includes(prevRoomState) &&
-      [HMSRoomState.Disconnecting, HMSRoomState.Disconnected].includes(roomState)
-    ) {
-      const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING;
-      setActiveState(isLeaveScreenEnabled ? PrebuiltStates.LEAVE : goTo);
-      VBHandler.reset();
-      redirectToLeave(1000); // to clear toasts after 1 second
-    } else if (!prevRoomState && roomState === HMSRoomState.Disconnected) {
-      setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
-    }
+    match([roomState, prevRoomState])
+      .with([HMSRoomState.Connected, P.any], () => setActiveState(PrebuiltStates.MEETING))
+      .with(
+        [HMSRoomState.Disconnecting, HMSRoomState.Connected],
+        [HMSRoomState.Disconnecting, HMSRoomState.Connecting],
+        [HMSRoomState.Disconnecting, HMSRoomState.Reconnecting],
+        [HMSRoomState.Disconnected, HMSRoomState.Connected],
+        [HMSRoomState.Disconnected, HMSRoomState.Connecting],
+        [HMSRoomState.Disconnected, HMSRoomState.Reconnecting],
+        () => {
+          setActiveState(
+            match({ isLeaveScreenEnabled, isPreviewScreenEnabled })
+              .with({ isLeaveScreenEnabled: true }, () => PrebuiltStates.LEAVE)
+              .with({ isPreviewScreenEnabled: true }, () => PrebuiltStates.PREVIEW)
+              .otherwise(() => PrebuiltStates.MEETING),
+          );
+          VBHandler.reset();
+          redirectToLeave(1000); // to clear toasts after 1 second
+        },
+      )
+      .with([HMSRoomState.Disconnected, P.nullish], () => {
+        setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
+      })
+      .otherwise(() => {
+        // do nothing
+      });
   }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave]);
 
   return { activeState, rejoin };

packages/roomkit-react/src/Prebuilt/components/AuthToken.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useSessionStorage } from 'react-use';
+import { match } from 'ts-pattern';
 import { v4 as uuid } from 'uuid';
 import { useHMSActions } from '@100mslive/react-sdk';
 import { Dialog } from '../../Modal';
@@ -88,38 +89,38 @@ const convertError = error => {
     'If you think this is a mistake on our side, please reach out to us over Discord:',
     'https://discord.com/invite/kGdmszyzq2',
   );
-  if (error.action === 'GET_TOKEN' && error.code === 403) {
-    return {
+  return match([error.action, error.code])
+    .with(['GET_TOKEN', 403], () => ({
       title: 'Psst! This room is currently inactive.',
       body: 'Please feel free to join another open room for more conversations. Thanks for stopping by!',
-    };
-  } else if (error.action === 'GET_TOKEN' && error.code === 404) {
-    return {
+    }))
+
+    .with(['GET_TOKEN', 404], () => ({
       title: 'Room code does not exist',
       body: 'We could not find a room code corresponding to this link.',
-    };
-  } else if (error.action === 'GET_TOKEN' && error.code === 2003) {
-    return {
+    }))
+    .with(['GET_TOKEN', 2003], () => ({
       title: 'Endpoint is not reachable',
       body: `Endpoint is not reachable. ${error.description}.`,
-    };
-  } else if (error.response && error.response.status === 404) {
-    return {
-      title: 'Room does not exist',
-      body: 'We could not find a room corresponding to this link.',
-    };
-  } else if (error.response && error.response.status === 403) {
-    return {
-      title: 'Accessing room using this link format is disabled',
-      body: 'You can re-enable this from the developer section in Dashboard.',
-    };
-  } else {
-    console.error('Token API Error', error);
-    return {
-      title: 'Error fetching token',
-      body: 'An error occurred while fetching the app token. Please look into logs for more details.',
-    };
-  }
+    }))
+    .otherwise(() =>
+      match(error.response?.status)
+        .with(404, () => ({
+          title: 'Room does not exist',
+          body: 'We could not find a room corresponding to this link.',
+        }))
+        .with(403, () => ({
+          title: 'Accessing room using this link format is disabled',
+          body: 'You can re-enable this from the developer section in Dashboard.',
+        }))
+        .otherwise(() => {
+          console.error('Token API Error', error);
+          return {
+            title: 'Error fetching token',
+            body: 'An error occurred while fetching the app token. Please look into logs for more details.',
+          };
+        }),
+    );
 };
 
 export default AuthToken;

packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -70,20 +70,6 @@ export const VideoStreamingSection = ({
     return null;
   }
 
-  let ViewComponent;
-  if (screenType === 'hls_live_streaming') {
-    ViewComponent = <HLSView />;
-  } else if (localPeerRole === waitingViewerRole) {
-    ViewComponent = <WaitingView />;
-  } else if (pdfAnnotatorActive) {
-    ViewComponent = <PDFView />;
-  } else if (urlToIframe) {
-    ViewComponent = <EmbedView />;
-  } else {
-    //@ts-ignore
-    ViewComponent = <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
-  }
-
   return (
     <Suspense fallback={<FullPageProgress />}>
       <Flex
@@ -97,7 +83,28 @@ export const VideoStreamingSection = ({
           .with({ isMobileHLSStream: true }, () => 'column')
           .otherwise(() => 'row')}
       >
-        {ViewComponent}
+        {match({ screenType, localPeerRole, pdfAnnotatorActive, urlToIframe })
+          .with(
+            {
+              screenType: 'hls_live_streaming',
+            },
+            () => <HLSView />,
+          )
+          .when(
+            ({ localPeerRole }) => localPeerRole === waitingViewerRole,
+            () => <WaitingView />,
+          )
+          .with({ pdfAnnotatorActive: true }, () => <PDFView />)
+          .when(
+            ({ urlToIframe }) => !!urlToIframe,
+            () => <EmbedView />,
+          )
+
+          .otherwise(() => {
+            // @ts-ignore
+            return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
+          })}
+
         <Box
           css={{
             flex: match({ isLandscapeHLSStream, isMobileHLSStream })