From 922e28a1985bbca4a053d7e3414082726a6cd9d1 Mon Sep 17 00:00:00 2001
From: Panayiotis Lipiridis <lipiridis@gmail.com>
Date: Thu, 24 Dec 2020 23:15:15 +0200
Subject: [PATCH] Update the state properly

---
 src/components/App.tsx   | 1 +
 src/components/Stats.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 012cf8da8..cab3b4360 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -388,6 +388,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         />
         {this.state.showStats && (
           <Stats
+            setAppState={this.setAppState}
             appState={this.state}
             elements={this.scene.getElements()}
             onClose={this.toggleStats}
diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
index 6ef19710a..c4b781b63 100644
--- a/src/components/Stats.tsx
+++ b/src/components/Stats.tsx
@@ -24,6 +24,7 @@ const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
 }, 500);
 
 export const Stats = (props: {
+  setAppState: React.Component<any, AppState>["setState"];
   appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   onClose: () => void;
@@ -47,8 +48,9 @@ export const Stats = (props: {
   const selectedBoundingBox = getCommonBounds(selectedElements);
 
   const onGridSizeChange = () => {
-    //TODO: Update the state properly and rerender the grid
-    props.appState.gridSize = ((props.appState.gridSize - 5) % 50) + 10;
+    props.setAppState({
+      gridSize: ((props.appState.gridSize - 5) % 50) + 10,
+    });
   };
 
   if (isMobile && props.appState.openMenu) {