From ce5fdb00af07cbb9bbb4dbf55821d61d4fe7f5c0 Mon Sep 17 00:00:00 2001
From: borisflagell <clement.delrue@gmail.com>
Date: Sun, 22 May 2022 00:57:30 +0200
Subject: [PATCH] STANEK: FIX #3669 Clearing stanek grid using API could crash
 the page.

Fix #3669 - Query the "activegrid" at each re-rerendering of the Stanek Page. Rather than using React useState and passing it as Props.

Tested with :
ns.clearLog()
ns.tail()
await ns.sleep(2000)

ns.print("Clearing gift")
await ns.sleep(1000);
ns.stanek.clearGift()
---
 src/CotMG/ui/Grid.tsx      | 8 +++++---
 src/CotMG/ui/MainBoard.tsx | 4 ----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/CotMG/ui/Grid.tsx b/src/CotMG/ui/Grid.tsx
index 898f6d947..c55f43dba 100644
--- a/src/CotMG/ui/Grid.tsx
+++ b/src/CotMG/ui/Grid.tsx
@@ -1,13 +1,13 @@
 import { TableBody, TableRow } from "@mui/material";
 import * as React from "react";
 import { ActiveFragment } from "../ActiveFragment";
+import { calculateGrid } from "../Helper";
 import { IStaneksGift } from "../IStaneksGift";
 import { Cell } from "./Cell";
 
 interface IProps {
   width: number;
   height: number;
-  activeGrid: number[][];
   ghostGrid: number[][];
   gift: IStaneksGift;
   enter(i: number, j: number): void;
@@ -32,11 +32,13 @@ function randomColor(fragment: ActiveFragment): string {
 }
 
 export function Grid(props: IProps): React.ReactElement {
+  const activeGrid = calculateGrid(props.gift)
+
   function color(worldX: number, worldY: number): string {
-    if (props.ghostGrid[worldX][worldY] && props.activeGrid[worldX][worldY]) return "red";
+    if (props.ghostGrid[worldX][worldY] && activeGrid[worldX][worldY]) return "red";
     if (props.ghostGrid[worldX][worldY]) return "white";
 
-    if (props.activeGrid[worldX][worldY]) {
+    if (activeGrid[worldX][worldY]) {
       const fragment = props.gift.fragmentAt(worldX, worldY);
       if (!fragment) throw new Error("ActiveFragment should not be null");
       return randomColor(fragment);
diff --git a/src/CotMG/ui/MainBoard.tsx b/src/CotMG/ui/MainBoard.tsx
index b232e4364..4a38d6e70 100644
--- a/src/CotMG/ui/MainBoard.tsx
+++ b/src/CotMG/ui/MainBoard.tsx
@@ -18,7 +18,6 @@ interface IProps {
 }
 
 export function MainBoard(props: IProps): React.ReactElement {
-  const [grid, setGrid] = React.useState(calculateGrid(props.gift));
   const [ghostGrid, setGhostGrid] = React.useState(zeros([props.gift.width(), props.gift.height()]));
   const [pos, setPos] = React.useState([0, 0]);
   const [rotation, setRotation] = React.useState(0);
@@ -54,12 +53,10 @@ export function MainBoard(props: IProps): React.ReactElement {
       if (!props.gift.canPlace(worldX, worldY, rotation, selectedFragment)) return;
       props.gift.place(worldX, worldY, rotation, selectedFragment);
     }
-    setGrid(calculateGrid(props.gift));
   }
 
   function clear(): void {
     props.gift.clear();
-    setGrid(zeros([props.gift.width(), props.gift.height()]));
   }
 
   function updateSelectedFragment(fragment: Fragment): void {
@@ -92,7 +89,6 @@ export function MainBoard(props: IProps): React.ReactElement {
           <Grid
             width={props.gift.width()}
             height={props.gift.height()}
-            activeGrid={grid}
             ghostGrid={ghostGrid}
             gift={props.gift}
             enter={(i, j) => moveGhost(i, j, rotation)}