fix: improve dialog handling and error management in list items (#257)

* fix: improve dialog handling and error management in list items

* chore: lint

src/views/components/common/DialogProvider/DialogProvider.tsx

@@ -87,8 +87,8 @@ export default function DialogProvider(props: { children: ReactNode }): JSX.Elem
                 key={id}
                 onClose={handleClose}
                 afterLeave={onLeave}
-                title={infoUnwrapped.title}
-                description={infoUnwrapped.description}
+                title=<>{infoUnwrapped.title}</>
+                description=<>{infoUnwrapped.description}</>
                 appear
                 show={show}
                 className={infoUnwrapped.className}

src/views/components/common/ScheduleListItem.tsx

@@ -10,7 +10,7 @@ import XIcon from '~icons/material-symbols/close';
 import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
 
 import { Button } from './Button';
-import PromptDialog from './Prompt';
+import { usePrompt } from './DialogProvider/DialogProvider';
 
 /**
  * Props for the ScheduleListItem component.
@@ -31,6 +31,8 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
     const [editorValue, setEditorValue] = useState(schedule.name);
     const [error, setError] = useState<string | undefined>(undefined);
 
+    const showDialog = usePrompt();
+
     const editorRef = React.useRef<HTMLInputElement>(null);
     useEffect(() => {
         const editor = editorRef.current;
@@ -58,24 +60,25 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
         deleteSchedule(schedule.id).catch(e => setError(e.message));
     };
 
+    useEffect(() => {
+        if (error) {
+            console.error(error);
+            showDialog({
+                title: <span className='text-ut-red'>Something went wrong.</span>,
+                description: error,
+                // eslint-disable-next-line react/no-unstable-nested-components
+                buttons: close => (
+                    <Button variant='filled' color='ut-black' onClick={close}>
+                        I understand
+                    </Button>
+                ),
+                onClose: () => setError(undefined),
+            });
+        }
+    });
+
     return (
         <div className='rounded bg-white'>
-            <PromptDialog
-                isOpen={!!error}
-                onClose={() => setError(undefined)}
-                title={
-                    <Text className='text-red' variant='h4'>
-                        Something Went Wrong
-                    </Text>
-                }
-                content={<Text variant='p'>{error}</Text>}
-                // eslint-disable-next-line react/no-children-prop
-                children={[
-                    <Button key='yes' variant='filled' color='ut-black' onClick={() => setError(undefined)}>
-                        I understand
-                    </Button>,
-                ]}
-            />
             <li className='w-full flex cursor-pointer items-center text-ut-burntorange'>
                 <div className='h-full cursor-move focusable' {...dragHandleProps}>
                     <DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />