jrangel/lcp-visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix for updating datasets from Datasetbuilder

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-27 09:32:19 -08:00
parent a274fe32e9
commit 05664f161a
5 changed files with 55 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
blocks/components/LCPDatasetBuilder.js
View File

@ -1,4 +1,4 @@
import { useState } from '@wordpress/element';
import { useState, useEffect } from '@wordpress/element';
import { Button, Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import LCPDataGrid from './LCPDataGrid';
@ -6,33 +6,43 @@ import LCPDataGrid from './LCPDataGrid';
const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
const [isOpen, setIsOpen] = useState(false);
const [activeTab, setActiveTab] = useState(0); // Track the active tab
const [datasets, setDatasets] = useState(attributes.datasets); // Use useState for datasets
// Sync state with attributes if they change outside the component
useEffect(() => {
setDatasets(attributes.datasets);
}, [attributes.datasets]);
const handleUpdateDataset = (index, newData) => {
// Log the newData in a readable format
console.log("newData (formatted for copy-pasting):", JSON.stringify(newData, null, 2));
// Make a shallow copy of the datasets to avoid mutation
const datasets = [...attributes.datasets];
// Ensure the data structure is correct before replacing
if (newData && newData.data) {
// Replace the data array at the specified index with the new data
datasets[0].data = newData.data;
// Log the datasets before the update
console.log("Before Update:", JSON.stringify(datasets, null, 2));
// Update the attributes with the modified datasets
setAttributes({
datasets: datasets
// console.log("newData (formatted for copy-pasting):", JSON.stringify(newData, null, 2));
// Check if newData.data is an array
if (Array.isArray(newData.data)) {
// Create a new reference for the datasets array
const updatedDatasets = datasets.map((dataset, i) => {
if (i === index) {
// If this is the dataset we're updating, replace it with a new object
return {
...dataset, // Copy the existing dataset
data: [...newData.data], // Deep copy the data array
};
}
return dataset; // Leave other datasets unchanged
});
// Log the updated attributes (you can check this after re-rendering)
console.log("After Update:", JSON.stringify(datasets, null, 2));
// console.log("Updated Datasets:", JSON.stringify(updatedDatasets, null, 2));
// Call setAttributes with the updated datasets
setAttributes({
...attributes, // Ensure we're not overriding other attributes accidentally
datasets: updatedDatasets, // Set the new datasets array
});
// console.log("Attributes after setAttributes:", JSON.stringify({ ...attributes, datasets: updatedDatasets }, null, 2));
} else {
console.error("Invalid data format:", newData);
// console.error("Invalid data format in newData:", newData);
}
};
return (
<>
@ -53,7 +63,7 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
<div style={{ height: 'calc(90vh - 40px)', padding: '20px' }}>
{/* Tabs */}
<div style={{ display: 'flex', marginBottom: '20px' }}>
{attributes.datasets.map((dataset, index) => (
{datasets.map((dataset, index) => (
<button
key={index}
onClick={() => setActiveTab(index)} // Set the active tab
@ -75,7 +85,7 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
{/* Render all the LCPDataGrid components */}
<div style={{ display: 'flex', flexDirection: 'column' }}>
{attributes.datasets.map((dataset, index) => (
{datasets.map((dataset, index) => (
<div
key={index}
style={{
@ -83,11 +93,11 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
transition: 'display 0.3s ease',
}}
>
<LCPDataGrid
dataset={dataset.data} // Pass the specific dataset data (only the data, not the entire dataset)
index={index}
updateDataset={handleUpdateDataset} // Function defined outside of class context
/>
<LCPDataGrid
dataset={dataset.data} // Pass the specific dataset data (only the data, not the entire dataset)
index={index}
updateDataset={handleUpdateDataset} // Function defined outside of class context
/>
</div>
))}
</div>