From 0abb1d78abca887027002506e62a9b0b8a026a55 Mon Sep 17 00:00:00 2001
From: Stefan Niclas Heun <niclas.heun@tum.de>
Date: Fri, 20 Dec 2024 12:05:20 +0100
Subject: [PATCH] making error displays in dialog reusable

---
 .../components/ApplicationConfigDialog.tsx    | 18 ++++------------
 .../Course/AddingCourse/AddCourseDialog.tsx   | 16 ++++----------
 .../components/dialog/DialogErrorDisplay.tsx  | 21 +++++++++++++++++++
 .../dialog/DialogLoadingDisplay.tsx           | 16 ++++++++++++++
 4 files changed, 45 insertions(+), 26 deletions(-)
 create mode 100644 clients/shared_library/components/dialog/DialogErrorDisplay.tsx
 create mode 100644 clients/shared_library/components/dialog/DialogLoadingDisplay.tsx

diff --git a/clients/core/src/Application/ApplicationConfiguration/components/ApplicationConfigDialog.tsx b/clients/core/src/Application/ApplicationConfiguration/components/ApplicationConfigDialog.tsx
index 4119786..8a0f9e2 100644
--- a/clients/core/src/Application/ApplicationConfiguration/components/ApplicationConfigDialog.tsx
+++ b/clients/core/src/Application/ApplicationConfiguration/components/ApplicationConfigDialog.tsx
@@ -16,7 +16,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { UpdateCoursePhase } from '@/interfaces/course_phase'
 import { updateCoursePhase } from '../../../network/mutations/updateCoursePhase'
 import { useParams } from 'react-router-dom'
-import { AlertCircle, Loader2 } from 'lucide-react'
+import { DialogLoadingDisplay } from '@/components/dialog/DialogLoadingDisplay'
+import { DialogErrorDisplay } from '@/components/dialog/DialogErrorDisplay'
 
 interface ApplicationConfigDialogProps {
   isOpen: boolean
@@ -71,20 +72,9 @@ export function ApplicationConfigDialog({
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent>
         {isPending ? (
-          <div className='flex flex-col items-center justify-center h-48'>
-            <Loader2 className='h-10 w-10 text-primary animate-spin' />
-            <p className='mt-4 text-lg font-medium text-muted-foreground'>
-              Saving application config...
-            </p>
-          </div>
+          <DialogLoadingDisplay customMessage='Saving application config...' />
         ) : isMutateError ? (
-          <div className='flex flex-col items-center justify-center h-48'>
-            <AlertCircle className='h-10 w-10 text-destructive' />
-            <p className='mt-4 text-lg font-medium text-destructive'>Error: {error.message}</p>
-            <p className='mt-2 text-sm text-muted-foreground'>
-              Please try again or contact support if the problem persists.
-            </p>
-          </div>
+          <DialogErrorDisplay error={error} />
         ) : (
           <>
             <DialogHeader>
diff --git a/clients/core/src/Course/AddingCourse/AddCourseDialog.tsx b/clients/core/src/Course/AddingCourse/AddCourseDialog.tsx
index 1612521..6daaf79 100644
--- a/clients/core/src/Course/AddingCourse/AddCourseDialog.tsx
+++ b/clients/core/src/Course/AddingCourse/AddCourseDialog.tsx
@@ -14,8 +14,9 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { PostCourse } from '@/interfaces/post_course'
 import { postNewCourse } from '../../network/mutations/postNewCourse'
 import { useNavigate } from 'react-router-dom'
-import { AlertCircle, Loader2 } from 'lucide-react'
 import { useKeycloak } from '@/keycloak/useKeycloak'
+import { DialogLoadingDisplay } from '@/components/dialog/DialogLoadingDisplay'
+import { DialogErrorDisplay } from '@/components/dialog/DialogErrorDisplay'
 
 interface AddCourseDialogProps {
   children: React.ReactNode
@@ -112,18 +113,9 @@ export const AddCourseDialog: React.FC<AddCourseDialogProps> = ({ children }) =>
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent className='sm:max-w-[550px]'>
         {isPending ? (
-          <div className='flex flex-col items-center justify-center h-48'>
-            <Loader2 className='h-10 w-10 text-primary animate-spin' />
-            <p className='mt-4 text-lg font-medium text-muted-foreground'>Loading course data...</p>
-          </div>
+          <DialogLoadingDisplay customMessage='Updating course data...' />
         ) : isError ? (
-          <div className='flex flex-col items-center justify-center h-48'>
-            <AlertCircle className='h-10 w-10 text-destructive' />
-            <p className='mt-4 text-lg font-medium text-destructive'>Error: {error.message}</p>
-            <p className='mt-2 text-sm text-muted-foreground'>
-              Please try again or contact support if the problem persists.
-            </p>
-          </div>
+          <DialogErrorDisplay error={error} />
         ) : (
           <>
             <DialogHeader>
diff --git a/clients/shared_library/components/dialog/DialogErrorDisplay.tsx b/clients/shared_library/components/dialog/DialogErrorDisplay.tsx
new file mode 100644
index 0000000..1c7d5f8
--- /dev/null
+++ b/clients/shared_library/components/dialog/DialogErrorDisplay.tsx
@@ -0,0 +1,21 @@
+import { AlertCircle } from 'lucide-react'
+
+interface DialogErrorDisplayProps {
+  customMessage?: string
+  error: Error
+}
+
+export const DialogErrorDisplay = ({
+  customMessage,
+  error,
+}: DialogErrorDisplayProps): JSX.Element => {
+  return (
+    <div className='flex flex-col items-center justify-center h-48'>
+      <AlertCircle className='h-10 w-10 text-destructive' />
+      <p className='mt-4 text-lg font-medium text-destructive'>Error: {error.message}</p>
+      <p className='mt-2 text-sm text-muted-foreground'>
+        {customMessage ?? 'Please try again or contact the administrators if the problem persists.'}
+      </p>
+    </div>
+  )
+}
diff --git a/clients/shared_library/components/dialog/DialogLoadingDisplay.tsx b/clients/shared_library/components/dialog/DialogLoadingDisplay.tsx
new file mode 100644
index 0000000..b9738b1
--- /dev/null
+++ b/clients/shared_library/components/dialog/DialogLoadingDisplay.tsx
@@ -0,0 +1,16 @@
+import { Loader2 } from 'lucide-react'
+
+interface DialogLoadingDisplayProps {
+  customMessage?: string
+}
+
+export const DialogLoadingDisplay = ({ customMessage }: DialogLoadingDisplayProps): JSX.Element => {
+  return (
+    <div className='flex flex-col items-center justify-center h-48'>
+      <Loader2 className='h-10 w-10 text-primary animate-spin' />
+      <p className='mt-4 text-lg font-medium text-muted-foreground'>
+        {customMessage ?? 'Loading...'}
+      </p>
+    </div>
+  )
+}