From 65d70da09957eb2fe94158519b75baba3e5d43eb Mon Sep 17 00:00:00 2001
From: Zach Smith <zach@saeon.ac.za>
Date: Thu, 10 Dec 2020 06:08:57 +0200
Subject: [PATCH 1/3] Added example using a controlled React component and
 hooks. #735

---
 demo/index.html       |  1 +
 demo/react-hooks.html | 94 +++++++++++++++++++++++++++++++++++++++++++
 doc/CHANGES.md        |  2 +-
 3 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 demo/react-hooks.html

diff --git a/demo/index.html b/demo/index.html
index a47b5fa53..e30649bd0 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -15,6 +15,7 @@ <h1>Demos</h1>
     <li><a href="nested.html">Nested grids</a></li>
     <li><a href="responsive.html">Responsive</a></li>
     <li><a href="react.html">ReactJS</a></li>
+    <li><a href="react-hooks.html">ReactJS (Hooks)</a></li>
     <li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
     <li><a href="serialization.html">Serialization</a></li>
     <li><a href="static.html">Static</a></li>
diff --git a/demo/react-hooks.html b/demo/react-hooks.html
new file mode 100644
index 000000000..490ca339b
--- /dev/null
+++ b/demo/react-hooks.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Gridstack.js React integration example</title>
+  <link rel="stylesheet" href="demo.css" />
+  <script src="../dist/gridstack-h5.js"></script>
+
+  <!-- Scripts to use react inside html -->
+  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+<script type="text/babel">
+  const { useState, useEffect, createRef, useRef } = React
+
+  const Item = ({ id }) => <div>I am item: {id}</div>
+
+  const ControlledStack = ({ items, addItem }) => {
+    const refs = useRef({})
+
+    if (Object.keys(refs.current).length !== items.length) {
+      items.forEach(({ id }) => {
+        refs.current[id] = refs.current[id] || createRef()
+      })
+    }
+
+    useEffect(() => {
+      const grid = GridStack.init()
+      grid.removeAll(false)
+      items.forEach(({ id }) => {
+        grid.makeWidget(refs.current[id].current)
+      })
+    }, [items])
+
+    return (
+      <div>
+        <button onClick={addItem}>Add new widget</button>
+        <div className="grid-stack">
+          {items.map((item, i) => {
+            return (
+              <div
+                ref={refs.current[item.id]}
+                key={item.id}
+                className={'grid-stack-item'}
+                gs-w="12"
+              >
+                <div className="grid-stack-item-content">
+                  <Item {...item} />
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+
+  const App = props => {
+    const [items, setItems] = useState([
+      { id: 'item-1' },
+      { id: 'item-2' }
+    ])
+
+    return (
+      <div>
+        <h1>Using GridStack.js with controlled React component and hooks</h1>
+        <p>
+          As with any virtualDOM-based framework, you need to check if React
+              has rendered the DOM (or any updates to it){" "}
+          <strong>before</strong> you initialize GridStack or call its
+              methods. This example shows how to make rendered components widgets:
+          </p>
+        <ol>
+          <li>Render items, each with a reference</li>
+          <li>Convert each rendered item to a widget using the reference and the  <a href="https://github.com/gridstack/gridstack.js/tree/develop/doc#makewidgetel">
+            makeWidget</a> function</li>
+        </ol>
+        <ControlledStack items={items} addItem={() => setItems([...items, { id: `item-${items.length + 1}` }])} />
+      </div>
+    )
+  }
+
+  ReactDOM.render(<App />, document.getElementById("root"))
+</script>
+
+</html>
\ No newline at end of file
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index d7533b8db..831d950ed 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -5,7 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
-- [3.1.2 (2020-12-7)](#311-2020-12-7)
+- [3.1.2 (2020-12-7)](#312-2020-12-7)
 - [3.1.0 (2020-12-4)](#310-2020-12-4)
 - [3.0.0 (2020-11-29)](#300-2020-11-29)
 - [2.2.0 (2020-11-7)](#220-2020-11-7)

From 82e5525677e5756c4fe72aa385d5315698af78de Mon Sep 17 00:00:00 2001
From: Zach Smith <zachsmith.sa@gmail.com>
Date: Thu, 10 Dec 2020 11:03:51 +0200
Subject: [PATCH 2/3] Updated in response to feedback on #1531

---
 demo/react-hooks.html | 156 +++++++++++++++++++++++++++++++++---------
 1 file changed, 125 insertions(+), 31 deletions(-)

diff --git a/demo/react-hooks.html b/demo/react-hooks.html
index 490ca339b..6272b40ec 100644
--- a/demo/react-hooks.html
+++ b/demo/react-hooks.html
@@ -15,7 +15,28 @@
 </head>
 
 <body>
-  <div id="root"></div>
+  <div>
+    <h1>Using GridStack.js with React hooks</h1>
+    <p>
+      As with any virtualDOM-based framework, you need to check if Reacthas rendered the DOM (or any updates to it)
+      <strong>before</strong> you initialize GridStack or call its methods. This example shows how to make rendered
+      components widgets:
+    </p>
+    <ol>
+      <li>Render items, each with a reference</li>
+      <li>Convert each rendered item to a widget using the reference and the <a
+          href="https://github.com/gridstack/gridstack.js/tree/develop/doc#makewidgetel">
+          makeWidget</a> function</li>
+    </ol>
+  </div>
+  <div>
+    <h2>Controlled stack</h2>
+    <div id="controlled-stack"></div>
+  </div>
+  <div>
+    <h2>Uncontrolled stack</h2>
+    <div id="uncontrolled-stack"></div>
+  </div>
 </body>
 
 <script type="text/babel">
@@ -23,8 +44,13 @@
 
   const Item = ({ id }) => <div>I am item: {id}</div>
 
+  //
+  // Controlled example
+  //
+
   const ControlledStack = ({ items, addItem }) => {
     const refs = useRef({})
+    const gridRef = useRef()
 
     if (Object.keys(refs.current).length !== items.length) {
       items.forEach(({ id }) => {
@@ -33,25 +59,28 @@
     }
 
     useEffect(() => {
-      const grid = GridStack.init()
+      gridRef.current =
+        gridRef.current ||
+        GridStack.init(
+          {
+            float: true,
+          },
+          '.controlled'
+        )
+      const grid = gridRef.current
+      grid.batchUpdate()
       grid.removeAll(false)
-      items.forEach(({ id }) => {
-        grid.makeWidget(refs.current[id].current)
-      })
+      items.forEach(({ id }) => grid.makeWidget(refs.current[id].current))
+      grid.commit()
     }, [items])
 
     return (
       <div>
         <button onClick={addItem}>Add new widget</button>
-        <div className="grid-stack">
+        <div className={`grid-stack controlled`}>
           {items.map((item, i) => {
             return (
-              <div
-                ref={refs.current[item.id]}
-                key={item.id}
-                className={'grid-stack-item'}
-                gs-w="12"
-              >
+              <div ref={refs.current[item.id]} key={item.id} className={'grid-stack-item'}>
                 <div className="grid-stack-item-content">
                   <Item {...item} />
                 </div>
@@ -63,32 +92,97 @@
     )
   }
 
-  const App = props => {
-    const [items, setItems] = useState([
-      { id: 'item-1' },
-      { id: 'item-2' }
-    ])
+  const ControlledExample = () => {
+    const [items, setItems] = useState([{ id: 'item-1' }, { id: 'item-2' }])
+
+    return (
+      <ControlledStack
+        items={items}
+        addItem={() => setItems([...items, { id: `item-${items.length + 1}` }])}
+      />
+    )
+  }
+
+  //
+  // Uncontrolled example
+  //
+
+  const UncontrolledExample = () => {
+    const gridRef = useRef()
+
+    const [state, setState] = useState({
+      count: 0,
+      info: '',
+      items: [
+        { x: 2, y: 1, h: 2 },
+        { x: 2, y: 4, w: 3 },
+        { x: 4, y: 2 },
+        { x: 3, y: 1, h: 2 },
+        { x: 0, y: 6, w: 2, h: 2 },
+      ],
+    })
+
+    useEffect(() => {
+      gridRef.current =
+        gridRef.current ||
+        GridStack.init(
+          {
+            float: true,
+            cellHeight: '70px',
+            minRow: 1,
+          },
+          '.uncontrolled'
+        )
+
+      const grid = gridRef.current
+
+      grid.on('dragstop', (event, element) => {
+        const node = element.gridstackNode
+        setState({
+          ...state,
+          info: `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`,
+        })
+
+        let timerId
+        window.clearTimeout(timerId)
+        timerId = window.setTimeout(() => {
+          setState({
+            ...state,
+            info: '',
+          })
+        }, 2000)
+      })
+    }, [])
 
     return (
       <div>
-        <h1>Using GridStack.js with controlled React component and hooks</h1>
-        <p>
-          As with any virtualDOM-based framework, you need to check if React
-              has rendered the DOM (or any updates to it){" "}
-          <strong>before</strong> you initialize GridStack or call its
-              methods. This example shows how to make rendered components widgets:
-          </p>
-        <ol>
-          <li>Render items, each with a reference</li>
-          <li>Convert each rendered item to a widget using the reference and the  <a href="https://github.com/gridstack/gridstack.js/tree/develop/doc#makewidgetel">
-            makeWidget</a> function</li>
-        </ol>
-        <ControlledStack items={items} addItem={() => setItems([...items, { id: `item-${items.length + 1}` }])} />
+        <button
+          onClick={() => {
+            const grid = gridRef.current
+            const node = state.items[state.count] || {
+              x: Math.round(12 * Math.random()),
+              y: Math.round(5 * Math.random()),
+              w: Math.round(1 + 3 * Math.random()),
+              h: Math.round(1 + 3 * Math.random()),
+            }
+            node.id = node.content = String(state.count)
+            setState(prevState => ({
+              ...state,
+              count: prevState.count + 1,
+            }))
+            grid.addWidget(node)
+          }}
+        >
+          Add Widget
+        </button>
+        <section class="grid-stack uncontrolled"></section>
       </div>
     )
   }
 
-  ReactDOM.render(<App />, document.getElementById("root"))
+  ReactDOM.render(<ControlledExample />, document.getElementById('controlled-stack'))
+  ReactDOM.render(<UncontrolledExample />, document.getElementById('uncontrolled-stack'))
+
 </script>
 
 </html>
\ No newline at end of file

From a7eac93185d0ce8ac7bf84fed0aeb82e2311e9be Mon Sep 17 00:00:00 2001
From: Zach Smith <zachsmith.sa@gmail.com>
Date: Thu, 10 Dec 2020 11:12:40 +0200
Subject: [PATCH 3/3] Fixed state-management bug where old state values were
 set instead of new state values

---
 demo/react-hooks.html | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/demo/react-hooks.html b/demo/react-hooks.html
index 6272b40ec..e3c8e6fd9 100644
--- a/demo/react-hooks.html
+++ b/demo/react-hooks.html
@@ -138,18 +138,18 @@ <h2>Uncontrolled stack</h2>
 
       grid.on('dragstop', (event, element) => {
         const node = element.gridstackNode
-        setState({
-          ...state,
+        setState(prevState => ({
+          ...prevState,
           info: `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`,
-        })
+        }))
 
         let timerId
         window.clearTimeout(timerId)
         timerId = window.setTimeout(() => {
-          setState({
-            ...state,
+          setState(prevState => ({
+            ...prevState,
             info: '',
-          })
+          }))
         }, 2000)
       })
     }, [])
@@ -167,7 +167,7 @@ <h2>Uncontrolled stack</h2>
             }
             node.id = node.content = String(state.count)
             setState(prevState => ({
-              ...state,
+              ...prevState,
               count: prevState.count + 1,
             }))
             grid.addWidget(node)
@@ -175,6 +175,7 @@ <h2>Uncontrolled stack</h2>
         >
           Add Widget
         </button>
+        <div>{JSON.stringify(state)}</div>
         <section class="grid-stack uncontrolled"></section>
       </div>
     )