From d27ad13e57d9edee06aa0a9820bf23e436d73471 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Thu, 18 May 2023 22:59:36 +1000
Subject: [PATCH] Implemented closing of InfoDialog

---
 src/components/InfoDialogComponent/InfoDialogComponent.tsx | 3 +++
 src/features/InfoDialog/InfoDialog.tsx                     | 6 +++++-
 src/features/InfoDialog/infoDialogSlice.ts                 | 5 ++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/InfoDialogComponent/InfoDialogComponent.tsx b/src/components/InfoDialogComponent/InfoDialogComponent.tsx
index 8204f25..10361a6 100644
--- a/src/components/InfoDialogComponent/InfoDialogComponent.tsx
+++ b/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"
diff --git a/src/features/InfoDialog/InfoDialog.tsx b/src/features/InfoDialog/InfoDialog.tsx
index 3325bcc..f88f758 100644
--- a/src/features/InfoDialog/InfoDialog.tsx
+++ b/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}
diff --git a/src/features/InfoDialog/infoDialogSlice.ts b/src/features/InfoDialog/infoDialogSlice.ts
index bcbcc3a..877aabf 100644
--- a/src/features/InfoDialog/infoDialogSlice.ts
+++ b/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;