fix: opening page re-renders + close modal button

kevinjosethomas · kevinjosethomas · commit 632041a5ad0f · 2025-10-15T13:11:00.000-04:00
diff --git a/src/components/Openings/OpeningDrillAnalysis.tsx b/src/components/Openings/OpeningDrillAnalysis.tsx
@@ -109,7 +109,7 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
           <span className="material-symbols-outlined !text-sm">
             {analysisEnabled ? 'visibility' : 'visibility_off'}
           </span>
-          {analysisEnabled ? 'Visible' : 'Hidden'}
+          {analysisEnabled ? 'Hide' : 'Show'}
         </button>
       </div>
 
diff --git a/src/components/Openings/OpeningSelectionModal.tsx b/src/components/Openings/OpeningSelectionModal.tsx
@@ -1589,7 +1589,6 @@ export const OpeningSelectionModal: React.FC<Props> = ({
               'radial-gradient(ellipse 180% 160% at 0% 100%, rgba(239, 68, 68, 0.10) 0%, transparent 72%)',
           }}
         />
-        {/* Close Button - Top Right of Modal */}
         <button
           onClick={onClose}
           className="absolute right-4 top-4 z-10 text-secondary transition-colors hover:text-primary"
diff --git a/src/hooks/useOpeningDrillController/useOpeningDrillController.ts b/src/hooks/useOpeningDrillController/useOpeningDrillController.ts
@@ -249,7 +249,12 @@ export const useOpeningDrillController = (
     setContinueAnalyzingMode(false)
   }, [currentDrill])
 
-  const gameTree = currentDrillGame?.tree || new GameTree(new Chess().fen())
+  const fallbackGameTree = useMemo(
+    () => new GameTree(new Chess().fen()),
+    [],
+  )
+
+  const gameTree = currentDrillGame?.tree || fallbackGameTree
 
   // Delegate navigation/orientation to the shared tree controller
   const treeController = useTreeController(
diff --git a/src/pages/openings/index.tsx b/src/pages/openings/index.tsx
@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import { NextPage } from 'next'
-import { useRouter } from 'next/router'
 import { useState, useEffect, useContext, useCallback, useMemo } from 'react'
+import { useRouter } from 'next/router'
 import { Chess, PieceSymbol } from 'chess.ts'
 import { AnimatePresence } from 'framer-motion'
 import type { Key } from 'chessground/types'
@@ -44,6 +44,7 @@ const OpeningsPage: NextPage = () => {
   const handleCloseModal = () => {
     router.push('/')
   }
+
   const [drillConfiguration, setDrillConfiguration] =
     useState<DrillConfiguration | null>(null)
   const [promotionFromTo, setPromotionFromTo] = useState<
@@ -58,13 +59,12 @@ const OpeningsPage: NextPage = () => {
     }
   }, [])
 
-  const emptyConfiguration: DrillConfiguration = {
-    selections: [],
-  }
-
-  const controller = useOpeningDrillController(
-    drillConfiguration || emptyConfiguration,
+  const safeConfiguration = useMemo<DrillConfiguration>(
+    () => drillConfiguration ?? { selections: [] },
+    [drillConfiguration],
   )
+
+  const controller = useOpeningDrillController(safeConfiguration)
   const { isMobile } = useContext(WindowSizeContext)
 
   const playerNames = useMemo(() => {
@@ -192,12 +192,7 @@ const OpeningsPage: NextPage = () => {
     }
   }, [controller.gameTree, controller.currentDrill?.id])
 
-  // Show selection modal when no drill configuration exists
-  useEffect(() => {
-    if (!drillConfiguration || drillConfiguration.selections.length === 0) {
-      setShowSelectionModal(true)
-    }
-  }, [drillConfiguration])
+  // Removed auto-reopen behavior so the modal can be dismissed even without configuration
 
   const handleCompleteSelection = useCallback(
     (configuration: DrillConfiguration) => {
@@ -444,11 +439,7 @@ const OpeningsPage: NextPage = () => {
   }
 
   // Show selection modal when no drill configuration exists (after model is ready)
-  if (
-    !drillConfiguration ||
-    drillConfiguration.selections.length === 0 ||
-    showSelectionModal
-  ) {
+  if (showSelectionModal) {
     return (
       <>
         <Head>
