Local storage

1"use client";
2 
3import { DndGrid, type Layout, layoutSchema } from "@dnd-grid/react";
4import { useEffect, useState } from "react";
5 
6const STORAGE_KEY = "dnd-grid-layout";
7 
8const defaultLayout: Layout = [0, 1, 2, 3, 4, 5].map((i) => ({
9  id: i.toString(),
10  x: (i * 2) % 12,
11  y: Math.floor(i / 6) * 2,
12  w: 2,
13  h: 2,
14}));
15 
16const normalizeLayout = (value: unknown): Layout | null => {
17  if (!Array.isArray(value)) {
18    return null;
19  }
20 
21  const normalized = value.map((item, index) => {
22    if (!item || typeof item !== "object") {
23      return null;
24    }
25    const record = item as Record<string, unknown>;
26    const candidate = record.id ?? record.i ?? record.key;
27 
28    let id: string;
29    if (typeof candidate === "string" && candidate.trim().length > 0) {
30      id = candidate;
31    } else if (typeof candidate === "number" && Number.isFinite(candidate)) {
32      id = candidate.toString();
33    } else {
34      id = `item-${index}`;
35    }
36 
37    return {
38      ...record,
39      id,
40    };
41  });
42 
43  if (normalized.some((item) => item === null)) {
44    return null;
45  }
46 
47  const parsed = layoutSchema.safeParse(normalized);
48  return parsed.success ? (parsed.data as Layout) : null;
49};
50 
51export function LocalStorageExample() {
52  const [layout, setLayout] = useState<Layout>(defaultLayout);
53 
54  useEffect(() => {
55    const saved = localStorage.getItem(STORAGE_KEY);
56    if (!saved) {
57      return;
58    }
59    try {
60      const parsed = JSON.parse(saved);
61      const normalized = normalizeLayout(parsed);
62      if (normalized) {
63        setLayout(normalized);
64        return;
65      }
66    } catch {
67      // ignore and fall back to default layout
68    }
69    setLayout(defaultLayout);
70    localStorage.removeItem(STORAGE_KEY);
71  }, []);
72 
73  const handleLayoutChange = (newLayout: Layout) => {
74    setLayout(newLayout);
75    localStorage.setItem(STORAGE_KEY, JSON.stringify(newLayout));
76  };
77 
78  const resetLayout = () => {
79    setLayout(defaultLayout);
80    localStorage.removeItem(STORAGE_KEY);
81  };
82 
83  return (
84    <div>
85      <button onClick={resetLayout} type="button">
86        Reset Layout
87      </button>
88 
89      <DndGrid
90        cols={12}
91        layout={layout}
92        onLayoutChange={handleLayoutChange}
93        rowHeight={50}
94      >
95        {layout.map((item) => (
96          <div className="grid-item" key={item.id}>
97            {item.id}
98          </div>
99        ))}
100      </DndGrid>
101    </div>
102  );
103}