Client:Implemented the new modal changes in current modals

This commits updates the existing modals to use the update function if necessary and passes id for every modal. Fixes #168
shivansh-bhatnagar18 · Jun 28, 2024 · 10c0c9c · 10c0c9c
1 parent f034315
commit 10c0c9c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
@@ -241,7 +241,7 @@ const Navbar: React.FC = () => {
                                 size="medium"
                                 fontSize="text-2xl"
                                 onClick={() => {
-                                    modal.show(aboutUs, 'large', [
+                                    modal.show("aboutUsModal",aboutUs, 'large', [
                                         {
                                             text: 'Close',
                                             type: 'submit',
@@ -260,7 +260,7 @@ const Navbar: React.FC = () => {
                                 size="medium"
                                 fontSize="text-2xl"
                                 onClick={() => {
-                                    modal.show(rules, 'large', [
+                                    modal.show("rulesModal",rules, 'large', [
                                         {
                                             text: 'Close',
                                             type: 'submit',

diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useGameContext } from '../contexts/GameContext';
 import Button from '../library/button';
 import { useModal } from '../library/modal/ModalContext';
@@ -61,8 +61,23 @@ function Game() {
     const navigate = useNavigate();
     const [FirstUser, setFirstUser] = useState(true);
     const modal = useModal();
+    const initialMount = useRef(true);
     useEffect(() => {
-        modal.show(<GamePropertiesModal />, 'large', [], false);
+        if (initialMount.current) {
+            modal.show(
+                'gameModal',
+                <GamePropertiesModal playerCount={gameState.players.length} />,
+                'large',
+                [],
+                false
+            );
+            initialMount.current = false;
+        } else {
+            modal.updateContent(
+                'gameModal',
+                <GamePropertiesModal playerCount={gameState.players.length} />
+            );
+        }
         // eslint-disable-next-line
     }, [gameState.players.length, gameState.id]); // todo add the required dependencies
     const drawCard = () => {
@@ -102,7 +117,7 @@ function Game() {
         modal.hide();
     }
 
-    function GamePropertiesModal() {
+    function GamePropertiesModal({ playerCount }: { playerCount: number }) {
         const currentUser = getUser();
         const isHost =
             currentUser &&
@@ -135,7 +150,7 @@ function Game() {
                         <h2 className="text-bold font-bold  text-[#333]  font-[Kavoon] text-[20px]">
                             Players Joined :{' '}
                             <span className="text-[#555] font-[Roboto]">
-                                {gameState.players.length}
+                                {playerCount}
                             </span>
                         </h2>
                     </div>
@@ -283,7 +298,15 @@ function Game() {
             <button
                 className="fixed bottom-5 left-5 p-3 bg-lime-500 text-gray-700 rounded-full focus:outline-none transform transition-transform duration-300 hover:scale-105 hover:bg-lime-400 active:bg-lime-600 shadow-md"
                 onClick={() =>
-                    modal.show(<GamePropertiesModal />, 'large', [], false)
+                    modal.show(
+                        'gameModal',
+                        <GamePropertiesModal
+                            playerCount={gameState.players.length}
+                        />,
+                        'large',
+                        [],
+                        false
+                    )
                 }
             >
                 <IoSettings className="w-7 h-7" />

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -82,7 +82,7 @@ function Home() {
 
     const JoinGame = () => {
         // Logic to join a game
-        modal.show(<JoinGameModalContent />, 'small');
+        modal.show('joinModal', <JoinGameModalContent />, 'small');
         console.log('Join Game with code');
     };