From c007aec06ec38b05233fe7d4b831ed1c301cf408 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Tue, 31 Oct 2023 18:45:09 +0100
Subject: [PATCH] if fetching ? classname + woble

---
 .../src/components/Game/GameAction/Create.jsx | 21 ++++++++++++++++---
 webapp/src/components/Game/GameSelector.jsx   |  4 ++--
 webapp/src/components/woble.css               |  3 ---
 webapp/src/context/app/reducer.js             |  1 +
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/webapp/src/components/Game/GameAction/Create.jsx b/webapp/src/components/Game/GameAction/Create.jsx
index bbcc817..34973ed 100644
--- a/webapp/src/components/Game/GameAction/Create.jsx
+++ b/webapp/src/components/Game/GameAction/Create.jsx
@@ -15,19 +15,31 @@ export default function Create() {
 
         const request = ctx.get_GameProposalRequest()
 
+        ctx.setFetching(true)
+
         postData("/api/gameproposal", request)
             .then((responce) => {
                 console.log("responce", responce) // JSON data parsed by `data.json()` call
                 ctx.clear_Message2Opponent()
+                ctx.setFetching(false)
             });
     }
 
+    console.log("ctx", ctx)
     return (
         <button
-            className={'game-action create' + (ctx.isEnabled ? ' enabled' : ' disabled')}
+            className={'game-action create'
+                + (ctx.isEnabled ? ' enabled' : ' disabled')
+                + (ctx.isFetching === true ? ' woble' : '')
+            }
             onClick={onClick}
         >
-            Create
+            <span>C</span>
+            <span>r</span>
+            <span>e</span>
+            <span>a</span>
+            <span>t</span>
+            <span>e</span>
         </button>
     )
 }
@@ -64,8 +76,11 @@ function Definitions() {
         hasCurrentUser,
         isEnabled,
 
+        isFetching: ctx.newGame.isFetching,
+        setFetching: (status) => { console.log("setFetching: ", status); dispatchCtx({ update: "newGame", isFetching: status }) },
+
         get_GameProposalRequest,
-        clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) }
+        clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) },
     }
 }
 
diff --git a/webapp/src/components/Game/GameSelector.jsx b/webapp/src/components/Game/GameSelector.jsx
index 944a75a..73c08f8 100644
--- a/webapp/src/components/Game/GameSelector.jsx
+++ b/webapp/src/components/Game/GameSelector.jsx
@@ -8,14 +8,14 @@ import Proposal from './GameSelector/GameProposal';
 
 export default function GameSelector() {
   const [data] = React.useContext(AppData)
-  const [ctx, dispatchCtx] = React.useContext(AppContext)
+  const [/*ctx*/, dispatchCtx] = React.useContext(AppContext)
 
   const { pathname } = useLocation();
   const isProposalPath = matchPath("/game/proposal/*", pathname);
   const isActivelPath  = matchPath("/game/active/*", pathname);
   const isArchivePath  = matchPath("/game/archive/*", pathname);
 
-  console.log("GameSelector appCtx", ctx)
+  // console.log("GameSelector appCtx", ctx)
 
   const onClick_proposal = (selectedGame) => {
     dispatchCtx({ component: "game-selector", selectedGameProposal: selectedGame })
diff --git a/webapp/src/components/woble.css b/webapp/src/components/woble.css
index 5844950..93f818f 100644
--- a/webapp/src/components/woble.css
+++ b/webapp/src/components/woble.css
@@ -2,9 +2,6 @@
   
   .woble {
     display: flex;
-    cursor: pointer;
-    justify-content: center; 
-    align-items: center;
   }
   
   /* .wave > span {
diff --git a/webapp/src/context/app/reducer.js b/webapp/src/context/app/reducer.js
index 08f6a10..357e399 100644
--- a/webapp/src/context/app/reducer.js
+++ b/webapp/src/context/app/reducer.js
@@ -25,6 +25,7 @@ export const initialState = {
     whitePlayer: '',
     blackPlayer: '',
     message: '',
+    isFetching: false,
   },
 
 }