Refactor disable button function

escape-link · Oct 18, 2023 · c9ccaa6 · c9ccaa6
1 parent 468f8ec
commit c9ccaa6
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 19 deletions.
diff --git a/src/PuzzleThree/PuzzleThree.js b/src/PuzzleThree/PuzzleThree.js
@@ -19,7 +19,7 @@ export default function PuzzleThree({
     if (answer.toLowerCase() === 'aliens') {
       setWinConditions([...winConditions, answer]);
       onClose();
-      setIsDisabled(true)
+      setIsDisabled()
     } else {
       setIncorrect('Incorrect: Please try again');
     }

diff --git a/src/components/PuzzleOne/PuzzleOne.js b/src/components/PuzzleOne/PuzzleOne.js
@@ -19,7 +19,7 @@ export default function PuzzleOne({
     if (answer.toLowerCase() === 'portal') {
       setWinConditions([...winConditions, answer]);
       onClose();
-      setIsDisabled(true);
+      setIsDisabled();
     } else {
       setIncorrect('Incorrect: Please try again');
     }

diff --git a/src/components/PuzzleTwo/PuzzleTwo.js b/src/components/PuzzleTwo/PuzzleTwo.js
@@ -19,7 +19,7 @@ export default function PuzzleTwo({
     if (answer === '94.5') {
       setWinConditions([...winConditions, answer]);
       onClose();
-      setIsDisabled(true)
+      setIsDisabled()
     } else {
       setIncorrect('Incorrect: Please try again');
     }

diff --git a/src/components/Room/Room.css b/src/components/Room/Room.css
@@ -61,12 +61,6 @@
   pointer-events: none;
 }
 
-/* .clock-btn.disabled:hover,
-.desk-comp-btn.disabled:hover {
-  background-color: transparent;
-  border: none;
-} */
-
 .plant-btn {
   grid-area: plant;
   display: flex;

diff --git a/src/components/Room/Room.js b/src/components/Room/Room.js
@@ -32,13 +32,10 @@ export default function Room() {
   })
   console.log(winConditions)
 
-  const setPuzzleState = (puzzleNum, isDisabled) => {
-    setIsDisabled ({...puzzleNum,[puzzleNum]: isDisabled })
+  const setPuzzleState = (puzzleNum) => {
+    setIsDisabled (prevIsDisabled => ({...prevIsDisabled,[puzzleNum]: true }))
   }
 
-console.log('2',isDisabled.puzzleTwo)
-console.log('3',isDisabled.puzzleThree)
-
   const roomStyle = {
     "--room-bg": lampClicked ? 'none' : `url(${blueBackground})`,
   };
@@ -105,11 +102,11 @@ console.log('3',isDisabled.puzzleThree)
       <button className={`radio-btn ${isDisabled.puzzleTwo ? 'disabled': 'active'}`} onClick={handleRadioClick}>
         <img className="radio" src={radio} alt="radio" />
       </button>
-      {showPuzzleOne && <PuzzleOne isDisabled={isDisabled} setIsDisabled={(isDisabled) => setPuzzleState('puzzleOne', isDisabled)} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleOne} />}
-      {showPuzzleTwo && <PuzzleTwo isDisabled={isDisabled} setIsDisabled={(isDisabled) => setPuzzleState('puzzleTwo', isDisabled)} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleTwo} />}
-      {showPuzzleThree && <PuzzleThree isDisabled={isDisabled} setIsDisabled={(isDisabled) => setPuzzleState('puzzleThree', isDisabled)} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleThree} />}
-      {showPuzzleFour && <PuzzleFour isDisabled={isDisabled} setIsDisabled={(isDisabled) => setPuzzleState('puzzleFour', isDisabled)} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleFour} />}
-      {showPuzzleFive && <PuzzleFive isDisabled={isDisabled} setIsDisabled={(isDisabled) => setPuzzleState('puzzleFive', isDisabled)} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleFive} />}
+      {showPuzzleOne && <PuzzleOne  setIsDisabled={() => setPuzzleState('puzzleOne')} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleOne} />}
+      {showPuzzleTwo && <PuzzleTwo setIsDisabled={() => setPuzzleState( 'puzzleTwo')} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleTwo} />}
+      {showPuzzleThree && <PuzzleThree setIsDisabled={() => setPuzzleState( 'puzzleThree')} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleThree} />}
+      {showPuzzleFour && <PuzzleFour  setIsDisabled={() => setPuzzleState('puzzleFour')} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleFour} />}
+      {showPuzzleFive && <PuzzleFive setIsDisabled={() => setPuzzleState( 'puzzleFive')} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleFive} />}
     </article>
   );
 }