Saving hypercubes to localstorage

src/components/cube.jsx

@@ -1,7 +1,9 @@
 import React,
 {
   forwardRef,
+  useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -18,7 +20,9 @@ import './cube.pcss';
 
 // The component needs to be wrapped in `forwardRef` to give access to the
 // ref object assigned using the `ref` prop.
-const Cube = forwardRef(({ app, tableData: { initialColumns }, closeOnClickOutside }, ref) => {
+const Cube = forwardRef(({
+  app, tableData: { initialColumns }, closeOnClickOutside, id,
+}, ref) => {
   const selectableColumns = useColumnOptions(app);
   const [columns, setColumns] = useState(initialColumns);
   const currentHeader = useRef(null);
@@ -28,6 +32,41 @@ const Cube = forwardRef(({ app, tableData: { initialColumns }, closeOnClickOutsi
   let model = null;
   let hypercubeProps = null;
 
+  const modifyLocalStorage = (action) => {
+    let storedCubes = localStorage.getItem(app.id);
+    const currentCube = { id, columns };
+    if (storedCubes) {
+      storedCubes = JSON.parse(storedCubes);
+      const index = storedCubes.findIndex(cube => cube.id === id);
+      if (action === 'add') {
+        if (index >= 0) {
+          // the cube is already stored. Update the stored item.
+          storedCubes.splice(index, 1, currentCube);
+        } else {
+          storedCubes.push(currentCube);
+        }
+      } else if (action === 'remove') {
+        storedCubes.splice(index, 1);
+      }
+      localStorage.setItem(app.id, JSON.stringify(storedCubes));
+    } else if (action === 'add') {
+      localStorage.setItem(app.id, currentCube);
+    }
+  };
+
+  const beforeunload = () => {
+    modifyLocalStorage('add');
+  };
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', beforeunload);
+
+    return () => {
+      modifyLocalStorage('remove');
+      window.removeEventListener('beforeunload', beforeunload);
+    };
+  });
+
   // Any instance of the component is extended with what is returned from the
   // callback passed as the second argument.
   useImperativeHandle(ref, () => ({
@@ -126,7 +165,7 @@ const Cube = forwardRef(({ app, tableData: { initialColumns }, closeOnClickOutsi
 
   const measures = columns.filter(column => column.type === 'measure');
   const dimensions = columns.filter(column => column.type === 'dimension' || column.type === 'field');
-  hypercubeProps = createProperties(dimensions, measures);
+  hypercubeProps = useMemo(() => createProperties(dimensions, measures), [columns]);
   model = useModel(app, hypercubeProps);
 
   const isEmpty = measures.length + dimensions.length === 0;
@@ -155,4 +194,5 @@ Cube.propTypes = {
   app: PropTypes.object.isRequired,
   tableData: PropTypes.object.isRequired,
   closeOnClickOutside: PropTypes.func,
+  id: PropTypes.number.isRequired,
 };

src/components/cubes.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import SVGInline from 'react-svg-inline';
 import Cube from './cube';
@@ -30,8 +30,14 @@ export function Cubes({ app, closeOnClickOutside }) {
 
   function addCube(column) {
     if (column) {
-      const newCube = { id: count, initialColumns: [column] };
-      setCount(count + 1);
+      let newId = count;
+      const checkId = i => i.id === newId;
+
+      while (cubeList.find(checkId)) {
+        newId += 1;
+      }
+      const newCube = { id: newId, initialColumns: [column] };
+      setCount(newId + 1);
       setCubeList([
         newCube,
         ...cubeList,
@@ -42,6 +48,22 @@ export function Cubes({ app, closeOnClickOutside }) {
     forceUpdate();
   }
 
+  useEffect(() => {
+    // Check if cubes are stored in localstorage.
+    let storedCubes = localStorage.getItem(app.id);
+    const storedCubeList = [];
+    if (storedCubes) {
+      storedCubes = JSON.parse(storedCubes);
+      if (storedCubes && storedCubes.length) {
+        storedCubes.forEach((cube) => {
+          storedCubeList.push({ id: cube.id, initialColumns: cube.columns });
+          refs.current[cube.id] = React.createRef();
+        });
+      }
+      setCubeList(storedCubeList);
+    }
+  }, []);
+
   function removeCube(id) {
     setCubeList(cubeList.filter(item => item.id !== id));
     refs.current[id] = null;
@@ -81,7 +103,7 @@ export function Cubes({ app, closeOnClickOutside }) {
         <SVGInline className="copy" svg={copy} onClick={() => copyToClipboard(cube.id)} title="Copy hypercube def to clipboard" />
         <SVGInline {...closeButton} onClick={() => removeCube(cube.id)} title="Close cube" />
       </div>
-      <Cube ref={refs.current[cube.id]} app={app} tableData={cube} closeOnClickOutside={closeOnClickOutside} />
+      <Cube ref={refs.current[cube.id]} app={app} tableData={cube} closeOnClickOutside={closeOnClickOutside} id={cube.id} />
     </div>
   ));
   return (