its own file

Author: Thomas Wang

packages/classic-webview/src/hooks/useGame.tsx

@@ -4,12 +4,7 @@ import { sendMessageToDevvit } from '../utils';
 import { useDevvitListener } from './useDevvitListener';
 import { logger } from '../utils/logger';
 import { useMocks } from './useMocks';
-
-type WordSubmissionStateContext = {
-  isSubmitting: boolean;
-  setIsSubmitting: (isSubmitting: boolean) => void;
-};
-const WordSubmissionContext = createContext<WordSubmissionStateContext | null>(null);
+import { useWordSubmission } from './useWordSubmission';
 
 const GameContext = createContext<Partial<Game>>({});
 const GameUpdaterContext = createContext<React.Dispatch<
@@ -19,7 +14,7 @@ const GameUpdaterContext = createContext<React.Dispatch<
 export const GameContextProvider = ({ children }: { children: React.ReactNode }) => {
   const mocks = useMocks();
   const [game, setGame] = useState<Partial<Game>>(mocks.getMock('mocks')?.game ?? {});
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { setIsSubmitting } = useWordSubmission();
 
   const initResponse = useDevvitListener('GAME_INIT_RESPONSE');
   const submissionResponse = useDevvitListener('WORD_SUBMITTED_RESPONSE');
@@ -47,7 +42,7 @@ export const GameContextProvider = ({ children }: { children: React.ReactNode })
       setGame(submissionResponse);
       setIsSubmitting(false);
     }
-  }, [submissionResponse]);
+  }, [submissionResponse, setIsSubmitting]);
 
   useEffect(() => {
     logger.log('Hint response: ', hintResponse);
@@ -65,9 +60,7 @@ export const GameContextProvider = ({ children }: { children: React.ReactNode })
 
   return (
     <GameUpdaterContext.Provider value={setGame}>
-      <WordSubmissionContext.Provider value={{ isSubmitting, setIsSubmitting }}>
-        <GameContext.Provider value={game}>{children}</GameContext.Provider>
-      </WordSubmissionContext.Provider>
+      <GameContext.Provider value={game}>{children}</GameContext.Provider>
     </GameUpdaterContext.Provider>
   );
 };
@@ -87,11 +80,3 @@ export const useSetGame = () => {
   }
   return setGame;
 };
-
-export const useWordSubmission = () => {
-  const context = useContext(WordSubmissionContext);
-  if (context === null) {
-    throw new Error('useWordSubmission must be used within a WordSubmissionProvider');
-  }
-  return context;
-};

packages/classic-webview/src/hooks/useWordSubmission.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext, ReactNode, useState } from 'react';
+
+type WordSubmissionStateContext = {
+  isSubmitting: boolean;
+  setIsSubmitting: (isSubmitting: boolean) => void;
+};
+
+const WordSubmissionContext = createContext<WordSubmissionStateContext | null>(null);
+
+export const WordSubmissionProvider = ({ children }: { children: ReactNode }) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  return (
+    <WordSubmissionContext.Provider value={{ isSubmitting, setIsSubmitting }}>
+      {children}
+    </WordSubmissionContext.Provider>
+  );
+};
+
+export const useWordSubmission = () => {
+  const context = useContext(WordSubmissionContext);
+  if (context === null) {
+    throw new Error('useWordSubmission must be used within a WordSubmissionProvider');
+  }
+  return context;
+};

packages/classic-webview/src/main.tsx

@@ -12,6 +12,7 @@ import { ConfirmationDialogProvider } from '@hotandcold/webview-common/hooks/use
 import { IS_DETACHED } from './constants';
 import { ModalContextProvider } from './hooks/useModal';
 import { HardcoreAccessContextProvider } from './hooks/useHardcoreAccess';
+import { WordSubmissionProvider } from './hooks/useWordSubmission';
 
 console.log('webview main called');
 
@@ -25,13 +26,15 @@ createRoot(document.getElementById('root')!).render(
       <ConfirmationDialogProvider>
         <UserSettingsContextProvider>
           <HardcoreAccessContextProvider>
-            <GameContextProvider>
-              <ModalContextProvider>
-                <PageContextProvider>
-                  <App />
-                </PageContextProvider>
-              </ModalContextProvider>
-            </GameContextProvider>
+            <WordSubmissionProvider>
+              <GameContextProvider>
+                <ModalContextProvider>
+                  <PageContextProvider>
+                    <App />
+                  </PageContextProvider>
+                </ModalContextProvider>
+              </GameContextProvider>
+            </WordSubmissionProvider>
           </HardcoreAccessContextProvider>
         </UserSettingsContextProvider>
       </ConfirmationDialogProvider>

packages/classic-webview/src/pages/PlayPage.tsx

@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react';
 import { sendMessageToDevvit } from '../utils';
 import { WordInput } from '@hotandcold/webview-common/components/wordInput';
 import { Guesses } from '../components/guesses';
-import { useGame, useWordSubmission } from '../hooks/useGame';
+import { useGame } from '../hooks/useGame';
+import { useWordSubmission } from '../hooks/useWordSubmission';
 import { useDevvitListener } from '../hooks/useDevvitListener';
 import clsx from 'clsx';
 import { FeedbackResponse } from '@hotandcold/classic-shared';
@@ -15,14 +16,17 @@ import { UnlockHardcoreCTAContent } from '../components/UnlockHardcoreCTAContent
 
 const useFeedback = (): { feedback: FeedbackResponse | null; dismissFeedback: () => void } => {
   const [feedback, setFeedback] = useState<FeedbackResponse | null>(null);
-  const { setIsSubmitting } = useWordSubmission();
   const message = useDevvitListener('FEEDBACK');
+  const { setIsSubmitting } = useWordSubmission();
 
   useEffect(() => {
     if (!message) return;
-    setFeedback(message);
+
+    // Reset the submission state when feedback is received
+    // This handles the case where the user submits a word they've already guessed
     setIsSubmitting(false);
-  }, [message]);
+    setFeedback(message);
+  }, [message, setIsSubmitting]);
 
   const dismissFeedback = () => {
     setFeedback(null);