GameProposal: Cancel

show button only if cancelable game is selected

webapp/src/container/games/action/Accept.jsx

@@ -1,6 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { GamesContext } from '../../../context/games';
 
 export default function Accept() {
+    const games = useContext(GamesContext);
 
-    return <button className='Accept'>Accept</button>
+    const selectedGame = games.findGame({ uuid: games.proposal.selectedUUID });
-}
+
+    if (selectedGame?.status !== 'GAME_PROPOSAL_WAIT_FOR_OPPONENT')
+        return (
+            <button className='Accept'>
+                Accept
+            </button>
+        )
+}

webapp/src/container/games/action/Cancel.jsx

@@ -1,6 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { GamesContext } from '../../../context/games';
 
 export default function Cancel() {
+    const games = useContext(GamesContext);
 
-    return <button className='Cancel'>Cancel</button>
+    const selectedGame = games.findGame({ uuid: games.proposal.selectedUUID });
+
+    if (selectedGame?.status === 'GAME_PROPOSAL_WAIT_FOR_OPPONENT')
+        return (
+            <button className='Cancel'>
+                Cancel
+            </button>
+        )
 }

webapp/src/container/games/action/Reject.jsx

@@ -1,6 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { GamesContext } from '../../../context/games';
 
 export default function Reject() {
+    const games = useContext(GamesContext);
 
-    return <button className='Reject'>Reject</button>
+    const selectedGame = games.findGame({ uuid: games.proposal.selectedUUID });
-}
+
+    if (selectedGame?.status !== 'GAME_PROPOSAL_WAIT_FOR_OPPONENT')
+        return (
+            <button className='Reject'>
+                Reject
+            </button>
+        )
+}

webapp/src/container/games/view/GameSelector.jsx

@@ -7,8 +7,6 @@ import Loading from '../../../components/Loading';
 import Counter from '../../../components/Counter';
 
 export default function GameSelector({ yours, opponents, isSelected, onSelect }) {
-    const games = useContext(GamesContext);
-
     const gamesList = useContext(GamesContext).gamesList;
     if (gamesList === null)
         return <Loading />

webapp/src/reducer/games.js

@@ -17,6 +17,8 @@ const initialState = {
   // Network
   isPollingGamesList: false,
   isPushingNewGame: false,
+
+  findGame,
 };
 
 function reducer(state, action) {
@@ -44,4 +46,8 @@ function reducer(state, action) {
 
 export default function useGamesReducer() {
   return useReducer(reducer, initialState);
+}
+
+function findGame({uuid}) {
+  return this.gamesList?.find((game) => game.uuid === uuid);
 }