fix(frontend): fix submission status flickering

4 files changed, 46 insertions, 10 deletions

diff --git a/backend/api/handler.go b/backend/api/handler.go
index 04dbd5d..39fa0c2 100644
--- a/backend/api/handler.go
+++ b/backend/api/handler.go
@@ -292,7 +292,7 @@ func (h *Handler) PostGamePlaySubmit(ctx context.Context, request PostGamePlaySu
 	code := request.Body.Code
 	codeSize := h.hub.CalcCodeSize(code)
 	// TODO: transaction
-	err := h.q.UpdateCode(ctx, db.UpdateCodeParams{
+	err := h.q.UpdateCodeAndStatus(ctx, db.UpdateCodeAndStatusParams{
 		GameID: int32(gameID),
 		UserID: int32(userID),
 		Code:   code,
diff --git a/backend/db/query.sql.go b/backend/db/query.sql.go
index abf2631..da13f33 100644
--- a/backend/db/query.sql.go
+++ b/backend/db/query.sql.go
@@ -343,6 +343,7 @@ JOIN users ON game_states.user_id = users.user_id
 JOIN submissions ON game_states.best_score_submission_id = submissions.submission_id
 WHERE game_states.game_id = $1
 ORDER BY submissions.code_size ASC, submissions.created_at ASC
+LIMIT 30
 `
 
 type GetRankingRow struct {
@@ -716,6 +717,30 @@ func (q *Queries) UpdateCode(ctx context.Context, arg UpdateCodeParams) error {
 	return err
 }
 
+const updateCodeAndStatus = `-- name: UpdateCodeAndStatus :exec
+INSERT INTO game_states (game_id, user_id, code, status)
+VALUES ($1, $2, $3, $4)
+ON CONFLICT (game_id, user_id)
+DO UPDATE SET code = EXCLUDED.code, status = EXCLUDED.status
+`
+
+type UpdateCodeAndStatusParams struct {
+	GameID int32
+	UserID int32
+	Code   string
+	Status string
+}
+
+func (q *Queries) UpdateCodeAndStatus(ctx context.Context, arg UpdateCodeAndStatusParams) error {
+	_, err := q.db.Exec(ctx, updateCodeAndStatus,
+		arg.GameID,
+		arg.UserID,
+		arg.Code,
+		arg.Status,
+	)
+	return err
+}
+
 const updateGame = `-- name: UpdateGame :exec
 UPDATE games
 SET
diff --git a/backend/query.sql b/backend/query.sql
index 32f9273..2d56c1c 100644
--- a/backend/query.sql
+++ b/backend/query.sql
@@ -156,6 +156,12 @@ VALUES ($1, $2, $3, $4)
 ON CONFLICT (game_id, user_id)
 DO UPDATE SET code = EXCLUDED.code;
 
+-- name: UpdateCodeAndStatus :exec
+INSERT INTO game_states (game_id, user_id, code, status)
+VALUES ($1, $2, $3, $4)
+ON CONFLICT (game_id, user_id)
+DO UPDATE SET code = EXCLUDED.code, status = EXCLUDED.status;
+
 -- name: CreateSubmission :one
 INSERT INTO submissions (game_id, user_id, code, code_size, status)
 VALUES ($1, $2, $3, $4, 'running')
diff --git a/frontend/app/components/GolfPlayApp.tsx b/frontend/app/components/GolfPlayApp.tsx
index 25b81af..7953bac 100644
--- a/frontend/app/components/GolfPlayApp.tsx
+++ b/frontend/app/components/GolfPlayApp.tsx
@@ -61,15 +61,20 @@ export default function GolfPlayApp({ game, player, initialGameState }: Props) {
 		}
 	}, 1000);
 
-	const onCodeSubmit = useDebouncedCallback(async (code: string) => {
-		if (code === "") {
-			return;
-		}
-		console.log("player:c2s:submit");
-		handleSubmitCodePre();
-		await apiClient.postGamePlaySubmit(game.game_id, code);
-		handleSubmitCodePost();
-	}, 1000);
+	const onCodeSubmit = useDebouncedCallback(
+		async (code: string) => {
+			if (code === "") {
+				return;
+			}
+			console.log("player:c2s:submit");
+			handleSubmitCodePre();
+			await apiClient.postGamePlaySubmit(game.game_id, code);
+			await new Promise((resolve) => setTimeout(resolve, 2000));
+			handleSubmitCodePost();
+		},
+		1000,
+		{ leading: true },
+	);
 
 	const [isDataPolling, setIsDataPolling] = useState(false);