Merge pull request #488 from Hemil36/InfoDialog-Feature

Add InfoDialog component and integrate with Redux for state management

Author: rahulharpal1603

frontend/src/App.tsx

@@ -5,17 +5,25 @@ import { AppRoutes } from '@/routes/AppRoutes';
 import { ThemeProvider } from '@/contexts/ThemeContext';
 import QueryClientProviders from '@/config/QueryClientProvider';
 import { GlobalLoader } from './components/Loader/GlobalLoader';
+import { InfoDialog } from './components/Dialog/InfoDialog';
 import { useSelector } from 'react-redux';
 import { RootState } from './app/store';
 const App: React.FC = () => {
   const { loading, message } = useSelector((state: RootState) => state.loader);
+  const {
+    isOpen,
+    title,
+    message: infoMessage,
+    variant,
+  } = useSelector((state: RootState) => state.infoDialog);
   return (
     <ThemeProvider>
       <QueryClientProviders>
         <BrowserRouter>
           <AppRoutes />
         </BrowserRouter>
         <GlobalLoader loading={loading} message={message} />
+        <InfoDialog isOpen={isOpen} title={title} message={infoMessage} variant={variant} />
       </QueryClientProviders>
     </ThemeProvider>
   );

frontend/src/app/store.ts

@@ -1,10 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit';
 import loaderReducer from '@/features/loaderSlice';
 import onboardingReducer from '@/features/onboardingSlice';
+import infoDialogReducer from '@/features/infoDialogSlice';
+
 export const store = configureStore({
   reducer: {
     loader: loaderReducer,
     onboarding: onboardingReducer,
+    infoDialog: infoDialogReducer,
   },
 });
 

frontend/src/components/Dialog/InfoDialog.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Info, AlertTriangle } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { InfoDialogProps } from '@/types/infoDialog';
+import { useDispatch } from 'react-redux';
+import { hideInfoDialog } from '@/features/infoDialogSlice';
+
+export const InfoDialog: React.FC<InfoDialogProps> = ({
+  isOpen,
+  title,
+  message,
+  variant = 'info',
+}) => {
+  const dispatch = useDispatch();
+
+  const handleClose = () => {
+    dispatch(hideInfoDialog());
+  };
+
+  // Define styles and icons based on variant
+  const variantStyles = {
+    info: {
+      iconColor: 'text-primary',
+      messageColor: '',
+      icon: <Info className="h-5 w-5" />,
+      buttonVariant: 'default' as const,
+    },
+    error: {
+      iconColor: 'text-destructive',
+      messageColor: 'text-destructive',
+      icon: <AlertTriangle className="h-5 w-5" />,
+      buttonVariant: 'destructive' as const,
+    },
+  };
+
+  const { icon, iconColor, messageColor, buttonVariant } = variantStyles[variant];
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) handleClose();
+      }}
+    >
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <span className={iconColor}>{icon}</span>
+            {title}
+          </DialogTitle>
+          <DialogDescription className={messageColor}>{message}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant={buttonVariant} onClick={handleClose}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

frontend/src/features/infoDialogSlice.ts

@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { InfoDialogProps, InfoDialogVariant } from '@/types/infoDialog';
+
+const initialState: InfoDialogProps = {
+  isOpen: false,
+  title: '',
+  message: '',
+  variant: 'info',
+};
+
+const infoDialogSlice = createSlice({
+  name: 'infoDialog',
+  initialState,
+  reducers: {
+    showInfoDialog(
+      state,
+      action: PayloadAction<{ 
+        title: string; 
+        message: string;
+        variant?: InfoDialogVariant;
+      }>,
+    ) {
+      state.isOpen = true;
+      state.title = action.payload.title;
+      state.message = action.payload.message;
+      state.variant = action.payload.variant || 'info';
+    },
+    hideInfoDialog(state) {
+      state.isOpen = false;
+      state.title = '';
+      state.message = '';
+      state.variant = 'info';
+    },
+  },
+});
+
+export const { showInfoDialog, hideInfoDialog } = infoDialogSlice.actions;
+export default infoDialogSlice.reducer;

frontend/src/pages/SettingsPage/Settings.tsx

@@ -17,6 +17,7 @@ import { usePictoMutation } from '@/hooks/useQueryExtensio';
 
 import { useDispatch } from 'react-redux';
 import { showLoader, hideLoader } from '@/features/loaderSlice';
+import { showInfoDialog } from '@/features/infoDialogSlice';
 
 import {
   deleteFolder,
@@ -84,6 +85,16 @@ const Settings: React.FC = () => {
       const hasUpdate = await checkForUpdates();
       if (hasUpdate) {
         setUpdateDialogOpen(true);
+      } else {
+        // Show info dialog when no updates are available
+        dispatch(
+          showInfoDialog({
+            title: 'No Updates Available',
+            message:
+              'Your application is already up to date with the latest version.',
+            variant: 'info',
+          }),
+        );
       }
       dispatch(hideLoader());
     };
@@ -113,9 +124,23 @@ const Settings: React.FC = () => {
       const result = await deleteCache();
       if (result) {
         console.log('Cache deleted');
+        dispatch(
+          showInfoDialog({
+            title: 'Cache Refreshed',
+            message: 'The application cache has been successfully refreshed.',
+            variant: 'info',
+          }),
+        );
       }
     } catch (error) {
       console.error('Error deleting cache:', error);
+      dispatch(
+        showInfoDialog({
+          title: 'Cache Refresh Error',
+          message: 'Failed to refresh the application cache. Please try again.',
+          variant: 'error',
+        }),
+      );
     }
   };
 
@@ -134,10 +159,21 @@ const Settings: React.FC = () => {
   };
 
   const showErrorDialog = (title: string, err: unknown) => {
+    const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred';
+    
+    // Use the InfoDialog with error variant for consistent UI
+    dispatch(
+      showInfoDialog({
+        title,
+        message: errorMessage,
+        variant: 'error',
+      }),
+    );
+    
+    // Also set the legacy error dialog content for backward compatibility
     setErrorDialogContent({
       title,
-      description:
-        err instanceof Error ? err.message : 'An unknown error occurred',
+      description: errorMessage,
     });
   };
 
@@ -235,7 +271,6 @@ const Settings: React.FC = () => {
           </p>
         </div>
       </div>
-
       <ErrorDialog
         content={errorDialogContent}
         onClose={() => setErrorDialogContent(null)}

frontend/src/types/infoDialog.ts

@@ -0,0 +1,8 @@
+export type InfoDialogVariant = 'info' | 'error';
+
+export interface InfoDialogProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  variant?: InfoDialogVariant;
+}