Skip to content

Commit

Permalink
fix(global): 🐛 fix bug of ui rendering
Browse files Browse the repository at this point in the history 
when add child component that is not visible in ui, I fix that

Ref: #54
  • Loading branch information
@PritamBag
PritamBag committed Sep 29, 2024
1 parent b33c113 commit a9bc524
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 85 deletions.
82 changes: 37 additions & 45 deletions app/components/page-builder/content-components/DefaultCanvasViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,15 @@ export default function DefaultCanvasViewer() {
const dispatch = useDispatch();
const selectedLayout = useSelector((state) => state.testBuilderReducer?.selectedLayout);
const componentsInBoxes = useSelector((state) => state.testBuilderReducer?.componentsInBoxes) || [];
const layoutName = selectedLayout || "RightDrawerLayout";
const layoutPlaceholders = layoutData[layoutName];

const layoutPlaceholders = layoutData[selectedLayout] || [];

// Dispatch layout selection when the component mounts
// React.useEffect(() => {
// if (selectedLayout) {
// dispatch(selectLayout(selectedLayout));
// }
// }, [dispatch, selectedLayout]);

/**
* Handles click on add button for parent components
Expand Down Expand Up @@ -82,19 +89,17 @@ export default function DefaultCanvasViewer() {
* @returns {React.Component[]} Array of rendered components
*/
const renderComponents = (components, placeholderIndex, path = []) => {
components = components?.children;
if (!components || !Array.isArray(components) ) {
return null;
}
return components.map((component, componentIndex) => {
const children = components?.children || [];

return children.map((component, componentIndex) => {
const currentPath = [...path, componentIndex];

return (
<CoreBox
key={componentIndex}
key={`${placeholderIndex}-${componentIndex}`} // Unique key
styleClasses={[CoreClasses.BORDER.BORDER, CoreClasses.PADDING.P1]}
>
<CoreTypographyBody1>{component.ComponentName}</CoreTypographyBody1>
<CoreTypographyBody1>{component.component}</CoreTypographyBody1>

<CoreIconButton
onClick={() => handleAddChildClick(placeholderIndex, currentPath)}
Expand All @@ -105,50 +110,37 @@ export default function DefaultCanvasViewer() {
</CoreIconButton>

<CoreStack spacing={1}>
{component.children && component.children.length > 0 && renderComponents(component.children, placeholderIndex, currentPath)}
{component.children && component.children.length > 0 && renderComponents({ children: component.children }, placeholderIndex, currentPath)}
</CoreStack>
</CoreBox>
);
});
};

return (
<>
<CoreBox styleClasses={[CoreClasses.BG.BG_DOT_GRID_1, CoreClasses.HEIGHT.VH_75, CoreClasses.OVERFLOW.OVERFLOW_AUTO, CoreClasses.PADDING.P2]}>
<CoreBox styleClasses={[CoreClasses.BG.BG_GREY_100, CoreClasses.PADDING.P1, CoreClasses.SHADOW.NORMAL, CoreClasses.OVERFLOW.OVERFLOW_AUTO]}>
{layoutPlaceholders && (
<>
{layoutPlaceholders.map((sectionId, placeholderIndex) => (
<CoreLayoutItem key={sectionId} id={`${layoutName}.PLACEHOLDER.${sectionId}`}>
<CoreTypographyBody1>PLACEHOLDER {placeholderIndex + 1}</CoreTypographyBody1>

<CoreStack spacing={1}>
{renderComponents(componentsInBoxes[placeholderIndex] || [], placeholderIndex)}
</CoreStack>
<CoreBox styleClasses={[CoreClasses.BG.BG_DOT_GRID_1, CoreClasses.HEIGHT.VH_75, CoreClasses.OVERFLOW.OVERFLOW_AUTO, CoreClasses.PADDING.P2]}>
<CoreBox styleClasses={[CoreClasses.BG.BG_GREY_100, CoreClasses.PADDING.P1, CoreClasses.SHADOW.NORMAL, CoreClasses.OVERFLOW.OVERFLOW_AUTO]}>
{layoutPlaceholders && layoutPlaceholders.length > 0 && (
<>
{layoutPlaceholders.map((sectionId, placeholderIndex) => (
<CoreLayoutItem key={sectionId} id={`${selectedLayout}.PLACEHOLDER.${sectionId}`}>
<CoreTypographyBody1>PLACEHOLDER {placeholderIndex + 1}</CoreTypographyBody1>

<CoreIconButton
variant="text"
onClick={() => handleAddClick(placeholderIndex)}
>
<CoreIcon icon="add" />
</CoreIconButton>
</CoreLayoutItem>
))}
</>
)}
<CoreStack spacing={1}>
{renderComponents(componentsInBoxes[placeholderIndex] || {}, placeholderIndex)}
</CoreStack>

<CoreBox>
<CoreTypographyBody1>JSON Data:</CoreTypographyBody1>

<CoreBox styleClasses={[CoreClasses.BORDER.BORDER, CoreClasses.PADDING.P1]}>
<CoreBox component="pre">
{/* Display the JSON data */}
{JSON.stringify(componentsInBoxes, null, 2)}
</CoreBox>
</CoreBox>
</CoreBox>
</CoreBox>
<CoreIconButton
variant="text"
onClick={() => handleAddClick(placeholderIndex)}
>
<CoreIcon icon="add" />
</CoreIconButton>
</CoreLayoutItem>
))}
</>
)}
</CoreBox>
</>
</CoreBox>
);
}
}
88 changes: 48 additions & 40 deletions app/reducers/testBuilder.reducer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,24 @@ import {
*/
const initialState = {
activeBox : null,
componentsInBoxes : [],
componentsInBoxes : [],
selectedComponentPath: null,
selectedLayout : "RightDrawerLayout",
selectedLayout : "BlankLayout",
};

/**
* Initializes componentsInBoxes based on the selected layout
* @param {string} layout - Layout to initialize
* @returns {Object[]} Array of initialized boxes
*/
const initializeComponentsInBoxes = (layout) => {
const boxIds = layoutData[layout];

return boxIds.map((id) => ({
id,
// eslint-disable-next-line sort-keys-fix/sort-keys-fix
children: []
}));
};

/**
Expand All @@ -24,19 +39,12 @@ const initialState = {
* @returns {Object} Updated state
*/
const handleSelectLayout = (state, newLayout) => {
const boxIds = layoutData[newLayout];

// Create componentsInBoxes with each box having an id and an empty components array
const componentsInBoxes = boxIds.map((id) => ({
// Set the id based on layoutData values
children: [],
id // Initialize an empty components array for each box
}));
const componentsInBoxes = initializeComponentsInBoxes(newLayout);

return {
...state,
componentsInBoxes, // This now contains an array of box objects
selectedLayout: newLayout, // Update the selected layout
componentsInBoxes,
selectedLayout: newLayout,
};
};

Expand All @@ -50,46 +58,46 @@ const handleAddComponent = (state, payload) => {
const { component, boxIndex, path } = payload;
const newComponentsInBoxes = [...state.componentsInBoxes]; // Create a shallow copy

// Validate boxIndex and ensure it exists
// Ensure boxIndex exists, otherwise initialize it
if (!newComponentsInBoxes[boxIndex]) {
newComponentsInBoxes[boxIndex] = { children: [] }; // Initialize if undefined
newComponentsInBoxes[boxIndex] = { children: [] };
}

if (path === null) {
// Add the component at the root level of the box
newComponentsInBoxes[boxIndex].children.push({
ComponentName: component,
children : [],
});
} else {
// Traverse the path to find the correct place to insert the component
let currentLevel = newComponentsInBoxes[boxIndex];

for (let i = 0; i < path.length; i++) {
const currentIndex = path[i];

// Check if the current level exists at this path, if not initialize it
// Helper function to traverse and add component
const addComponentRecursively = (currentLevel, path, component) => {
path.forEach((currentIndex) => {
// Ensure current level has children array
if (!currentLevel.children) {
currentLevel.children = []; // Initialize children array if not present
currentLevel.children = [];
}

// Move to the next level in the component hierarchy
// Initialize child if it does not exist
if (!currentLevel.children[currentIndex]) {
currentLevel.children[currentIndex] = { children: [] }; // Ensure child exists
currentLevel.children[currentIndex] = { children: [] };
}

currentLevel = currentLevel.children[currentIndex]; // Move down the tree
}

// Now add the new component at the final level
if (!currentLevel.children) {
currentLevel.children = [];
}
// Move down the tree
currentLevel = currentLevel.children[currentIndex];
});

// Finally, add the new component at the last level
currentLevel.children.push({
ComponentName: component,
children : [],
component: component,
// eslint-disable-next-line sort-keys-fix/sort-keys-fix
children : [],
});
};

// Check if the path is null to add at the root level
if (path === null) {
newComponentsInBoxes[boxIndex].children.push({
component: component,
// eslint-disable-next-line sort-keys-fix/sort-keys-fix
children : [],
});
} else {
// Add the component recursively
addComponentRecursively(newComponentsInBoxes[boxIndex], path, component);
}

return {
Expand Down

0 comments on commit a9bc524

Please sign in to comment.