From 5bf2373348f6b53136bb0fe435080946df168f3a Mon Sep 17 00:00:00 2001
From: Spencer Spenst <spencerspenst@gmail.com>
Date: Wed, 4 Oct 2023 14:34:54 -0700
Subject: [PATCH] more accurate preventKeyDownEvent

---
 components/level/gameLayout.tsx              | 24 +++++++++++++-------
 components/level/gameWrapper.tsx             | 16 +++++++------
 components/level/reviews/formattedReview.tsx | 11 +++++++--
 components/level/reviews/reviewDropdown.tsx  | 21 +++++++++++------
 components/level/reviews/reviewForm.tsx      |  1 +
 5 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/components/level/gameLayout.tsx b/components/level/gameLayout.tsx
index 51c9e711d..5af8d5d8a 100644
--- a/components/level/gameLayout.tsx
+++ b/components/level/gameLayout.tsx
@@ -45,10 +45,6 @@ export default function GameLayout({ controls, disableCheckpoints, gameState, hi
     setShowHeader(!fullScreen);
   }, [fullScreen, setShowHeader]);
 
-  useEffect(() => {
-    setPreventKeyDownEvent(isCheckpointOpen || isLevelInfoOpen);
-  }, [isCheckpointOpen, isLevelInfoOpen, setPreventKeyDownEvent]);
-
   return (
     <div className='flex flex-row h-full w-full' id='game-layout' style={{
       backgroundColor: 'var(--bg-color)',
@@ -58,7 +54,10 @@ export default function GameLayout({ controls, disableCheckpoints, gameState, hi
           <div className='flex items-center justify-center py-1 px-2 gap-1 block xl:hidden'>
             <button
               className='flex gap-2 items-center truncate'
-              onClick={() => setIsLevelInfoOpen(true)}
+              onClick={() => {
+                setIsLevelInfoOpen(true);
+                setPreventKeyDownEvent(true);
+              }}
               style={{
                 color: level.userMoves ? (level.userMoves === level.leastMoves ? 'var(--color-complete)' : 'var(--color-incomplete)') : 'var(--color)',
               }}
@@ -82,7 +81,10 @@ export default function GameLayout({ controls, disableCheckpoints, gameState, hi
             </div>
           </div>
           <LevelInfoModal
-            closeModal={() => setIsLevelInfoOpen(false)}
+            closeModal={() => {
+              setIsLevelInfoOpen(false);
+              setPreventKeyDownEvent(false);
+            }}
             isOpen={isLevelInfoOpen}
             level={level}
           />
@@ -104,7 +106,10 @@ export default function GameLayout({ controls, disableCheckpoints, gameState, hi
                 data-tooltip-content='Checkpoints'
                 data-tooltip-id='checkpoint-tooltip'
                 id='checkpointBtn'
-                onClick={() => setIsCheckpointOpen(!isCheckpointOpen)}
+                onClick={() => {
+                  setIsCheckpointOpen(!isCheckpointOpen);
+                  setPreventKeyDownEvent(true);
+                }}
               >
                 <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='w-6 h-6'>
                   <path strokeLinecap='round' strokeLinejoin='round' d='M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5' />
@@ -112,7 +117,10 @@ export default function GameLayout({ controls, disableCheckpoints, gameState, hi
               </button>
               <StyledTooltip id='checkpoint-tooltip' />
               <CheckpointsModal
-                closeModal={() => setIsCheckpointOpen(false)}
+                closeModal={() => {
+                  setIsCheckpointOpen(false);
+                  setPreventKeyDownEvent(true);
+                }}
                 isOpen={isCheckpointOpen}
               />
             </>
diff --git a/components/level/gameWrapper.tsx b/components/level/gameWrapper.tsx
index 191d0827b..849c0e350 100644
--- a/components/level/gameWrapper.tsx
+++ b/components/level/gameWrapper.tsx
@@ -1,5 +1,5 @@
 import { PageContext } from '@root/contexts/pageContext';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import Collection from '../../models/db/collection';
 import { EnrichedLevel } from '../../models/db/level';
 import User from '../../models/db/user';
@@ -19,10 +19,6 @@ export default function GameWrapper({ chapter, collection, level, onNext, onPrev
   const [postGameModalOpen, setShowPostGameModalOpen] = useState(false);
   const { setPreventKeyDownEvent } = useContext(PageContext);
 
-  useEffect(() => {
-    setPreventKeyDownEvent(postGameModalOpen);
-  }, [postGameModalOpen, setPreventKeyDownEvent]);
-
   return (
     <>
       <Game
@@ -34,11 +30,17 @@ export default function GameWrapper({ chapter, collection, level, onNext, onPrev
         level={level}
         onNext={collection ? onNext : undefined}
         onPrev={collection ? onPrev : undefined}
-        onSolve={() => setTimeout(() => setShowPostGameModalOpen(true), 200)}
+        onSolve={() => setTimeout(() => {
+          setShowPostGameModalOpen(true);
+          setPreventKeyDownEvent(true);
+        }, 200)}
       />
       <PostGameModal
         chapter={chapter}
-        closeModal={() => setShowPostGameModalOpen(false)}
+        closeModal={() => {
+          setShowPostGameModalOpen(false);
+          setPreventKeyDownEvent(false);
+        }}
         collection={collection}
         isOpen={postGameModalOpen}
         level={level}
diff --git a/components/level/reviews/formattedReview.tsx b/components/level/reviews/formattedReview.tsx
index b85205351..69a52d561 100644
--- a/components/level/reviews/formattedReview.tsx
+++ b/components/level/reviews/formattedReview.tsx
@@ -67,13 +67,14 @@ export function Stars({ stars }: StarsProps) {
 
 interface FormattedReviewProps {
   hideBorder?: boolean;
+  inModal?: boolean;
   level?: EnrichedLevel;
   onEditClick?: () => void;
   review: ReviewWithStats;
   user: User | undefined;
 }
 
-export default function FormattedReview({ hideBorder, level, onEditClick, review, user }: FormattedReviewProps) {
+export default function FormattedReview({ hideBorder, inModal, level, onEditClick, review, user }: FormattedReviewProps) {
   return (
     <div className='flex align-center justify-center text-left break-words'>
       <div
@@ -88,7 +89,13 @@ export default function FormattedReview({ hideBorder, level, onEditClick, review
               <FormattedUser id={level ? `review-${level._id.toString()}` : 'review'} user={user} />
               <FormattedDate ts={review.ts} />
             </div>
-            {onEditClick && user && <ReviewDropdown onEditClick={onEditClick} userId={user._id.toString()} />}
+            {onEditClick && user && (
+              <ReviewDropdown
+                inModal={inModal}
+                onEditClick={onEditClick}
+                userId={user._id.toString()}
+              />
+            )}
           </div>
           {level && <FormattedLevelLink id={`review-${user?._id.toString() ?? 'deleted'}`} level={level} />}
         </div>
diff --git a/components/level/reviews/reviewDropdown.tsx b/components/level/reviews/reviewDropdown.tsx
index 60740e386..29a62abb2 100644
--- a/components/level/reviews/reviewDropdown.tsx
+++ b/components/level/reviews/reviewDropdown.tsx
@@ -4,15 +4,16 @@ import { LevelContext } from '@root/contexts/levelContext';
 import { PageContext } from '@root/contexts/pageContext';
 import isCurator from '@root/helpers/isCurator';
 import classNames from 'classnames';
-import React, { Fragment, useContext, useEffect, useState } from 'react';
+import React, { Fragment, useContext, useState } from 'react';
 import DeleteReviewModal from '../../modal/deleteReviewModal';
 
 interface ReviewDropdownProps {
+  inModal?: boolean;
   onEditClick: () => void;
   userId: string;
 }
 
-export default function ReviewDropdown({ onEditClick, userId }: ReviewDropdownProps) {
+export default function ReviewDropdown({ inModal, onEditClick, userId }: ReviewDropdownProps) {
   const [isDeleteReviewOpen, setIsDeleteReviewOpen] = useState(false);
   const levelContext = useContext(LevelContext);
   const { setPreventKeyDownEvent } = useContext(PageContext);
@@ -21,10 +22,6 @@ export default function ReviewDropdown({ onEditClick, userId }: ReviewDropdownPr
   const canEdit = userId === user?._id.toString() || isCurator(user);
   const isNotAuthor = user?._id.toString() !== userId;
 
-  useEffect(() => {
-    setPreventKeyDownEvent(isDeleteReviewOpen);
-  }, [isDeleteReviewOpen, setPreventKeyDownEvent]);
-
   if (!canEdit) {
     return null;
   }
@@ -71,7 +68,13 @@ export default function ReviewDropdown({ onEditClick, userId }: ReviewDropdownPr
               {({ active }) => (
                 <div
                   className={classNames('flex w-full items-center rounded-md cursor-pointer px-3 py-2 gap-3', { 'text-red-500': isNotAuthor })}
-                  onClick={() => setIsDeleteReviewOpen(true)}
+                  onClick={() => {
+                    setIsDeleteReviewOpen(true);
+
+                    if (!inModal) {
+                      setPreventKeyDownEvent(true);
+                    }
+                  }}
                   style={{
                     backgroundColor: active ? 'var(--bg-color-3)' : undefined,
                   }}
@@ -91,6 +94,10 @@ export default function ReviewDropdown({ onEditClick, userId }: ReviewDropdownPr
       closeModal={() => {
         setIsDeleteReviewOpen(false);
         levelContext?.getReviews();
+
+        if (!inModal) {
+          setPreventKeyDownEvent(false);
+        }
       }}
       isOpen={isDeleteReviewOpen}
       userId={userId}
diff --git a/components/level/reviews/reviewForm.tsx b/components/level/reviews/reviewForm.tsx
index a4736c5a1..fd1ead61e 100644
--- a/components/level/reviews/reviewForm.tsx
+++ b/components/level/reviews/reviewForm.tsx
@@ -74,6 +74,7 @@ export default function ReviewForm({ inModal, review }: ReviewFormProps) {
       <>
         <FormattedReview
           hideBorder={true}
+          inModal={inModal}
           key={'user-formatted-review'}
           onEditClick={() => setIsEditing(true)}
           review={review}