studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(frontend) refactor toast selection to use a switch

Browse Source 
More extensible design. Still a poor piece of code.
Technical debt here.
This commit is contained in:
lebaudantoine
2025-02-14 15:02:26 +01:00
committed by aleb_the_flash
parent 291544bd52
commit 5af64e539d
1 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/frontend/src/features/notifications/components/ToastRegion.tsx
View File

@@ -1,5 +1,5 @@
import { AriaToastRegionProps, useToastRegion } from '@react-aria/toast'
import type { ToastState } from '@react-stately/toast'
import type { QueuedToast, ToastState } from '@react-stately/toast'
import { Toast } from './Toast'
import { useRef } from 'react'
import { NotificationType } from '../NotificationType'
@@ -14,31 +14,39 @@ interface ToastRegionProps extends AriaToastRegionProps {
state: ToastState<ToastData>
}
const renderToast = (
toast: QueuedToast<ToastData>,
state: ToastState<ToastData>
) => {
switch (toast.content?.type) {
case NotificationType.ParticipantJoined:
return <ToastJoined key={toast.key} toast={toast} state={state} />
case NotificationType.HandRaised:
return <ToastRaised key={toast.key} toast={toast} state={state} />
case NotificationType.ParticipantMuted:
return <ToastMuted key={toast.key} toast={toast} state={state} />
case NotificationType.MessageReceived:
return (
<ToastMessageReceived key={toast.key} toast={toast} state={state} />
)
case NotificationType.LowerHand:
return <ToastLowerHand key={toast.key} toast={toast} state={state} />
default:
return <Toast key={toast.key} toast={toast} state={state} />
}
}
export function ToastRegion({ state, ...props }: ToastRegionProps) {
const ref = useRef(null)
const { regionProps } = useToastRegion(props, state, ref)
return (
<div {...regionProps} ref={ref} className="toast-region">
{state.visibleToasts.map((toast) => {
if (toast.content?.type === NotificationType.ParticipantJoined) {
return <ToastJoined key={toast.key} toast={toast} state={state} />
}
if (toast.content?.type === NotificationType.HandRaised) {
return <ToastRaised key={toast.key} toast={toast} state={state} />
}
if (toast.content?.type === NotificationType.ParticipantMuted) {
return <ToastMuted key={toast.key} toast={toast} state={state} />
}
if (toast.content?.type === NotificationType.MessageReceived) {
return (
<ToastMessageReceived key={toast.key} toast={toast} state={state} />
)
}
if (toast.content?.type === NotificationType.LowerHand) {
return <ToastLowerHand key={toast.key} toast={toast} state={state} />
}
return <Toast key={toast.key} toast={toast} state={state} />
})}
{state.visibleToasts.map((toast) => renderToast(toast, state))}
</div>
)
}