From 11f286735994579c66c932ede1be69202ec4b829 Mon Sep 17 00:00:00 2001
From: Michel Engelen <32863416+michelengelen@users.noreply.github.com>
Date: Thu, 19 Oct 2023 21:28:49 +0200
Subject: [PATCH] [docs] Add a recipe for saving and restoring `state`
 externally (#10722)

Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com>
Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com>
---
 .../state/SaveAndRestoreStateInitialState.js  | 47 ++++++++++++++++++
 .../state/SaveAndRestoreStateInitialState.tsx | 48 +++++++++++++++++++
 ...aveAndRestoreStateInitialState.tsx.preview | 10 ++++
 docs/data/data-grid/state/state.md            |  7 +++
 docs/scripts/pages/playground/index.tsx       |  7 +++
 5 files changed, 119 insertions(+)
 create mode 100644 docs/data/data-grid/state/SaveAndRestoreStateInitialState.js
 create mode 100644 docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx
 create mode 100644 docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview
 create mode 100644 docs/scripts/pages/playground/index.tsx

diff --git a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.js b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.js
new file mode 100644
index 0000000000000..d0d385fe1e7b6
--- /dev/null
+++ b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.js
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { DataGridPremium, useGridApiRef } from '@mui/x-data-grid-premium';
+
+export default function SaveAndRestoreStateInitialState() {
+  const apiRef = useGridApiRef();
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 10,
+  });
+
+  const [initialState, setInitialState] = React.useState();
+
+  React.useEffect(() => {
+    const stateFromLocalStorage = localStorage?.getItem('dataGridState');
+    setInitialState(stateFromLocalStorage ? JSON.parse(stateFromLocalStorage) : {});
+  }, []);
+
+  const saveSnapshot = React.useCallback(() => {
+    if (apiRef?.current && localStorage) {
+      const currentState = apiRef.current.exportState();
+      localStorage.setItem('dataGridState', JSON.stringify(currentState));
+    }
+  }, [apiRef]);
+
+  if (!initialState) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Box sx={{ height: 300, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        apiRef={apiRef}
+        loading={loading}
+        onStateChange={saveSnapshot}
+        initialState={{
+          ...data.initialState,
+          ...initialState,
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx
new file mode 100644
index 0000000000000..7f94bcbed7f69
--- /dev/null
+++ b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { DataGridPremium, useGridApiRef } from '@mui/x-data-grid-premium';
+import { GridInitialStatePremium } from '@mui/x-data-grid-premium/models/gridStatePremium';
+
+export default function SaveAndRestoreStateInitialState() {
+  const apiRef = useGridApiRef();
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 10,
+  });
+
+  const [initialState, setInitialState] = React.useState<GridInitialStatePremium>();
+
+  React.useEffect(() => {
+    const stateFromLocalStorage = localStorage?.getItem('dataGridState');
+    setInitialState(stateFromLocalStorage ? JSON.parse(stateFromLocalStorage) : {});
+  }, []);
+
+  const saveSnapshot = React.useCallback(() => {
+    if (apiRef?.current && localStorage) {
+      const currentState = apiRef.current.exportState();
+      localStorage.setItem('dataGridState', JSON.stringify(currentState));
+    }
+  }, [apiRef]);
+
+  if (!initialState) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Box sx={{ height: 300, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        apiRef={apiRef}
+        loading={loading}
+        onStateChange={saveSnapshot}
+        initialState={{
+          ...data.initialState,
+          ...initialState,
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview
new file mode 100644
index 0000000000000..aaea3703c6eab
--- /dev/null
+++ b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview
@@ -0,0 +1,10 @@
+<DataGridPremium
+  {...data}
+  apiRef={apiRef}
+  loading={loading}
+  onStateChange={saveSnapshot}
+  initialState={{
+    ...data.initialState,
+    ...initialState,
+  }}
+/>
\ No newline at end of file
diff --git a/docs/data/data-grid/state/state.md b/docs/data/data-grid/state/state.md
index fc6d84fb87cd1..b71d383446fb5 100644
--- a/docs/data/data-grid/state/state.md
+++ b/docs/data/data-grid/state/state.md
@@ -93,6 +93,13 @@ If you restore the page using `initialState` before the data is fetched, the Dat
 
 {{"demo": "RestoreStateInitialState.js", "bg": "inline", "defaultCodeOpen": false}}
 
+### Save and restore the state from external storage
+
+You can use `apiRef.current.exportState()` to save a snapshot of the state to an external storage (e.g. using `localStorage` or `redux`).
+This way the state can be persisted when refreshing the page or navigating to another page.
+
+{{"demo": "SaveAndRestoreStateInitialState.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ### Restore the state with apiRef
 
 You can pass the state returned by `apiRef.current.exportState()` to the `apiRef.current.restoreState` method.
diff --git a/docs/scripts/pages/playground/index.tsx b/docs/scripts/pages/playground/index.tsx
new file mode 100644
index 0000000000000..8892bf1b46a8d
--- /dev/null
+++ b/docs/scripts/pages/playground/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export default function Playground() {
+  return (
+    <div>A playground for a fast iteration development cycle in isolation outside of git.</div>
+  );
+}