Skip to content

Commit 4e65487

Browse files
MatteoDiterMatteoDiter
committed
working on appstateslice
1 parent 96fc00a commit 4e65487

File tree

4 files changed

+94
-81
lines changed

4 files changed

+94
-81
lines changed

‎app/src/helperFunctions/manageSeparators.ts

Lines changed: 73 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChildElement } from '../interfaces/Interfaces';
1+
import { ChildElement, ManageSeparators } from '../interfaces/Interfaces';
22

33
const separator = {
44
id: 1000,
@@ -11,79 +11,81 @@ const separator = {
1111
framework: '',
1212
nestable: true
1313
};
14-
const manageSeparators = {};
15-
manageSeparators.nextTopSeparatorId = 1000;
16-
// this function checks for two separators in a row or missing separators and adds/removes as needed
17-
manageSeparators.handleSeparators = (arr: object[], str: string) => {
18-
if (
19-
(str === 'delete' || str === 'change position') &&
20-
arr.length === 1 &&
21-
arr[0].name === 'separator'
22-
) {
23-
arr.splice(0, 1);
24-
}
25-
for (let index = 0; index < arr.length; index++) {
26-
if (
27-
arr[index].name === 'separator' &&
28-
arr[index + 1].name === 'separator'
29-
) {
30-
arr.splice(index, 1); // removes extra separator from array
31-
}
32-
// check for duplicated separator at the end of array and remove it if separator is at the last index
33-
if (arr[arr.length - 1].name === 'separator') arr.splice(arr.length - 1, 1);
34-
// check for missing separators
14+
const manageSeparators: ManageSeparators = {
15+
nextTopSeparatorId: 1000,
16+
// this function checks for two separators in a row or missing separators and adds/removes as needed
17+
handleSeparators: (arr, str) => {
3518
if (
36-
arr[index].name !== 'separator' &&
37-
(index === 0 || arr[index - 1].name !== 'separator')
19+
(str === 'delete' || str === 'change position') &&
20+
arr.length === 1 &&
21+
arr.slice(0,1).name === 'separator'
3822
) {
39-
// initialize topSeparator inside the if condition so that every time this condition evaluated to true,
40-
// a new topSeparator with incremented id will be created
41-
const topSeparator: ChildElement = {
42-
type: 'HTML Element',
43-
typeId: separator.id,
44-
name: 'separator',
45-
childId: manageSeparators.nextTopSeparatorId,
46-
style: separator.style,
47-
children: []
48-
};
49-
// add a topSeparator before the element that does not have one
50-
arr.splice(index, 0, topSeparator);
51-
// update this value in state
52-
manageSeparators.nextTopSeparatorId += 1;
23+
arr.splice(0, 1);
5324
}
54-
// check is length is > 0 or it is a nested element
55-
if (
56-
arr[index].name !== 'input' &&
57-
arr[index].name !== 'img' &&
58-
arr[index].children.length
59-
) {
60-
// recursive call if children array
61-
str === 'delete' || str === 'change position'
62-
? manageSeparators.handleSeparators(arr[index].children, str)
63-
: manageSeparators.handleSeparators(arr[index].children);
25+
for (let index = 0; index < arr.length; index++) {
26+
if (
27+
arr[index].name === 'separator' &&
28+
arr[index + 1].name === 'separator'
29+
) {
30+
arr.splice(index, 1); // removes extra separator from array
31+
}
32+
// check for duplicated separator at the end of array and remove it if separator is at the last index
33+
if (arr[arr.length - 1].name === 'separator') arr.splice(arr.length - 1, 1);
34+
// check for missing separators
35+
if (
36+
arr[index].name !== 'separator' &&
37+
(index === 0 || arr[index - 1].name !== 'separator')
38+
) {
39+
// initialize topSeparator inside the if condition so that every time this condition evaluated to true,
40+
// a new topSeparator with incremented id will be created
41+
const topSeparator: ChildElement = {
42+
type: 'HTML Element',
43+
typeId: separator.id,
44+
name: 'separator',
45+
childId: manageSeparators.nextTopSeparatorId,
46+
style: separator.style,
47+
children: []
48+
};
49+
// add a topSeparator before the element that does not have one
50+
arr.splice(index, 0, topSeparator);
51+
// update this value in state
52+
manageSeparators.nextTopSeparatorId += 1;
53+
}
54+
// check is length is > 0 or it is a nested element
55+
if (
56+
arr[index].name !== 'input' &&
57+
arr[index].name !== 'img' &&
58+
arr[index].children.length
59+
) {
60+
// recursive call if children array
61+
str === 'delete' || str === 'change position'
62+
? manageSeparators.handleSeparators(arr[index].children, str)
63+
: manageSeparators.handleSeparators(arr[index].children);
64+
}
6465
}
66+
return manageSeparators.nextTopSeparatorId;
67+
},
68+
69+
// this function replaces separators onto which an element is dropped with the element itself
70+
mergeSeparator: (arr: object[], index: number) => {
71+
return arr.map((child) => {
72+
// Added additional nested types for lists
73+
if (
74+
(child.name === 'div' ||
75+
child.name === 'form' ||
76+
child.name === 'ol' ||
77+
child.name === 'ul') &&
78+
child.children.length
79+
) {
80+
const divContents = manageSeparators.mergeSeparator(
81+
child.children,
82+
index
83+
);
84+
return { ...child, children: divContents };
85+
} else if (child.name === 'separator' && child.children.length) {
86+
return child.children[index];
87+
} else return child;
88+
});
6589
}
66-
return manageSeparators.nextTopSeparatorId;
67-
};
68-
// this function replaces separators onto which an element is dropped with the element itself
69-
manageSeparators.mergeSeparator = (arr: object[], index: number) => {
70-
return arr.map((child) => {
71-
// Added additional nested types for lists
72-
if (
73-
(child.name === 'div' ||
74-
child.name === 'form' ||
75-
child.name === 'ol' ||
76-
child.name === 'ul') &&
77-
child.children.length
78-
) {
79-
const divContents = manageSeparators.mergeSeparator(
80-
child.children,
81-
index
82-
);
83-
return { ...child, children: divContents };
84-
} else if (child.name === 'separator' && child.children.length) {
85-
return child.children[index];
86-
} else return child;
87-
});
88-
};
90+
}
8991
export default manageSeparators;

‎app/src/interfaces/Interfaces.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ export interface State {
77
rootComponents: number[];
88
projectType: string;
99
config?: {};
10-
separator: ChildElement;
10+
separator?: ChildElement;
1111
canvasFocus: { componentId: number; childId: number | null };
1212
nextComponentId: number;
1313
nextTopSeparatorId: number;
14-
nextBottomSeparatorId: number;
14+
nextBottomSeparatorId?: number;
1515
nextChildId: number;
1616
HTMLTypes: HTMLType[];
1717
tailwind: boolean;
@@ -75,7 +75,8 @@ export interface HTMLType {
7575
style: object;
7676
placeHolderShort: string | JSX.Element;
7777
placeHolderLong: string;
78-
icon: any;
78+
// ? == optional type part of icon, cant comment out icon and it works
79+
icon?: any;
7980
framework: string;
8081
nestable: boolean;
8182
}
@@ -103,3 +104,9 @@ export interface AddRoutes {
103104
id: number;
104105
name: string;
105106
}
107+
108+
export interface ManageSeparators {
109+
mergeSeparator: (arg1:[], arg2:number) => void;
110+
handleSeparators: (arg1: [], arg2?: string) => void;
111+
nextTopSeparatorId: number
112+
}

‎app/src/redux/HTMLTypes.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import HeaderIcon from '@mui/icons-material/TextFormat';
55
import ButtonIcon from '@mui/icons-material/EditAttributes';
66
import LinkIcon from '@mui/icons-material/Link';
77
import ListIcon from '@mui/icons-material/List';
8+
89
const HTMLTypes = [
910
{
1011
id: 11,

‎app/src/redux/reducers/slice/appStateSlice.ts

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
import HTMLTypes from '../../HTMLTypes';
1212
import generateCode from '../../../helperFunctions/generateCode';
1313
import manageSeparators from '../../../helperFunctions/manageSeparators';
14+
1415
export const initialState: State = {
1516
name: '',
1617
isLoggedIn: false,
@@ -37,7 +38,7 @@ export const initialState: State = {
3738
nextComponentId: 2,
3839
nextChildId: 1,
3940
nextTopSeparatorId: 1000,
40-
HTMLTypes, // left as is for now
41+
HTMLTypes: HTMLTypes, // left as is for now
4142
tailwind: false
4243
};
4344

@@ -59,7 +60,7 @@ const findParent = (component: Component, childId: number) => {
5960
// shift off the first value and assign to an element
6061
const currentNode = nodeArr.shift();
6162
// try to find id of childNode in children
62-
if (currentNode && currentNode.children ) {
63+
if (currentNode?.children ) {
6364
if (currentNode.name !== 'input' && currentNode.name !== 'img') {
6465
for (let i = 0; i <= currentNode.children.length - 1; i++) {
6566
// if match is found return object with both the parent and the index value of the child
@@ -87,7 +88,7 @@ const childTypeExists = (
8788
while (nodeArr.length > 0) {
8889
// shift off the first value and assign to an element
8990
const currentNode = nodeArr.shift();
90-
if (currentNode && currentNode.children ) {
91+
if (currentNode?.children ) {
9192
if (currentNode.type === type && currentNode.typeId === typeId) return true;
9293
// if child node isn't found add each of the current node's children to the search array
9394
currentNode.children.forEach((node) => nodeArr.push(node));
@@ -104,7 +105,7 @@ const findChild = (component: Component, childId: number) => {
104105
while (nodeArr.length > 0) {
105106
// shift off the first value and assign to an element
106107
const currentNode = nodeArr.shift();
107-
if (currentNode && currentNode.children ) {
108+
if (currentNode?.children ) {
108109
if (currentNode.childId === childId) return currentNode;
109110
// if child node isn't found add each of the current node's children to the search array
110111
if (currentNode.name !== 'input' && currentNode.name !== 'img')
@@ -293,7 +294,7 @@ const appStateSlice = createSlice({
293294

294295
const parentComponent = findComponent(components, parentComponentId);
295296
let componentName: string = '';
296-
let componentChildren: Object[] = [];
297+
let componentChildren: ChildElement[] = [];
297298
if (type === 'Component') {
298299
components.forEach((comp) => {
299300
if (comp.id === typeId) {
@@ -353,8 +354,10 @@ const appStateSlice = createSlice({
353354
// if the childId is null, this signifies that we are adding a child to the top-level component rather than another child element
354355
// we also add a separator before any new child
355356
// if the newChild Element is an input or img type, delete the children key/value pair
356-
if (newChild.name === 'input' && newChild.name === 'img') // changin to || will breck the image and input
357-
delete newChild.children;
357+
// if (newChild.name === 'input' && newChild.name === 'img') {
358+
// delete newChild.children;
359+
// }
360+
// changin to || will breck the image and input
358361
let directParent;
359362
if (childId === null) {
360363
if (parentComponent) {

0 commit comments

Comments
 (0)