Implemented closing of InfoDialog

src/components/InfoDialogComponent/InfoDialogComponent.tsx

@@ -18,6 +18,7 @@ export interface Stat {
 
 export interface InfoDialogComponentProps {
   openDialog: boolean;
+  closeDialog: () => void;
   id: number;
   name: string;
   types: string[];
@@ -34,6 +35,7 @@ export interface InfoDialogComponentProps {
 
 const InfoDialog = ({
   openDialog,
+  closeDialog,
   id,
   name,
   types,
@@ -54,6 +56,7 @@ const InfoDialog = ({
       <Dialog
         aria-labelledby="customized-dialog-title"
         open={openDialog}
+        onClose={closeDialog}
         fullWidth
         maxWidth="md"
         className="dialog__bg noselect"

src/features/InfoDialog/InfoDialog.tsx

@@ -1,6 +1,7 @@
-import { useAppSelector } from 'app/hooks';
+import { useAppDispatch, useAppSelector } from 'app/hooks';
 
 import InfoDialogComponent from 'components/InfoDialogComponent';
+import { setCloseDialog } from './infoDialogSlice';
 
 export interface InfoDialogProps {
   open: boolean;
@@ -8,6 +9,8 @@ export interface InfoDialogProps {
 }
 
 const InfoDialog = () => {
+  const dispatch = useAppDispatch();
+
   const isOpen = useAppSelector(state => state.infoDialog.isOpen);
   const selectedInfoDialogDetails = useAppSelector(
     state => state.infoDialog.InfoDialogDetails,
@@ -17,6 +20,7 @@ const InfoDialog = () => {
     <>
       <InfoDialogComponent
         openDialog={isOpen}
+        closeDialog={() => dispatch(setCloseDialog(null))}
         id={selectedInfoDialogDetails.id}
         name={selectedInfoDialogDetails.name}
         types={selectedInfoDialogDetails.types}

src/features/InfoDialog/infoDialogSlice.ts

@@ -186,6 +186,9 @@ export const infoDialogSlice: Slice<InfoDialogStateProps> = createSlice({
     setIsOpen: (state, action: PayloadAction<boolean>) => {
       state.isOpen = action.payload;
     },
+    setCloseDialog: (state, action: PayloadAction<null>) => {
+      state.isOpen = false;
+    },
   },
   extraReducers: builder => {
     builder.addCase(fetchSelectedPokemonInfo.fulfilled, (state, action) => {
@@ -197,6 +200,6 @@ export const infoDialogSlice: Slice<InfoDialogStateProps> = createSlice({
   },
 });
 
-export const { setIsOpen } = infoDialogSlice.actions;
+export const { setIsOpen, setCloseDialog } = infoDialogSlice.actions;
 
 export default infoDialogSlice.reducer;