Added callback for clearing the input after

game was saved aswell as adjusting the existing onCloseModal to not clear the name after modal was canceled.
Agreon · Oct 22, 2023 · 871428b · 871428b
1 parent d99705b
commit 871428b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/client/components/AddGameInput.tsx b/client/components/AddGameInput.tsx
@@ -7,6 +7,7 @@ import { useGamesContext } from '../providers/GamesProvider';
 import { useNotificationContext } from '../providers/NotificationProvider';
 import { useAction } from '../util/useAction';
 import { AddGameModal } from './AddGameModal';
+import { clear } from 'console';
 
 export const AddGameInput: React.FC = () => {
     const { removeNotificationsForInfoSource } = useNotificationContext();
@@ -37,11 +38,17 @@ export const AddGameInput: React.FC = () => {
     }, [searchGame, name]);
 
     const onCloseModal = useCallback(() => {
+        setGameId(null);
+        onClose();
+    }, [onClose]);
+
+    const onSaveModal = useCallback(() => {
         setGameId(null);
         setName('');
         onClose();
     }, [onClose]);
 
+
     const currentGame = useMemo(() => games.find(game => game.id === gameId), [games, gameId]);
 
     return (
@@ -75,7 +82,7 @@ export const AddGameInput: React.FC = () => {
                     removeGame={removeGame}
                     removeNotificationsForInfoSource={removeNotificationsForInfoSource}
                 >
-                    <AddGameModal show={isOpen} onClose={onCloseModal} />
+                    <AddGameModal show={isOpen} onClose={onCloseModal} onSave={onSaveModal} />
                 </GameProvider>
             }
         </>

diff --git a/client/components/AddGameModal.tsx b/client/components/AddGameModal.tsx
@@ -25,7 +25,7 @@ import { AddInfoSource } from './InfoSource/AddInfoSource';
 import { InfoSourcePreview } from './InfoSource/InfoSourcePreview';
 import { LoadingSpinner } from './LoadingSpinner';
 
-export const AddGameModal: React.FC<ModalProps> = ({ show, onClose }) => {
+export const AddGameModal: React.FC<ModalProps & {onSave: () => void}> = ({ show, onClose , onSave}) => {
     const { game, } = useGameContext();
 
     return (
@@ -56,7 +56,7 @@ export const AddGameModal: React.FC<ModalProps> = ({ show, onClose }) => {
                         {
                             game.syncing
                                 ? <AddGameLoadingScreen onClose={onClose} />
-                                : <SetupGameForm onClose={onClose} />
+                                : <SetupGameForm onClose={onClose} onSave={onSave}/>
                         }
                     </Flex>
                 </ModalBody>
@@ -115,7 +115,7 @@ const AddGameLoadingScreen: React.FC<{ onClose: () => void }> = ({ onClose }) =>
     );
 };
 
-const SetupGameForm: React.FC<{ onClose: () => void }> = ({ onClose }) => {
+const SetupGameForm: React.FC<{ onClose: () => void; onSave: () => void }> = ({ onClose, onSave }) => {
     const { user: { interestedInSources } } = useUserContext();
     const {
         game,
@@ -228,7 +228,10 @@ const SetupGameForm: React.FC<{ onClose: () => void }> = ({ onClose }) => {
                     colorScheme="teal"
                     isLoading={loading}
                     disabled={loading || game.syncing}
-                    onClick={() => onAdd({ name, continueSearching })}
+                    onClick={() => {
+                        onAdd({ name, continueSearching });
+                        onSave();
+                    }}
                 >
                     Save
                 </Button>