Combining add/remove with saving grid layout to LS

[lallen-6]

I am trying to implement the react-grid-layout where I can add/remove grid items and also save the layout to local storage using an individual username as a key. I have tried to implement this but am getting errors which ever way I try it, below is my code for the react grid, could someone advise where I am going wrong...

const ReactGridLayout = WidthProvider(Responsive);

//Find username form localstorage (uuid string)
const username = localStorage.getItem('username')

const Dash = (props) => {
  //Variable used for id of grid component:
  const id = uuid()

  //Hook to set layout state
  const originialLayouts = getLayout("layouts") || {}
  const savedLayout = JSON.parse(JSON.stringify(originialLayouts))
  

  //column size is static
  //layouts taken from local storage via function
  const [ state, setState ] = React.useState({
    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
    rowHeight: 30,
    layouts: {},
    layout: [].map(function(i, list) {
      return {
        i: i.toString(),
        x: i * 2,
        y: 0,
        w: 3,
        h: 3,
        add: i === (list.length - 1)
      }
    })
  })

  //function ammends layout array with additional grid item
  const addItem = (item) => { 
    console.log('adding: ' + id);
    const newLayout = state.layout;
    newLayout.push({
      i: `${id}`,
      x: (state.layout.length * 3) % (state.cols || 12),
      y: 0,
      w: 3,
      h: 3
    })
    setState({layout: newLayout})
  }

  //function to remove grid item on click
  const removeItem = (i) => {
    console.log(i)
    setState({ layout: _.reject(state.layout, { i:i }) })     
  }

  // function to calculate where to add items based on the cols
  const onBreakpointChange = (breakpoint, cols) => {
    setState({
      cols: cols,
      breakpoint: breakpoint
    })
    console.log(state)
  }

  //function to save layout to LS everytime a grid item is moved.
  const onLayoutChange = (layout, layouts) => {
    saveLayout("layouts", layouts)
    setState({ layout: layout})
  }


  return (
    <div>
      <button onClick={addItem}>Add Item</button>
        <ReactGridLayout
          className="layout"
          layouts={state.layouts}
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          onLayoutChange={(layout, state) => onLayoutChange(layout, state)}
          onBreakpointChange={onBreakpointChange}
          cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
          resizeHandles={['s', 'w', 'e', 'n', 'sw', 'nw','se', 'ne']}
          compactType={"vertical"}
          draggableHandle=".dragHandle"               
      >        
        {_.map(state.layout, (item, i) => (
          <div key={item.i} data-grid={state.layout[i]}>            
            <div className='dragHandle'>Drag From Here</div>                        
            <DashItem>
            <button onClick={() => removeItem(item.i)}>Remove Item</button>  
                 <CreateGraph data={state.layout[i]}/>
            </DashItem>
            <div className='dragHandle'>Drag From Here</div>
          </div>
        ))}
        </ReactGridLayout>
    </div>
  );
}

//function to get user layout from LS
const getLayout = (key) => {
  let ls = {};
  if (global.localStorage) {
    try {
      ls = JSON.parse(global.localStorage.getItem(username)) || {};
    } catch (error) {
      console.log('error with getLayout')
    }
  }
  return ls[key]
}

//function to save user layout to LS
const saveLayout = ( key, value ) => {
  if (global.localStorage) {
    global.localStorage.setItem( username, JSON.stringify({ [key]: value}) );
  }
}

export default Dash;

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days

[skreu]

Hi !
I am trying to do the same thing, have you succeed ?
What is the solution ?

[lallen-6]

Hi,

Yes, I did manage to do this in the end.

I amended the getLayout and saveLayout functions as below:

export const getLayout = (key) => {
  try {
    const serialisedState = localStorage.getItem(key);
    if (serialisedState === null) {
      return [];
    }
    return JSON.parse(serialisedState);
  } catch (error) {
    return [];
  }
};

//function to save user layout to LS
export const saveLayout = (layoutName, state) => {
  try {
    const serialisedState = JSON.stringify(state);
    localStorage.setItem(layoutName, serialisedState);
  } catch (error) {
    console.log("local storage error");
  }
};

So the layout is saved to local storage under a unique key. You can set the local storage layout to update every time it's changed using the onLayoutChange property of RGL.

You can call the layout back from local storage using a useEffect hook that runs on page load. This will set the layout in state every time the page is loaded i.e.:

// Load layout
  const savedLayout = getLayout(props.id);

  //effect will update the dashlayout when you load page
  React.useEffect(() => {
    setState({
      ...state,
      layout: savedLayout,
    });
  }, []);

  // set state
  const [state, setState] = React.useState({
    cols: { xl: 15, lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
    rowHeight: 100,
    layout: savedLayout,
  });

Hope this helps!

[skreu]

Hi, thanks.
Unfortunately I'm still stuck (maybe because I'm new to this).
Is there a library to import to remove these errors ?
I've copied your first code, modified the save and get layout functions, but I've got these errors:

Line 13:14: 'uuid' is not defined no-undef Line 91:14: 'DashItem' is not defined react/jsx-no-undef Line 93:19: 'CreateGraph' is not defined react/jsx-no-undef

which import have I missed ?
Thanks a lot !

[lallen-6]

Hi,
You have import errors as you have not installed some of the relevant packages. uuid creates a unique identifier which I was using to identify each individual grid element. This means that when you add/remove an element to LS each saved element will be unique and you won't end up with 2 keys the same. If you want to use this you will need to npm install uuid.

CreateGraph and DashItem were specific components created to import into the grid elements when they are added/removed. In this case you will just add whatever you are putting into your RGL elements.

I would advise trying to understand what each part of the code is doing and rewriting it in a way that suits your application instead of copying/pasting it straight in.

Hope this helps!

[skreu]

Hello,
Ok, so far here's what I have:

import React from "react";
import { WidthProvider, Responsive } from "react-grid-layout";
import {v4 as uuid} from "uuid";
import _ from "lodash";
import "./styles.css";
import "./example-styles.css";

const ResponsiveReactGridLayout = WidthProvider(Responsive);
const originalLayouts = getFromLS("layouts") || {};

/**
 * This layout demonstrates how to sync multiple responsive layouts to localstorage.
 */
export default class ResponsiveLocalStorageLayout extends React.PureComponent {
  constructor(props) {
    super(props);
  
    
    this.state = {
      layouts: JSON.parse(JSON.stringify(originalLayouts)),
      items: [].map(function(i, list) {                                            // I think the problem is here
        return {
          i: i.toString(),
          x: i * 2,
          y: 0,
          w: 2,
          h: 2,
          add: i === (list.length - 1)
        };
      })
    };

    this.onAddItem = this.onAddItem.bind(this);
    this.onBreakpointChange = this.onBreakpointChange.bind(this);
  }

  static get defaultProps() {
    return {
      className: "items",
      cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
      rowHeight: 30
    };
  }

createElement(el) {
    const removeStyle = {
      position: "absolute",
      right: "2px",
      top: 0,
      cursor: "pointer"
    };
    const i = el.i;
    return (
      <div key={i} data-grid={el}>
        <span
          className="remove"
          style={removeStyle}
          onClick={this.onRemoveItem.bind(this, i)}
        >
          x
        </span>
      </div>
    );
  }

  onAddItem() {
    /*eslint no-console: 0*/
    const id = uuid()
    console.log("adding", id);
    this.setState({
      // Add a new item. It must have a unique key!
      items: this.state.items.concat({
        i: `${id}`,
        x: (this.state.items.length * 2) % (this.state.cols || 12),
        y: Infinity, // puts it at the bottom
        w: 2,
        h: 2
      })
    });
  }

  // We're using the cols coming back from this to calculate where to add new items.
  onBreakpointChange(breakpoint, cols) {
    this.setState({
      breakpoint: breakpoint,
      cols: cols
    });
  }

  onRemoveItem(i) {
    console.log("removing", i);
    this.setState({ items: _.reject(this.state.items, { i: i }) });
  }

  resetLayout() {
    this.setState({ layouts: {} });
  }

  onLayoutChange(layout, layouts) {
    saveToLS("layouts", layouts);
    this.setState({ layout: layout});
  }

  render() {
    return (
      <div>
        <button onClick={this.onAddItem}>Add Item</button>
        <button onClick={() => this.resetLayout()}>Reset Layout</button>
        <ResponsiveReactGridLayout
          className="layout"
          cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
          rowHeight={30}
          onBreakpointChange={this.onBreakpointChange}
          {...this.props}
          layouts={this.state.layouts}
          onLayoutChange={(layout, layouts) =>
            this.onLayoutChange(layout, layouts)
          }
        >
          {_.map(this.state.items, el => this.createElement(el))}
        </ResponsiveReactGridLayout>
      </div>
    );
  } 
}

function getFromLS(key) {
  let ls = {};
  if (global.localStorage) {
    try {
      ls = JSON.parse(global.localStorage.getItem("rgl-8"));
    } catch (e) {
      /*Ignore*/
    }
  }
  return ls[key];
}

function saveToLS(key, value) {
  console.log(value)
  if (global.localStorage) {
    global.localStorage.setItem(
      "rgl-8",
      JSON.stringify({
        [key]: value
      })
    );
  }
}

if (process.env.STATIC_EXAMPLES === true) {
  import("./test-hook.jsx").then(fn =>
    fn.default(ResponsiveLocalStorageLayout)
  );
}

After multiples tries, I'm still unable to find a solution to this. It seems the saveToLS function is triggered correctly, but on the reload, I think the items properties of state is taking the priority. Therefore, when I refresh my page, it's still blank and nothing appears.

Any advices ?
Thanks a lot !