From c999302cda24a2884e565eb54f2b97fc51e6c8b9 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Wed, 1 Nov 2023 10:39:39 +0100
Subject: [PATCH] unresponcive while fetching (#20)

Reviewed-on: http://192.168.8.55:3000/HQLAx/CordaCheckers/pulls/20
---
 webapp/src/components/Game/GameAction.css     |  4 +++-
 .../src/components/Game/GameAction/Create.jsx | 24 +++++++++++--------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/webapp/src/components/Game/GameAction.css b/webapp/src/components/Game/GameAction.css
index f581618..69f5a28 100644
--- a/webapp/src/components/Game/GameAction.css
+++ b/webapp/src/components/Game/GameAction.css
@@ -22,7 +22,9 @@
     margin: 2px;
 }
 
-.game-action.create:hover {
+.game-action.create:hover,  /* OR */
+.game-action.busy 
+{
     background-color:#00b0ff60;  
 }
 
diff --git a/webapp/src/components/Game/GameAction/Create.jsx b/webapp/src/components/Game/GameAction/Create.jsx
index 7f1efd7..5627077 100644
--- a/webapp/src/components/Game/GameAction/Create.jsx
+++ b/webapp/src/components/Game/GameAction/Create.jsx
@@ -14,7 +14,10 @@ export default function Create() {
         if (!ctx.hasCurrentUser)
             return alert("You must be one of the players");
 
-        const request = ctx.get_GameProposalRequest()
+        if (ctx.fetching === true)
+            return
+
+        const request = ctx.getGameProposalRequest()
 
         ctx.setFetching(true)
 
@@ -28,7 +31,10 @@ export default function Create() {
 
     return (
         <button
-            className={'game-action create' + (ctx.isEnabled ? ' enabled' : ' disabled')}
+            className={'game-action create'
+                + (ctx.enabled ? ' enabled' : ' disabled')
+                + (ctx.fetching ? ' busy' : '')
+            }
             onClick={onClick}
         >
             <Wobler text="Leaderboard" dance={ctx.fetching} />
@@ -50,10 +56,8 @@ function Definitions() {
 
     const hasCurrentUser = isCurrentUser(whitePlayerName) || isCurrentUser(blackPlayerName)
 
-    const isEnabled = hasPlayers && hasCurrentUser
-
-    const get_GameProposalRequest = () => {
-        const [opponentName, opponentColor] = get_Opponent(isCurrentUser, whitePlayerName, blackPlayerName)
+    const getGameProposalRequest = () => {
+        const [opponentName, opponentColor] = getOpponent(isCurrentUser, whitePlayerName, blackPlayerName)
 
         return {
             opponentName,
@@ -66,17 +70,17 @@ function Definitions() {
     return {
         hasPlayers,
         hasCurrentUser,
-        isEnabled,
+        enabled: hasPlayers && hasCurrentUser,
 
         fetching: ctx.newGame.fetching,
         setFetching: (status) => { dispatchCtx({ update: "newGame", fetching: status }) },
 
-        get_GameProposalRequest,
+        getGameProposalRequest,
         clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) },
     }
 }
 
-function get_Opponent(isCurrentUser, whitePlayerName, blackPlayerName) {
+function getOpponent(isCurrentUser, whitePlayerName, blackPlayerName) {
     if (isCurrentUser(whitePlayerName)) {
         return [blackPlayerName, BLACK()]
     }
@@ -102,6 +106,6 @@ async function postData(url = "", data = {}) {
     if (response.ok)
         return response.json()// parses JSON response into native JavaScript objects
 
-    console.log("recponce", response)
+    console.wrn(response)
     return {}
 }